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

カラーコントラストチェッカーについて

このツールは2色のコントラスト比をWCAG 2.xの式どおりに計算し、通常テキスト・大きいテキスト・UIコンポーネントそれぞれのAA/AAA適合を表示します。結果は1:1（同じ色）から21:1（黒と白）までの1つの数値です。

基準に届かない場合は、前景色の色相と彩度を固定したままHSLの明度だけを0〜100で走査し、元の明度から最も動きの小さい合格色を提案します。ブランドカラーを捨てずに「少し暗くする」だけで済むかを先に確かめるための機能です。

コントラスト比の計算手順

各チャンネル（0〜255）を255で割った値cを線形光に戻します。cがしきい値以下ならc/12.92、それより大きければ((c+0.055)/1.055)^2.4です。sRGBのガンマを外して、実際の光の量に近づける段階です。

次に相対輝度 L = 0.2126R + 0.7152G + 0.0722B を求めます。緑の重みが青の約10倍なのは、人の目が緑の波長に最も敏感だからです。最後に（明るい方のL + 0.05）÷（暗い方のL + 0.05）がコントラスト比です。0.05は画面の反射光を見込んだ値で、純粋な黒でも比が無限大にならず最大21で止まります。

WCAGの本文には以前しきい値0.03928と書かれ、2021年にsRGB規格の0.04045へ修正されました。W3Cは判定への実質的な影響はないとしており、このツールのコードは旧値0.03928を使っています。

4.5・3・7という数字の根拠

W3Cの解説書によれば、3:1はISO 9241-3が通常の視力の人に推奨する最低値で、視力20/40（日本式でおよそ0.5）の人はコントラスト感度が約1.5倍落ちるため、3×1.5=4.5がAAの基準になりました。7:1（AAA）は20/80程度のロービジョンを想定しています。

大きいテキストは18ポイント以上、または太字14ポイント以上です。CSSではおよそ24px、太字で18.5pxです。日本語フォントについては「同等の大きさ」とだけ書かれており、画数の多い漢字を含む16pxの太字を大きいテキスト扱いにするのは避けるべきです。

UIコンポーネントの3:1は、WCAG 2.1で追加された達成基準1.4.11（非テキストのコントラスト）です。入力欄の枠線、チェックボックスの輪郭、フォーカス表示、意味のあるアイコンが対象です。無効化されたボタンやロゴ、装飾には要求がありません。

式が実感とずれる場面

WCAG 2の式は色の前後を区別しません。白地にグレーの文字と、同じグレー地に白い文字は同じ値になりますが、ダークモードの明るい文字は読みやすさが違うという指摘が多くあります。また鮮やかなオレンジ地に白文字のように実際には読める組み合わせが不合格になりがちです。

こうした批判から生まれたのがAPCA（Accessible Perceptual Contrast Algorithm）で、文字サイズ・太さ・明暗の向きを考慮します。ただしAPCAはWCAG 3の草案に一時入ったものの2023年7月の草案で外され、現在の草案ではコントラストの算出方法は「未定」です。JIS X 8341-3をはじめ現行の基準はWCAG 2系なので、このツールもWCAG 2の比だけで判定します。

コントラストでは解決しない色覚の多様性

赤緑の色覚特性は北欧系の男性で約8%、女性で約0.5%と報告されており、日本人男性では約4%とされています。コントラスト比は明るさの差しか見ないため、同じくらいの明るさの赤と緑は、背景に対して合格していても互いに区別できないことがあります。エラーを赤だけ、成功を緑だけで示さず、アイコンや文言を添えるのが達成基準1.4.1の求めることです。

例

使い方

1. 文字色と背景色をHEXまたはrgb()で入力するか、ピッカーで選びます。
2. コントラスト比と5つの基準の合否を確認します。
3. 不合格なら提案色や明度範囲バーから、最も近い合格色を選びます。

よくある質問

関連ガイド

• 色のコントラストとアクセシビリティ：WCAGの式の由来と限界、各国の基準