アクセシビリティのために色のコントラストを確認する方法

男性の約12人に1人、女性の約200人に1人が何らかの色覚異常を持っています。さらに何百万人もが低視力、加齢による目、または明るい日光下で画面を見ています。テキストが背景に対して十分なコントラストを持たない場合、これらの人々はそれを読めません。色のコントラストは「あったらいい」ものではなく、コアなアクセシビリティ要件です。ブラウザベースのコントラストチェッカーは、色やデータをサーバーにアップロードせずに、作業全体をローカルで処理します。

WCAGが要求するもの

Web Content Accessibility Guidelines(WCAG)は、テキストと背景の最小コントラスト比を定義します:

「大きなテキスト」は18pxボールド以上または24px通常以上を意味します。コントラスト比は1:1(コントラストなし、白の上の白)から21:1(最大コントラスト、白の上の黒)の範囲です。

コントラストをチェックする手順

1. 色を選択: HEXコード、RGB値、またはカラーピッカーを使って前景(テキスト)と背景の色を入力します。
2. 結果を確認: ツールは即座にコントラスト比と、組み合わせが通常テキストと大きなテキストの両方でWCAG AAとAAAをパスするかを表示します。
3. 必要なら調整: コントラストが失敗する場合、必要なレベルをパスするまでテキストを暗くするか背景を明るくする(または逆)。

色コントラスト標準の簡単な歴史

WCAG以前、Webアクセシビリティはベンダー固有のルールのパッチワークでした。W3Cは1999年にWCAG 1.0を発表し、コントラストガイダンスはありましたが特定の比はありませんでした。WCAG 2.0(2008年)は、Dr. Lillian YetenekianとIBM Research labの色科学に基づき、低視力研究者からの入力を受けて、4.5:1 / 7:1の式を導入しました。式は、20/40視力(軽度の低視力)の人がAA準拠のテキストを読め、20/80視力(重大な低視力)の人がAAA準拠のテキストを読めるように設計されています。

WCAG 2.1(2018年)は、UIコンポーネント(非テキストに3:1)、グラフィカルオブジェクト、フォーカスインジケータのコントラスト要件を追加しました。WCAG 2.2(2023年)はターゲットサイズとフォーカス可視性に関するさらなる要件を追加しました。

現在のWCAG 3.0ワーキングドラフトは、人間の知覚により合った新しいコントラスト式(APCA、Accessible Perceptual Contrast Algorithm)を提案しています。APCAはまだW3C推奨ではありませんが、すでにプレビューとして一部のツールでサポートされています。

WCAGの法的採用は着実です:

• 米国: リハビリ法第508条(連邦)とADA判例法はWCAG 2.0 / 2.1 AAを要求
• EU: Web Accessibility Directive(2016/2102)とEuropean Accessibility Act(2025)はEN 301 549(WCAG 2.1 AA)を要求
• 英国: Public Sector Bodies Accessibility RegulationsはWCAG 2.1 AAを要求
• カナダ: 連邦セクター向けのACA(Accessible Canada Act)、企業向けのAODA(オンタリオ)
• オーストラリア: DDA判例法はWCAG 2.1 AAを標準として扱う
• 日本: JIS X 8341-3:2016(WCAG 2.0に基づく)

ほとんどの公開向けWebサイトにとって、WCAG 2.1 AAが事実上の法的最低基準です。

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

コントラスト比は各色の相対輝度を使って計算されます:

1. 各色をsRGBから線形RGBに変換(ガンマ補正)
2. 相対輝度を計算: L = 0.2126 R + 0.7152 G + 0.0722 B
3. コントラスト = (L_明るい方 + 0.05) / (L_暗い方 + 0.05)

結果は1(コントラストなし)から21(最大コントラスト)の数値です。0.05のオフセットはゼロ除算を防ぎ、知覚コントラストへの周囲光の寄与をわずかにモデル化します。

式は決定論的かつ計算可能になるよう意図的に設計されており、同じ色はつねに同じ比を生成します。次のものは考慮しません:

