# 目がチカチカする縞模様の背景やヒーロー画像

Source: https://easeweb.dev/learn/striped-backgrounds
Topics: 制限時間と動き > 背景やヒーロー画像に、広い範囲の強い縞模様がない (best practice; related to WCAG 2.3.1)
The fix: 縞の幅をパーセントで指定して、どの幅でもヒーローに太い縞が4組だけ入るようにするか、細い縞のまま、相対輝度の差が白の10分の1未満の近い2色にします。濃い縞を小さなタイルだけに収める方法も、150%の拡大表示までは面積の基準を下回ります。
Test with: zoom, contrast measurement, flash analysis
References: https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html https://www.w3.org/TR/WCAG22/#dfn-general-flash-and-red-flash-thresholds https://www.itu.int/rec/R-REC-BT.1702 https://pubmed.ncbi.nlm.nih.gov/16146438/ https://pubmed.ncbi.nlm.nih.gov/16060930/ https://pubmed.ncbi.nlm.nih.gov/871807/ https://www1.essex.ac.uk/psychology/overlays/1999-141.pdf https://pmc.ncbi.nlm.nih.gov/articles/PMC6867050/ https://www.tcnet.ne.jp/wp-content/uploads/community_ch/broadcasting-plan-standard/standard_Exhibit.pdf https://epilepsysociety.org.uk/sites/default/files/2025-04/PhotosensitiveepilepsyApril2025.pdf https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Accessibility_and_Spatial_Patterns https://www.w3.org/TR/css-values-4/#reference-pixel https://www.w3.org/TR/wcag-3.0/#dfn-pseudo-motion https://github.com/w3c/wcag3/issues/739 https://github.com/electronicarts/IRIS

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。また、医学的な助言でもありません。

## 場面

ある生地のショップが夏のコレクションを公開します。デザイナーはトップページをグラフィカルで今風に見せたいと考え、ヒーローをオプアート風にしました。幅8ピクセルの黒と白の縦縞がページの幅いっぱいに並び、中央の白いカードに「夏のコレクション」の見出しと「コレクションを見る」ボタンがあります。動くものは何もありません。ところが数秒見ていると、縞がちらつき始めます。縁が曲がり、ないはずの色がにじみ、ヒーロー全体が流れていくように見えます。同じ問題は、ヒーローに使った輪や格子のオプアートの写真やイラスト、模様のギャラリーから写した市松模様や千鳥格子の背景、セクション一面に細かく並べた水玉、拡大表示やスクロールで不揃いな帯に変わる幅1ピクセルの縞でも起きます。

## 確認できる問題

ここで満たさない達成基準はなく、このガイドはベストプラクティスです。達成基準2.3.1「3回の閃光、又は閾値以下」が数えるのは閃光、つまり明るさが上がってから下がる、または下がってから上がる変化の組です。動かない画像には閃光がないため、コントラストや大きさにかかわらず、このヒーローは満たします。2.3.1の解説書が模様に触れるのは、ホワイトノイズや交互に入れ替わる市松模様のような、細かく均一な模様の点滅を例外とする箇所だけです。WCAG 3の草案には、動いているように感じさせる静的な内容を「擬似的な動き」と定義して避けるよう求める要件がありますが、まだ検討の段階です。

これらの基準は、テレビ放送のために作られたものです。米国てんかん財団の専門家合意（Harding、Wilkinsら、2005年）は、どの向きであれ明暗の組が5組を超えるはっきりした縞を、発作を誘発しうる模様としています。縞が、想定される最も近い視聴距離から0.006ステラジアンを超える範囲を覆い、最も明るい縞が50 cd/m²を超え、0.5秒以上表示される場合、向きを変える、揺れる、点滅する、明暗が反転する模様は5組まで、変化しない模様は「8本まで」とします。ITU-R BT.1702-3は、縞は平行でも放射状でも、曲線でも直線でもよく、水玉のような同じ要素の列でもできると加えています。参考情報の付属書では、明暗の縞の明るさの差が、有害な閃光と同じだけある場合に限って有害な模様と数えます。動かない模様は、画面の40%を超える場合だけで、専門家合意の4分の1より緩やかです。日本でも、数値は示していませんが、NHKと民放連の「アニメーション等の映像手法に関するガイドライン」が、縞模様、渦巻き模様、同心円模様などの規則的なパターン模様が画面の大部分を占めることを避けるよう求めています。

