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

一般的なWebサイトやサービスではAA基準（通常テキスト4.5:1以上、大きいテキスト3:1以上）が事実上の標準とされ、行政・公共系のガイドライン（総務省「みんなの公共サイト運用ガイドライン」など）でもAA準拠が推奨されています。AAAは最も厳しい基準で、辞書・医療・法務・教育コンテンツなど可読性が極めて重要な用途で目標とされます。まずはAA合格を目標に、可能ならAAAを狙う運用が現実的です。

WCAG 2.1では「18ポイント（約24px）以上」または「14ポイント（約18.66px）以上かつ太字（bold以上）」を「大きいテキスト（large-scale text）」と定義します。これに該当する文字は、通常テキストよりゆるい3:1（AA）/ 4.5:1（AAA）の基準で評価されます。見出しやキャッチコピーなどフォントサイズが大きい部分は、この基準で判定してください。

WCAG 2.1のSC 1.4.11「非テキストのコントラスト」では、ボタンの輪郭・フォーム入力欄の枠線・アイコン・グラフ・チャートなど、意味を伝える非テキスト要素についても隣接色との比率を3:1以上にすることが求められます。本ツールでも、テキスト判定とは別に「UI/グラフィカル要素 3:1」のバッジで合否を表示します。

本ツールではBrettel et al. (1997) をベースとした業界標準的な3×3線形変換行列でP型（赤色弱・Protanopia）/ D型（緑色弱・Deuteranopia）/ T型（青色弱・Tritanopia）を近似表示しています。あくまでも近似であり、実際の見え方には個人差があります。本格的な検証にはネイティブの当事者ユーザビリティテストや、Color Oracle・Sim Daltonism等の専用ソフトウェアの併用を推奨します。

W3CのWCAG 2.1勧告「Understanding SC 1.4.3 Contrast (Minimum)」に記載された相対輝度（relative luminance）と (L1 + 0.05) / (L2 + 0.05) の公式に厳密に従って計算しています。各RGB成分を0-1正規化したのち、c ≤ 0.03928 のとき c/12.92、それ以外は ((c+0.055)/1.055)^2.4 に変換し、L = 0.2126*R + 0.7152*G + 0.0722*B で輝度を求めます。

背景色を固定したまま、前景色をHSL色空間に変換し、明度（L）を上下に少しずつ動かしながら最初にWCAG AA基準（通常テキスト4.5:1）を満たす色を探索し、HEXで提案します。元の色相と彩度はできる限り維持するため、ブランドカラーの印象を保ちつつアクセシビリティを改善できます。

いいえ。すべての計算はお使いのブラウザ内（JavaScript）で完結し、色コードやデザインデータが外部サーバーへ送信されることは一切ありません。社外秘のブランドカラーや未公開デザインも安心して検証していただけます。