• 色覚異常: 赤/緑のペアは7:1の比を持つかもしれませんが、赤/緑色覚異常の人には見えません
• ボールドを超えるフォント重量: 超細い、またはヘアラインフォントはより高いコントラストが必要です
• アンチエイリアス不具合: 非常に細いストロークは、色値が示すよりも明るく見えることがあります
• 背景パターン: テキストの後ろのグラデーション、画像、またはノイズは実効コントラストを劣化させます

これがWCAGチェックが必要だが十分ではない理由です。多様なユーザー(色覚異常の人を含む)との視覚レビューが残りをキャッチします。

よくあるコントラストの間違い

白の上の薄いグレーテキスト: #ffffffの上の#999999は2.8:1の比しかありません。これはWCAG AAに失敗します。完璧な視力のデザイナーには「クリーン」に見えるかもしれませんが、多くの人にとっては読めません。

色付き背景の色付きテキスト: 白いテキスト付きの青いボタンはしばしばパスしますが、白いテキスト付きの緑のボタンはパスしないかもしれません。つねにチェックしてください。コントラスト比は目では判断できません。

プレースホルダーテキスト: フォームフィールドのプレースホルダーは悪名高く低コントラストです。WCAGはプレースホルダーがコントラスト比を満たすことを厳密に要求しませんが、ユーザーはまだそれらを読む必要があります。

ダークモード: デザイナーはしばしば「控えめな」見た目のために、暗いグレー背景に中程度のグレーテキストを使います。これはしばしばコントラストチェックに失敗します。

画像の上のテキスト: ヒーロー画像の上に置かれたテキストは、画像が暗いときはしばしばパスし、画像が明るいときは失敗します。画像の上のテキストには暗い/明るいグラデーションオーバーレイまたは固体バックドロップを使ってください。

ブランドカラーシフト: 企業アイデンティティはしばしばプライマリブランドカラーを指示します。その色が本文テキストとして失敗する場合、見出し(大きなテキスト、3:1閾値)に使い、本文にはより暗い色合いを使ってください。

リンクの色: リンクは周囲のテキストと区別可能でなければなりません。WCAGはリンクと本文テキスト間の3:1比、加えて別の視覚的合図(下線、ボールド、またはアイコン)を要求します。

フォーカスインジケータ: フォーカスされたボタンやリンクの周りのアウトラインは、背景に対して3:1のコントラストを満たす必要があります。ブラウザのデフォルトフォーカスリングは通常安全です。カスタムフォーカススタイルはしばしば失敗します。

よくある落とし穴

• 見出しのみをテスト: コントラストはページのすべてのテキストサイズと重量の組み合わせをチェックする必要があります。本文、キャプション、ラベル、ボタン、アイコン、フォームフィールドすべてがチェックが必要です。
• ホバーとアクティブ状態を忘れる: デフォルトでコントラストをパスするリンクは、ホバー(より明るい色)またはアクティブ(異なる背景)時に失敗するかもしれません。すべての状態をチェックしてください。
• 無効状態が無視される: WCAGは無効状態を明示的にコントラスト要件から除外しますが、アクセシブルなデザインは依然として何らかの可視区別を目指します。
• 半透明のオーバーレイ: 50%透明の暗いオーバーレイ上のテキストは、入力色ではなく実効色のように振る舞います。チェック前に実効色を構成してください。
• アンチエイリアスされた細いテキスト: 8.5:1比の12px Inter Thinはまだ読みにくいです。色値だけでなく、実際にレンダリングされたフォントでチェックしてください。
• HSL変換のドリフト: HSL空間で色を微調整すると、似ているように見えるがコントラストに失敗する値を生成します。色調整後につねに再チェックしてください。
• ステークホルダーによってロックされたブランドカラー: ブランドカラーが変更できない場合、戦略的に使い(大きなテキストのみ)、本文には異なる色を選んでください。理由をステークホルダーに文書化してください。
• 印刷コントラストを忘れる: Webサイトは画面でコントラストをパスするかもしれませんが、グレースケールで印刷すると失敗するかもしれません。印刷向け文書には印刷出力をテストしてください。
• 動画上のテキスト: 動画背景は絶えずシフトします。静的フレームを固定するか、グラデーションオーバーレイを追加するか、固体バックドロップを使ってください。
• 国際化が文字密度を変える: 中国語、日本語、韓国語の文字はラテン文字より密です。英語で問題なく読める4.5:1比は、同じサイズでCJK言語の読者を緊張させるかもしれません。国際テキストには7:1まで上げてください。