WCAGの閃光の基準にも、同じ数字が使われています。0.006ステラジアンを視野10度の範囲の4分の1と定め、W3Cはその範囲を341 × 256 CSSピクセルと見積もっています。一般閃光は、白の相対輝度の10分の1以上の変化です。これを動かない模様に当てはめるのは、このガイド独自の解釈で、Web向けに定められた規則ではありません。この解釈に従うと、このヒーローはすべての点で基準を超えます。縞は黒（相対輝度はほぼ0）と白（1）で、幅1,280ピクセルでは明暗が80組あり、範囲の4分の1をはるかに超えて覆います。腕を伸ばした距離では1 CSSピクセルが約0.0213度なので、1組は約3分の1度です。1度あたり3周期に近く、Arnold Wilkinsらが、不快感、錯視、発作を最も起こしやすいと示した間隔です。

## 利用者への影響

図形への過敏性は光過敏性てんかんのある人の多くに見られ、その約3割から5割で臨床的に問題になります。ある研究では、光過敏性の患者32人のうち11人が、動かない模様に反応しました。1度あたり約3周期の縞は、多くの人に色、形、動きの錯視を起こすことがあり、片頭痛のある人には頭痛を起こすこともあります。英国のEpilepsy Societyは、画面に映る、黒と白の縞や格子のような明暗の強い模様を、発作の引き金になりうるものに挙げています。W3Cで認知のアクセシビリティに取り組むタスクフォースも、WCAG 3が扱うべき擬似的な動きの例として、背景の斜線や錯視を挙げています。スマートフォンを顔に近づけて見れば、ヒーローが視界に占める割合はさらに大きくなります。

## 自動チェックとAIの限界

この診断ツールは、ここでは何も見つけません。閃光のチェックは、アニメーションを少しずつ進めながら変化を数えるものですが、このヒーローは何も変化しないからです。axeにも、axeのルールで動くLighthouseにも模様のルールはなく、WCAGの達成基準にもないため、ページは合格します。WCAGに照らしてページを確認するよう頼まれたAIにも、この縞を指摘する理由がありません。一方で、Lea VerouのCSS3 Patterns Galleryのような模様のギャラリーは、縞、市松模様、千鳥格子、水玉を、大きさやコントラストに触れないまま、写して使える背景として載せています。EAが公開しているオープンソースのライブラリーIRISは、動画の閃光に加えて有害な模様も調べるため、ページを録画してかけることはできます。それでも、画像の中の模様を探して数えるのは人の目です。

## 修正前：細い白黒の縞

```html
<section class="hero">
  <div class="hero-card">
    <h1>夏のコレクション</h1>
    <p>リネン、コットン、キャンバス。長く使える素材で。</p>
    <a href="/summer">コレクションを見る</a>
  </div>
</section>
```

```css
.hero {
  display: grid;
  place-items: center;
  min-height: 24rem;
  padding: 4rem 1.5rem;
  background: repeating-linear-gradient(90deg, #111 0 8px, #fff 8px 16px);
}
.hero-card {
  max-width: 28rem;
  padding: 2rem;
  border: 2px solid #111;
  background: #fff;
  text-align: center;
}
```

- 縞の幅は8ピクセルで、16ピクセルごとに繰り返します。幅1,280ピクセルのヒーローには明暗が80組並び、画面が広ければさらに増えます。
- 黒と白は、画面が出せる最も強いコントラストに近い組み合わせです。
- 縞はカードの周りのヒーロー全体を埋め、341 × 256ピクセルの範囲の4分の1をはるかに超えます。
- 何も動かないため、どのチェッカーも報告しません。

## 修正後：太い縞を少しだけ

```html
<section class="hero">
  <div class="hero-card">
    <h1>夏のコレクション</h1>
    <p>リネン、コットン、キャンバス。長く使える素材で。</p>
    <a href="/summer">コレクションを見る</a>
  </div>
</section>
```

```css
.hero {
  display: grid;
  place-items: center;
  min-height: 24rem;
  padding: 4rem 1.5rem;
  background: repeating-linear-gradient(90deg, #111 0 12.5%, #fff 12.5% 25%);
}
.hero-card {
  max-width: 28rem;
  padding: 2rem;
  border: 2px solid #111;
  background: #fff;
  text-align: center;
}
```

