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

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

カラーコントラストとは 2 つの色の間の輝度差であり、最も一般的にはテキスト（前景色）とその背後の表面（背景色）の間の差を指します。コントラストが高いほど、テキストは読みやすくなります。特にロービジョンや色覚異常のユーザー、強い日光の下で画面を見る場合に重要です。W3C が公開する Web コンテンツアクセシビリティガイドライン（WCAG）は、色のペアがアクセシブルと見なされるために満たす必要がある正確な数値しきい値を定義しています。これらのしきい値はコントラスト比として表現され、1:1（コントラストなし、同一色）から 21:1（最大コントラスト、白地に黒）の範囲です。

この概念は 2008 年に WCAG 2.0 で正式化され、WCAG 2.1 および 2.2 に引き継がれています。米国の障害を持つアメリカ人法（ADA）や欧州アクセシビリティ法など、世界中のアクセシビリティ法で引用されています。デザイナーや開発者は、ブランドパレットの選定から最終コンポーネントの QA まで、プロジェクトのあらゆる段階でコントラストを検証することが求められます。

カラーコントラストを確認する場面

前景色が背景の上に配置されるたびに、コントラストの確認を行うべきです。一般的なシナリオは以下の通りです：

• 本文テキスト。 段落、リスト項目、フォームラベルは AA 通常テキストの 4.5:1 しきい値を満たす必要があります。
• 見出しと大きなテキスト。 18pt（24px）または 14pt 太字（18.66px）のテキストは、AA 大きなテキストルールの下で 3:1 のみ必要です。
• ボタンとリンク。 インタラクティブ要素は周囲のコンテンツと区別できる必要があり、AA 大きなテキストの 3:1 がベースラインです。
• アイコンと UI グラフィック。 意味を持つアイコン、チャート、フォーカスインジケータは隣接色に対して 3:1 のコントラストが必要です。
• ブランドパレットの監査。 すべてのブランドカラーのペアを検証し、安全で再利用可能なトークンセットを構築します。
• ダークモード。 反転テーマはしばしばコントラスト不合格となります。白背景向けに調整された色は暗い背景上で異なる挙動を示すためです。

早い段階でコントラストを確認することで、コストのかかる再設計を防ぎ、デジタル製品が可能な限り幅広いユーザーに利用できることを保証します。

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

WCAG コントラスト比は各色の相対輝度から導出されます。まず、各 RGB チャンネル（0〜255）を線形値に変換します。0.03928 以下の値は 12.92 で割り、より大きい値は ((c + 0.055) / 1.055) ^ 2.4 で変換します。次に相対輝度 L は 0.2126 * R + 0.7152 * G + 0.0722 * B となります。ここで R、G、B は線形化されたチャンネル値で、重みは人間の目の各色に対する感度を反映しています。最後に比は (L1 + 0.05) / (L2 + 0.05) で、L1 は 2 つの輝度のうち明るい方、L2 は暗い方です。

0.05 のオフセットは画面から反射する環境光を考慮したものです。この式は 1（同一色）から 21（白地に黒）の範囲の値を生成します。本ツールは JavaScript によりブラウザ内で全計算を実行するため、色データがデバイスから外に出ることはありません。

WCAG AA と AAA のしきい値

下表は本ツールがチェックする 4 つのコントラストしきい値をまとめたものです。

レベル	テキストサイズ	必要な比
AA	通常（< 18pt）	≥ 4.5:1
AA	大きい（≥ 18pt または 14pt 太字）	≥ 3:1
AAA	通常（< 18pt）	≥ 7:1
AAA	大きい（≥ 18pt または 14pt 太字）	≥ 4.5:1

AA はほとんどの管轄区での法的ベースラインです。AAA は読みやすさが重要なコンテンツ（長文記事、医療情報、行政サービスなど）向けのより厳しい目標です。大きなテキストは低いコントラストでも読みやすいままなので、基準が低く設定されています。

カラーコントラストの確認方法

本ツールでコントラストを確認するのは 1 秒かからず、すべてブラウザ内で完結します。アップロード、サインアップ、インストールは不要です。以下の手順で行います：

1. 前景色を設定。 前景色ピッカーを使用するか、隣接フィールドに HEX コードを入力します——これがテキスト色を表します。
2. 背景色を設定。 背景色ピッカーまたは HEX フィールドを使用して、テキストの背後の表面を定義します。
3. 比を読む。 コントラスト比がリアルタイムで更新され、各 WCAG しきい値の合格/不合格バッジも表示されます。
4. ペアをプレビュー。 サンプルテキストボックスで組み合わせの実際の見え方を確認し、可読性を一目で判断できます。
5. 必要に応じてコピー。「コントラスト比をコピー」をクリックして数値比をクリップボードにコピーし、レポートやチケットに使用します。

すべてのステップは JavaScript によりブラウザ内でローカルに実行されるため、色の選択がサーバーにアップロードされることはありません。これによりコントラスト確認は完全にプライベートかつ即時に行われます。