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

このツールでできること

カラーコントラストチェッカーは、Web コンテンツ・アクセシビリティ・ガイドライン（WCAG 2.x）に基づいて、文字色が背景色の上で読みやすいかを判定します。文字と背景には HEX、rgb()、hsl()、色名、半透明色など任意の CSS カラーを入力でき、コントラスト比、AA と AAA の各基準の合否、ライブプレビューが表示されます。不合格の場合は、色相を保ったまま最も近い合格の文字色と背景色を提案します。計算はすべてブラウザ内で行われます。

使い方

1. 文字色 と 背景色 を入力または選択します。入れ替え で 2 色を交換できます。
2. コントラスト比 と、通常テキスト・大きなテキスト・UI コンポーネントの合否一覧を確認します。
3. 不合格のレベルがあれば 最も近い合格色 を見ます。各提案には新しい色、その比率、コピーボタンがあり、適用 で反映できます。
4. APCA をオンにすると、WCAG 3 草案の明度コントラスト（Lc）も表示されます。

半透明の色はチェック前に合成されます。文字は背景の上に、背景は白の上に重ねます。

例

#767676 on #ffffff  →  4.54:1  passes AA normal text
#777777 on #ffffff  →  4.47:1  fails AA normal text, passes AA large text
#000000 on #ffffff  →  21:1    the maximum

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

各色の相対輝度は sRGB の各チャンネルから計算します（線形化したうえで、赤 21%、緑 72%、青 7% で重み付け）。比率は（明るい方 + 0.05）/（暗い方 + 0.05）で、同じ色の 1:1 から白地に黒の 21:1 までの範囲になります。関係するのは明るさだけで色相は関係ありません。純粋な赤と緑は鮮やかに見えても約 1.3:1 しかありません。

提案は色の明度（HSL の L）だけを変え、暗くするか明るくするかのうち変化が小さい方を選びます。どの濃さでも届かないこともあり、中間のグレーの背景ではどんな文字色でも 7:1 に届きません。