この記事でわかること

  • 光の点滅について定めた、WCAGの達成基準2.3.1の内容
  • 「点滅」と数える明るさの変化と、しきい値・面積の考え方
  • お知らせの印を、1秒に1回だけ切り替えて3回で止める書き方
  • 3通りの点滅を、ブラウザで1秒ごとに数えた結果

「本日まで」の印をCSSのアニメーションで目立たせようとして、白と黒の入れかえを0.2秒で1回りさせると、印は1秒に5回ほど点滅します。速い点滅は、光に敏感な人の発作を引き起こすおそれがあり、止めるボタンを付けても防げません。この記事では、ページの中の点滅を1秒に3回までに抑える方法を、WCAG 2.2の達成基準2.3.1を軸に整理します。

読み比べたのは、W3Cの達成基準2.3.1の解説(Understanding)と、技法G19・G176の原文で、2026年11月4日に確かめました。お知らせの印と色はこの記事のための作り物です。特定の道具や講座を推す目的はありません。

先に結論: 点滅は1秒に3回までにし、短い時間で止める

光が点滅する部分は、どの1秒の間にも3回を超えないようにします。 目立たせたいだけなら、切り替えを1秒に1回にして、数回で止めるのが確実です。試した3通りの作りは、次のように数えられました。

点滅の作り 1秒の閃光 基準
1秒で1回り・3回で止める 1回 満たす
0.2秒で1回り・止めない 5.5回 超える
赤と白を0.25秒で1回り 4回 超える

光の点滅を制限する基準(2.3.1)

WCAG 2.2の達成基準2.3.1(レベルA)は、Webページに、どの1秒の間にも3回を超えて閃光を放つものを置かないこと、または閃光が一般の閃光と赤の閃光のしきい値を下回ることを求めています。

解説では、ねらいを、光に敏感な人が発作を起こさずにサイトのすべての内容を使えるようにすることとしています。人は、ほかの色より赤の点滅にいっそう敏感なため、彩度の高い赤の点滅には別の確かめ方が用意されています。

達成基準の注記では、この基準を満たさない内容は、ページ全体の利用を妨げるおそれがあるため、ページのすべての内容がこの基準を満たす必要があるとしています。

「点滅」と数える明るさの変化としきい値

用語の定義では、閃光(フラッシュ)を、明るさが一度上がって下がる、または下がって上がる、ひと組の変化としています。一般の閃光は、相対輝度が最大の10%以上変わり、暗いほうの相対輝度が0.80より低いものです。赤の閃光は、彩度の高い赤を含むひと組の変化です。

しきい値を下回るのは、どの1秒の間にも一般の閃光と赤の閃光がそれぞれ3回以下のとき、または同時に点滅する部分の合計の面積が、画面上の視野10度の範囲の25%以下のときです。注記では、1024×768の画面で341×256ピクセルの範囲を、視野10度の目安にできるとしています。

解説の注記では、気を散らす「点滅(ブリンク)」と、発作を引き起こしうる「閃光(フラッシュ)」を分けています。フラッシュは1秒でも許されず、止める操作も、多くの人が止めるより早く発作が起きることがあるため、解決にはなりません。

安全に作る方法(技法G19・G176)

技法G19は、どの部分も1秒の間に3回を超えて点滅させない方法です。注記では、レベルAの基準より厳しいものの、確かめやすく、レベルAの基準を満たすのに使えるとしています。明暗の切り替わりが7回あると3.5回の閃光になり、許される3回(切り替わり6回)を超えます。

技法G176は、点滅する面積を十分に小さく保つ方法です。1024×768の画面では、ほかに点滅がない1か所の点滅が21,824平方ピクセルより小さければ、一般の閃光と赤の閃光のしきい値を下回るとしています。ただし、画面を拡大したり近づいて見たりする人には危険が増すため、その場合は画面の解像度や距離に左右されないG19を使うとしています。

