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

カラーコントラストは、アクセシブルなWebデザインの最も基本的な要素のひとつです。テキストと背景のコントラストが不十分な場合、ロービジョンの方、色覚異常のある方、その他の視覚障害を持つ方が内容を読み取ることが困難になります。視覚的な障害がないユーザーであっても、明るい太陽光の下や低品質なディスプレイ上では高コントラストのデザインから恩恵を受けます。こうした理由から、Webコンテンツアクセシビリティガイドライン（WCAG）は、すべてのインターフェースデザイナーや開発者が理解すべき精密な数値基準を定義しています。

このツールは、2つのHEXカラーコード間のWCAG 2.1コントラスト比を計算し、通常テキストと大きなテキストそれぞれについてAAおよびAAAの適合レベルに合格しているかどうかを表示します。色を選択するとすぐに結果が更新されるため、ページを離れることなくすばやく反復作業が行えます。

カラーコントラスト比とは

コントラスト比は、知覚される輝度（明るさ）の観点から2色がどれだけ異なるかを数値で表したものです。1:1（同一色、コントラストなし）から21:1（純黒と純白、最大コントラスト）の範囲があります。WCAG 2.1が定める計算式では、各色の相対輝度—その色が放つように見える光の量—を算出し、両方の値に0.05を加えたうえで明るい方を暗い方で割ります。

相対輝度は、一般的な「明度」や「輝度」とは異なります。人間の目が赤や青よりも緑の光に対してはるかに敏感であることを反映した、赤・緑・青の各チャンネルを知覚的に重み付けした値です。線形化ステップ（sRGB値を2.4乗する処理）は、ほとんどのデジタルディスプレイに適用されているガンマ補正を考慮したものです。

WCAG 2.1 適合レベルの解説

WCAG 2.1は3つの適合レベルを定義しています：レベルA（最低限の要件）、レベルAA（多くの組織や法的枠組みが目標とする標準）、レベルAAA（最高水準）。カラーコントラストについては、通常テキスト（一般的に18ptまたは14ptボールド未満）と大きなテキスト（18pt以上、または14ptボールド以上）を区別しています。

レベルAAは、通常テキストに4.5:1以上、大きなテキストに3:1以上のコントラスト比を要求します。これらの閾値は、おおよそ20/80視力に相当する中程度の視覚障害を持つ方が、コントラスト強調の支援技術なしでテキストを読めることを示す研究に基づいて設定されています。

レベルAAAは、通常テキストに7:1以上、大きなテキストに4.5:1以上を要求します。これらのより厳しい閾値は、より重度の視覚障害を持つユーザーのためのものであり、すべてのユーザーの可読性を向上させます。WCAGはすべてのコンテンツにAAAを一律に要求しているわけではなく、装飾的な画像、ロゴタイプ、無効なUIコンポーネント内のテキストは明示的に適用除外とされています。

大きなテキストの閾値が低い理由

大きなテキストのコントラスト要件が緩和されているのは、文字の物理的な大きさがコントラストの低さを補うためです。大きな字体は線が太く、輝度差が小さくても背景から区別しやすくなっています。人間の視覚系はより大きな形状をより低いコントラストで識別できるため、少なくとも18ポイント（96dpiで24CSSピクセル）または14ポイントボールドのテキストに対しては、適切に閾値が緩和されています。

実用的には、大きな見出し、ヒーローテキスト、装飾的なディスプレイコピーには、本文テキストでは不合格となるような柔らかい色の組み合わせを使用できることがあります。ただし、可能な限りすべてのテキストサイズで高コントラストを維持することが一般的に推奨されています。

コントラストテストにおけるよくある落とし穴

よくある間違いのひとつは、UIエレメントの特定の状態のみをテストすることです。たとえば、ボタンはデフォルト状態では十分なコントラストがあっても、ホバー時やフォーカス時、あるいはダークモードへの切り替え時に不合格になることがあります。包括的なアクセシビリティテストでは、デフォルト、ホバー、フォーカス、アクティブ、無効、エラーというすべての視覚的な状態でコントラストを確認する必要があります。

プレースホルダーテキスト、アイコンのみのボタン、フォーム入力内のテキストを見落とすことも多い落とし穴です。プレースホルダーテキストは、入力済みのコンテンツと視覚的に区別するために、しばしば透明度を下げるか明るい色で表示されます。この表現が最低コントラスト閾値を下回る原因になることがあります。

グラデーション背景は特に難しい問題を提起します。テキストがグラデーションの上にある場合、コントラストはテキスト領域全体で変化します。そのような場合は、グラデーションの色を平均するのではなく、テキストの背後にある最も明るい部分—最悪のケースの点—をテストする必要があります。

アクセシブルな配色の選び方

ブランドカラーからスタートしてアクセシブルな組み合わせを見つけることは一般的なワークフローです。ブランドが#3B82F6のような中程度の彩度の青を使用している場合、純白（#FFFFFF）との比率は約3.9:1となり、大きなテキストのAAには合格しますが、通常テキストのAAには合格しません。すべてのテキストでAAに合格するには、青を#1D4ED8のような暗い色に調整すると、白に対して7.3:1の比率を達成し、通常テキストのAAAも満足できます。

多くのデザイナーは体系的なアプローチをとります：ベースパレットを定義し、実際のインターフェースに表示されるすべての色の組み合わせをテストするのです。デザイントークンとCSSカスタムプロパティを使えば、一箇所で更新できるアクセシブルなパレットを維持することができます。

ダークモードでは別途コントラストテストが必要です。白い背景で機能する同じテキストカラーが、暗い背景では不合格になることがあり、その逆もあります。色を自動的に反転させるのではなく、両方のモードで前景と背景のペアを明示的に定義するデザインシステムを構築することで、テーマ間で一貫したアクセシビリティを確保できます。

色以外のアクセシビリティ要素

カラーコントラストは非常に重要ですが、視覚的アクセシビリティの一部に過ぎません。WCAGはフォーカスインジケーター（WCAG 2.2の達成基準2.4.11）、UIコンポーネントの非テストコントラスト（達成基準1.4.11）、そして情報を伝える唯一の手段として色を使用すること（達成基準1.4.1）についても規定しています。カラーペアに対してすべてのWCAGコントラスト基準を合格することは強固な基盤となりますが、真にアクセシブルなインターフェースは、インタラクティブ要素がキーボードで操作可能であること、エラー状態が色だけでなくテキストで意味を伝えることなども保証します。

アクセシビリティは一度きりのチェックリストではなく、継続的な実践です。支援技術を使用するユーザーによるテストは、自動ツールでは捉えられない洞察を提供します。自動コントラストチェックと手動レビューおよび実ユーザーテストを組み合わせることが、最も堅牢な結果をもたらします。