カラーコントラストチェッカーの背景
コントラスト不足は、ウェブで最もよく見られるアクセシビリティの問題の一つです。そのルールは魔法の数字のように見えますが、どれにも理由があり、年齢とともに目の感度が下がることや、画面が光を出す仕組みに基づいています。
4.5 と 7 の由来
WCAG 2.0 は 2008 年 12 月に W3C 勧告になりました。作成者は ISO 9241-3 規格にある最低 3:1 を出発点とし、80 歳前後でよく見られる視力 20/40 程度の人のコントラスト感度の低下を補うために値を引き上げました。こうしてレベル AA の 4.5:1 が生まれました。レベル AAA の 7:1 は、視力 20/80 程度に対して同じ補正をしたものです。
相対輝度
この式はまず sRGB の各チャンネルを線形の光に戻し、赤、緑、青に 0.2126、0.7152、0.0722 の重みを掛けます。これはテレビ規格 ITU-R BT.709 と同じ重みで、目が緑に最も敏感だからです。コントラスト比は、明るい方の輝度に 0.05 を足したものを、暗い方の輝度に 0.05 を足したもので割った値です。0.05 は画面が反射する光を表し、範囲を 1:1 から白地に黒の 21:1 までに収めます。
テキスト以外も
大きなテキスト、つまり 24 px 以上か太字で 18.66 px 以上の文字は、低めのコントラストでも読めるため、AA では 3:1 で足ります。2018 年 6 月に公開された WCAG 2.1 では、達成基準 1.4.11 非テキストのコントラストが加わりました。入力欄の枠、フォーカスリング、アイコン、グラフを理解するのに必要な部分は、隣り合う色に対して 3:1 が必要です。
色覚特性とこれから
男性の約 12 人に 1 人、女性の約 200 人に 1 人が色覚特性を持ち、多くは赤と緑に関するものです。コントラストは輝度で測るので、基準を満たす組み合わせは読みやすいままですが、色相だけが違う色は同じように見えることがあります。ここでのシミュレーションは、Machado、Oliveira、Fernandes による 2009 年のモデルを使っています。WCAG 3 の草案では、文字の大きさや、明るい背景に暗い文字か暗い背景に明るい文字かも考慮する新しい手法 APCA が検討されています。
よくある質問
十分なコントラストがあればアクセシブルですか？
いいえ。多くの要件の一つにすぎません。WCAG は、色だけで意味を伝えないことも求めています。たとえばリンクやエラーにアイコンや下線を加えます。
シミュレーションはその人の見え方を正確に再現しますか？
完全な二色覚をよく近似したものです。より軽い型の人も多く、見え方は一人ひとり少しずつ違うので、目安として使ってください。
WCAG 2 の比率ではなく APCA を使うべきですか？
現時点での適合には WCAG 2 の比率を使ってください。2023 年 10 月に公開された WCAG 2.2 も同じ式を使い、EN 301 549 などの法律や規格もそれを参照しています。APCA はまだ開発中です。
関連ツール
カラーコントラストチェッカー
無料の WCAG カラーコントラストチェッカー。文字色と背景色を HEX、RGB、HSL で入力し、AA と AAA の結果付きでコントラスト比を確認、基準を満たす最も近い色を取得し、色覚特性をシミュレーションできます。
カラーパレットジェネレーター
ブラウザでカラーパレットを構築、ロック、シャッフル。HEX、CSS変数、JSON をコピー、PNG または SVG を書き出し、写真から色を抽出。
カラーホイール
インタラクティブなホイールで色を選び、補色、類似色、トライアドなどのパレットを生成し、HEX、RGB、HSL、HSV、CMYK をコピー。
グラデーションエディター
ブラウザで線形・放射状の CSS グラデーションを構築。カラーストップをドラッグし、角度を設定し、CSS、HEX、RGB、HSL、HSV、CMYK をコピー。
色についてもっと見る
画面と印刷で色がどう働くか。RGB、CMYK、HSL、16進、カラーホイール、グラデーション、コントラスト、そして PictorX のツール。
試してみますか？
ブラウザで PictorX を開きます。インストール不要、始めるのにクレジットカードも不要です。
カラーコントラストチェッカーを開く