WCAGを超えて: APCAとモダンな知覚コントラスト

Accessible Perceptual Contrast Algorithm(APCA)は、WCAG 3.0のためにAndrew Somersが提案した新しい式です。WCAG 2式と異なり、APCAは:

• コントラストスコアにフォント重量とサイズを考慮する: より細いまたは小さなフォントはより多くのコントラストが必要
• 非線形の知覚スケーリングを使う: 人間の視覚が実際に輝度にどう応答するかと一致
• 暗い背景をより良く扱う: WCAG 2は暗い背景のコントラストを過大評価します。APCAはこれを修正
• 極性を意識したスコアを生成: 明るい背景の上の暗いテキストにポジティブ、逆にネガティブ

APCAスコアはおおよそ-108から+108の範囲です。スコア60(ポジティブまたはネガティブ)はおおよそWCAG 2の4.5:1と同等です。APCAはまだどこでも法的に必要とされていませんが、Material DesignやIBM Carbonなどのデザインシステムに先見の標準として採用されつつあります。

今日のほとんどの実用目的では、WCAG 2.1 AA(4.5:1 / 3:1)が法的および業界標準のままです。一部のチームは品質チェックとして並行してAPCAを使います。

ツールと統合

コントラスト失敗が検出されずに出荷できないように、CIに少なくとも1つの自動ツールを統合してください。

使いこなしのヒント

• すべてのテキスト / 背景の組み合わせをチェック: 仮定しないでください。経験豊富なデザイナーでさえ、どの組み合わせが失敗するかに驚きます。
• 両方のテーマをテスト: サイトに明るいモードと暗いモードがある場合、両方でコントラストをチェックしてください。白で動作する色は、暗いグレーで失敗するかもしれません。
• ブランドカラーを賢く使う: ブランド青がテキスト色として失敗する場合、大きなテキスト閾値(3:1)が適用されるより大きな要素(ボタン、ヘッダー)に使い、本文テキストにはより暗い色合いを使ってください。
• 色だけに依存しない: 十分なコントラストに加えて、色だけで情報を伝えないでください。誰もがコンテンツを理解できるように、色と並んでアイコン、テキストラベル、またはパターンを使ってください。
• シミュレータでテスト: 色覚異常シミュレータは、第一色覚異常、第二色覚異常、または第三色覚異常のユーザーにデザインがどう見えるかを示します。一般的なペア(赤 / 緑)はしばしば失敗します。
• 日光でテスト: 明るい日に電話を外に持ち出してください。WCAGをかろうじてパスするテキストは、直射日光下で読めなくなる可能性があります。AAAコントラスト(7:1)は屋外可視性の実用的最低基準です。
• アクセシブルなカラーパレットを保存: すべてのテキスト色がすべての背景色に対してパスするパレットを構築します。前もって制約、後でコントラストの驚きなし。
• ステークホルダーを教育: 低コントラストのブランドカラーを要求するステークホルダーは、低視力シミュレータを通してデザインを見せられるとしばしば考えを変えます。

プライバシーとデザインデータ

色コントラストチェッカーは完全にブラウザ内で動作します。入力した色と値、計算、コントラスト結果はすべてデバイス上に留まります。サーバーへのアップロード、ロギング、第三者との共有は一切ありません。

これは個々の色(秘密ではない)よりも、フルブランドパレット、内部製品モックアップカラー、未リリースの製品UI仕様を貼り付けるかもしれないバッチチェックやデザインシステム作業に重要です。クラウドのコントラストツールはリクエストログにすべての貼り付けを記録し、しばしば「サービス改善」のために保持し、未リリースのブランドカラーやUIデザインを漏らす可能性があります。ブラウザベースのチェッカーは露出ゼロで、色はマシンを離れません。

ブラウザベースのコントラストチェックは、ページを一度読み込めばオフラインでも動作するため、飛行機の中、インターネットアクセスのないセキュアな環境、またはデザインデータを第三者サービスと共有できない、またはすべきでない場所でのデザインレビューに役立ちます。