WCAG カラーコントラストチェッカー

WCAG のコントラスト要件

Web Content Accessibility Guidelines（WCAG）は、ロービジョンや色覚特性のある人、明るい日差しの下でスマートフォンを見ている人でも文字が読めるよう、最低限のコントラスト比を定めています。比率は 1:1（同じ色）から 21:1（白地に黒）までです。

AA、通常の文字

4.5:1 以上（達成基準 1.4.3）。欧州アクセシビリティ法や米国の ADA ガイダンスを含め、ほとんどの法律やアクセシビリティ方針が求めるレベルです。

AA、大きな文字

3:1 以上。大きな文字とは 24 px（18 pt）以上、太字なら 18.66 px（14 pt）以上を指します。

AAA、通常の文字

7:1 以上（達成基準 1.4.6）。より高いレベルで、長文を読ませるページでは目指す価値があります。

AAA、大きな文字

4.5:1 以上。

非テキストのコントラスト

3:1 以上（達成基準 1.4.11）。アイコン、入力欄の枠線、フォーカスリング、グラフの線、操作するために見える必要のあるコントロールの部分が対象です。

コントラスト比の計算方法

各色を相対輝度に変換します。sRGB の各チャンネルを線形化（ガンマ曲線を元に戻す処理）し、目が緑にはるかに敏感なことから、赤 0.2126、緑 0.7152、青 0.0722 の重みを掛けます。比率は (L1 + 0.05) / (L2 + 0.05) で、L1 は明るい方の色です。たとえば白地に #777777 は 4.48:1 で AA にわずかに届かず、#767676 は 4.54:1 で合格します。

比率が基準値に切り上げられることはありません。WCAG は 4.49:1 では 4.5:1 を満たさないと明記しています。半透明の色は、まずブラウザが描画するのと同じように合成されます。前景は背景の上に、半透明の背景は白の上に重ねられます。

不合格の色を直す

提案では、文字色の色相と彩度を保ったまま、CSS でも使える知覚的な色空間である OKLCH で明度だけを変えます。暗い方向と明るい方向に少しずつ変え、比率が合格したら元の色に近い方を選びます。結果は、黒に飛ぶのではなく、たいてい同じブランドカラーを少し濃くしたり明るくしたりした色になります。その背景上でどの濃さにしても目標に届かない場合はそう表示されるので、背景の方を変える必要があります。

他のバリエーションを自分で探すなら、カラーコード変換で色を開いてティントやシェードを順に試すか、カラーパレットジェネレーターで写真から候補の色を取り出してください。

よくあるコントラストの失敗

• プレースホルダーや無効風の文字。薄い灰色のプレースホルダーも文字であり、ユーザーが読む必要があるなら 4.5:1 を満たさなければなりません。本当に無効化されたコントロールは対象外ですが、無効に見えるだけのものは対象です。
• 画像やグラデーションの上の文字。平均ではなく、文字の背後にある画像の最も明るい部分で確認してください。暗いオーバーレイや、文字の背後に単色のパネルを置くのが確実な対策です。
• ブランドカラーを文字に使う。鮮やかなオレンジやターコイズは力強く見えても、白地では不合格になることがあります。提案機能で同じ色相のより濃いバリエーションを文字用に見つけ、明るい色は大きな見出しや装飾に使いましょう。
• フォーカスリングと入力欄の枠線。テキスト欄の周りの 1 px の薄い灰色の枠線は、非テキストの 3:1 基準を満たさないことが多く、ロービジョンの人には入力欄が見つけにくくなります。
• ダークモード。ライトテーマで合格した組み合わせが、ダークテーマでも合格するとは限りません。両方のテーマを確認し、入れ替えボタンで反転した組み合わせをすばやく確かめてください。

APCA と WCAG 3

WCAG 2 の結果の下には、Lc と表記される APCA の明度コントラスト値も表示されます。APCA は将来の WCAG 3 で提案されているコントラストの算出方法です。フォントの太さや、暗い背景上の明るい文字と明るい背景上の暗い文字では必要なコントラストが異なることを考慮しており、これは WCAG 2 の数式が無視している点です。色を入れ替えると符号が変わるのもそのためです。おおよその目安は、本文で Lc 75、その他の読ませる文字で Lc 60、大きな見出しで Lc 45 です。WCAG 3 はまだ草案なので、APCA は参考情報として扱ってください。監査や法律が参照する基準は引き続き WCAG 2.x です。