1. 縞の幅を、ヒーローに対するパーセントで指定します。それぞれ12.5%にすると、明暗1組がヒーローの幅の4分の1になります。どの画面の幅でも4組で、どちらの基準でも問題になる「5組を超える」縞にはなりません。
2. 黒と白はそのまま残します。幅1,280ピクセルの画面では1組が320ピクセル、腕を伸ばした距離で約7度になり、最も影響の大きい間隔よりはるかに粗くなります。

これで、どの幅でも、どの拡大表示でも修正前の例は直り、白黒の大胆な見た目も残ります。点滅はないため、2.3.1も引き続き満たします。

## 修正後：淡い縞

```html
<section class="hero">
  <div class="hero-card">
    <h1>夏のコレクション</h1>
    <p>リネン、コットン、キャンバス。長く使える素材で。</p>
    <a href="/summer">コレクションを見る</a>
  </div>
</section>
```

```css
.hero {
  display: grid;
  place-items: center;
  min-height: 24rem;
  padding: 4rem 1.5rem;
  background: repeating-linear-gradient(90deg, #ebe5da 0 8px, #f5f1ea 8px 16px);
}
.hero-card {
  max-width: 28rem;
  padding: 2rem;
  border: 2px solid #111;
  background: #fff;
  text-align: center;
}
```

1. 2色を、リネンの近い2つの色合い、`#ebe5da` と `#f5f1ea` に変えます。相対輝度は0.79と0.88で、差は0.095と白の10分の1未満です。縞は縞模様として目立たず、織り目のような質感に見えます。
2. カードはそのままにします。白地に黒の文字と枠のコントラストは変わりません。

細い縞を残したまま、値を2つ変えるだけの方法です。BT.1702が有害な模様とする明るさの差は下回りますが、米国てんかん財団の専門家合意は、はっきり見える縞をコントラストにかかわらず数え、ヒーローにはまだ80組あります。ちらりと目に入る程度の模様ならこれで十分ですが、ページを開いて最初に目に入るヒーローでは、縞も太くしてください。

## 修正後：濃い縞を小さなタイルだけに

```html
<section class="hero">
  <div class="hero-card">
    <span class="hero-mark"></span>
    <h1>夏のコレクション</h1>
    <p>リネン、コットン、キャンバス。長く使える素材で。</p>
    <a href="/summer">コレクションを見る</a>
  </div>
</section>
```

```css
.hero {
  display: grid;
  place-items: center;
  min-height: 24rem;
  padding: 4rem 1.5rem;
  background: #f5f1ea;
}
.hero-card {
  max-width: 28rem;
  padding: 2rem;
  border: 2px solid #111;
  background: #fff;
  text-align: center;
}
.hero-mark {
  display: block;
  width: 6rem;
  height: 6rem;
  margin: 0 auto 1rem;
  background: repeating-linear-gradient(90deg, #111 0 8px, #fff 8px 16px);
}
```

1. ヒーローは模様のないリネンの色 `#f5f1ea` にします。
2. 元の縞を、見出しの上の96ピクセル四方のタイルに描きます。面積は9,216平方ピクセルで、341 × 256の範囲の約11%と、4分の1を大きく下回ります。

オプアート風の見た目をブランドのマークとして残せますが、基準を下回るのはタイルが小さい間だけです。150%の拡大表示では範囲の約24%、200%では42%を占め、4分の1を超えます。また、タイルを直接見る人や、スマートフォンを近づけて見る人には、細く濃い白黒の縞が6組見えたままです。

## どの方法を選ぶか

どの方法も、ノートパソコンの100%表示では基準を下回ります。おすすめは太い縞です。白黒を残したまま、どの幅でも、どの拡大表示でも両方の基準を下回り、気にかけ続けることがありません。ほかの2つは、どちらも単独では十分ではありません。淡い縞は、色を2つ変えるだけで細かな質感を残せますが、ヒーローにははっきり見える縞が数十本残ります。ページを開いて最初に見える部分ではなく、背景として模様を使うときに選びます。小さなタイルは、細く濃い縞をマークとして残せますが、安全なのは小さいままである間だけです。単色の背景や、規則的な模様のない写真なら、測る必要もありません。

## 実装の判断

組の数は、実際に目に入る大きさで数えます。縞の幅をピクセルで指定すると、画面が広いほど縞が増えます。デザインファイルの幅1,280ピクセルでは問題なく見えるヒーローも、幅2,560ピクセルのモニターでは2倍の縞になります。パーセント、または大きさが決まったボックスで `em` を使えば、本数は変わりません。`repeating-radial-gradient` は輪を描くので、中心から外へ数えます。市松模様は、行と列のそれぞれで数えます。BT.1702は同じ要素の列も縞として数えるため、明暗の強い点やアイコンを細かく並べた格子も模様です。