書き方の例: お知らせの印を1秒に1回だけ切り替え、3回で止める

次のHTMLは、「本日まで」の印の白と黒を、1秒に1回だけ入れかえ、3回くり返したら止める例です。切り替えは1秒に2回(明るくなる・暗くなる)なので、閃光は1秒に1回です。

<p class="sale-note"><span class="sale-badge">本日まで</span>秋のセールを開いています</p>

<style>
  .sale-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid #1a1a1a;
    animation: badge-swap 1s steps(1, end) 3;   /* 1秒に1回だけ入れかえ、3回で止める */
  }
  @keyframes badge-swap {
    50% { background: #1a1a1a; color: #ffffff; }
  }
</style>

animationの1sを短くすると、そのぶん点滅が速くなります。最後の3は、くり返す回数です。infiniteにすると止まらなくなるので、数で指定します。

手順: 自分のページの点滅を確かめる

  1. 点滅する所を探す: CSSのアニメーション、GIFの画像、動画の中で、明るさや色が切り替わる所を探します
  2. 1秒の切り替えを数える: アニメーションの長さと切り替えの数から、1秒に何回明暗が入れかわるかを数えます
  3. 明るさの差を見る: 切り替わる2つの色の明るさの差が大きいか、赤が強いかを見ます
  4. 遅くするか止める: 1秒に3回を超えるなら、切り替えを遅くするか、くり返す回数を減らします
  5. 動画は大きな表示で見る: 全画面でも流せる動画は全画面で、くり返すGIFはくり返した状態で確かめます

試した結果

上のHTMLと、同じ印を2通りの別の作り方で書いた版を用意しました。白と黒の入れかえを0.2秒で1回りさせて止めない版と、赤と白の入れかえを0.25秒で1回りさせて止めない版です。3つのページを作業用のPCの中だけで配り、画面なしで動かしたChrome(画面の大きさは1024×768)に読み込ませました。アニメーションの時刻を10ミリ秒ずつ進めて印の背景の色を読み取り、明暗の切り替わりを数えました。

  • 上のHTMLは、明暗の切り替わりが0.5秒ごとに6回で、どの1秒をとっても切り替わりは2回まで(閃光は1回)でした。3秒で止まり、印は白に戻りました。明るさの差は0.99で、一般の閃光に当たる大きさでした
  • 0.2秒で1回りする版は、止まらずに切り替わり続け、どの1秒をとっても最大で11回の切り替わり(閃光5.5回)を数えました
  • 赤と白の版は、どの1秒をとっても最大で8回の切り替わり(閃光4回)で、赤の割合の高い色との入れかえでした
  • 印の大きさは、1024×768の画面で82×30ピクセル(2,460平方ピクセル)で、技法G176の21,824平方ピクセルより小さいものでした

ブラウザは作業用のMacのChrome 156を、画面を出さない形で使いました。数えたのはブラウザが描く色の切り替わりで、発作の危険を調べる専用の道具では試していません。

自分で直すか、相談するかの判断

目安は、「その点滅を、自分のCSSや素材で書きかえられるか」です。自分で書いたアニメーションなら、長さとくり返す回数を変えれば直せます。

ほかの人が作ったGIFや動画、広告の枠の中の点滅は、自分では直せないことがあります。その場合は、点滅の少ない素材に差しかえるか、提供元や制作を任せた人に相談します。光や動きの扱いを基準に沿って見分ける力を付けたい場合は、Webデザインの講座で、自分のページを講師に見てもらうのも1つの方法です。

つまずきやすいところ

まとめ

  • 速い点滅は、光に敏感な人の発作を引き起こすおそれがあり、止めるボタンでは防げません
  • 光が点滅する部分は、どの1秒の間にも3回を超えないようにします
  • 赤の点滅と、拡大して見る人の見え方に気をつけます
  • アニメーションの長さとくり返す回数を数で指定し、短い時間で止めます