幅1〜2ピクセルの縞は描かないでください。Chromiumでは、ディスプレイの拡大率が125%のとき、または90%の拡大表示で、幅1 CSSピクセルの縞が1デバイスピクセルと2デバイスピクセルの不揃いな並びで描かれます。そのため、デザインにはない帯が模様に現れ、ページをスクロールすると帯の位置が変わります。動かないはずの模様が、スクロールするとちらつくわけです。幅が数ピクセルある縞も丸められますが、幅に対してわずかなため、形は保たれます。

オプアートの画像では模様が画像そのものに描かれているため、CSSでは変えられません。レスポンシブな画像は画面ごとに拡大や切り抜きが変わるので、ページで表示されるそれぞれの大きさで縞を数えます。そのうえで画像を直します。縞が少なくなるように切り抜くか、コントラストを和らげるか、別の画像にします。`patternUnits="userSpaceOnUse"` で描いたSVGの模様は、SVG自身の単位で繰り返します。`viewBox` のないSVGではこの単位がピクセルなので、ピクセルで指定したCSSのグラデーションと同じく、画面が広いほど縞が増えます。`objectBoundingBox` なら、タイルが図形に合わせて拡大縮小します。

直したように見えて、直っていない方法があります。模様を隠すスイッチや警告を付けても、模様を `prefers-reduced-motion: no-preference` の中だけで描いても、スイッチを使っていない人や設定を有効にしていない人の画面には模様が残ります。模様は一目見たときから影響します。カードではなく縞の上に直接置いた文字には、別のコントラストの問題があります：[ブランドカラーや写真の上でコントラストが足りない文字](/ja/learn/text-contrast)。

本当に動く縞は、別の問題です。スクロールしたり回ったりする模様は[一時停止できない、流れる文字、カルーセル、アニメーション](/ja/learn/moving-content)、縞のアニメーションのローディング表示は[止まらずに動き続けるボタンやバッジのアニメーション](/ja/learn/endless-animations)、パララックスは[動きを減らす設定を無視するアニメーション](/ja/learn/reduced-motion)で扱います。点滅したり明暗が反転したりする模様は、2.3.1の対象として[発作を誘発するおそれのある点滅するバナーや動画](/ja/learn/flashing-content)で数えます。

## 修正の確認

1. ページ上の模様をすべて洗い出す。CSSの繰り返しのグラデーションや敷き詰めた背景、ヒーロー画像、イラスト、動画の静止画、点やアイコンを並べた格子が対象です。
2. 広い範囲を覆う模様について、対応する最も広い画面で、最も大きく見えるところの明暗の組を数える。5組以下なら満たします。それより多いものは手順3へ進みます。
3. 最も明るい部分と最も暗い部分の相対輝度を測る。差が0.10未満なら満たします。それ以上のものは手順4へ進みます。
4. 利用者が使う最大の拡大表示で、模様が覆う面積を測る。341 × 256 CSSピクセルの範囲の4分の1未満なら満たします。
5. 200%と90%に拡大表示し、模様のある箇所をそれぞれゆっくりスクロールする。縞が不揃いな帯に崩れたり、ページの動きにつれて這うように見えたりしないことを確認します。

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。デザイン、キャンペーンの画像、模様のライブラリーを変更した際は、再度確認します。

## 制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではなく、医学的な助言でもありません。基準は部屋の向こうから見るテレビのために書かれたもので、WCAG自身の視野10度の見積もりを通してWebページに当てはめるのは、このガイド独自の解釈です。スマートフォンを近づけて見るときや大きなモニターでは、模様が見える範囲に占める割合が変わります。基準を下回れば危険は下がりますが、なくなるわけではありません。Wilkins、Emmett、Hardingが2005年に提案した模様の基準は、影響を受けやすい人の少なくとも3分の2を守ると見積もられていますが、全員ではなく、基準を満たす模様に反応する人もいます。この診断ツールには模様のチェックがないため、どの模様も人の目で確認する必要があります。

---

このガイドをコーディングエージェントで使う: MCP https://easeweb.dev/mcp（設定は https://easeweb.dev/ja/services/developers）