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

使い方

1. 左に 前景色 HEX（テキスト・記号の色）、右に 背景色 HEX を入力。
2. ネイティブカラーピッカー・直接入力・デザインツールからのペーストに対応。3 桁省略形（#abc）は自動的に 6 桁に展開。
3. コントラスト比はリアルタイム更新。例: 12.6 : 1、AA / AAA 合否バッジ付き。
4. 3 つのステータスカードで 本文・大きな文字・UI コンポーネント の AA / AAA 結果を表示。
5. 本文 AA（4.5 : 1）が不合格の場合、修正案カードが現れ、修正案を適用 をクリックすると色相を保ったまま明度を調整。

WCAG コントラスト比の仕組み

WCAG 2.x のコントラスト比は 2 色の相対輝度から計算します。各 sRGB チャンネルを区分関数で gamma 復号し、0.2126·R + 0.7152·G + 0.0722·B で重み付けして輝度を求め、比は (L1 + 0.05) / (L2 + 0.05)（L1 は明るい方）。値は 1（コントラストなし）〜21（純黒×純白）の範囲。

本文・大きな文字・UI の 3 階層

WCAG 2 はユースケースごとに目標値を分けています：

• 本文（達成基準 1.4.3）—— AA ≥ 4.5 : 1、AAA ≥ 7 : 1。18 px 未満通常または 14 px 未満太字のテキストが対象。
• 大きな文字—— AA ≥ 3 : 1、AAA ≥ 4.5 : 1。18.66 px 太字以上または 24 px 通常以上のテキストが対象。
• UI コンポーネントと図形（達成基準 1.4.11）—— ≥ 3 : 1。枠線・フォーカスリング・アイコン・グラフ線などの非テキスト視覚要素を対象。WCAG 2 はここでは AAA を規定していません。

「色相を保ったまま明度を調整」する理由

ブランドカラーやデザイントークンは輝度ではなく色相のアイデンティティで選ばれることが多いため、コントラスト不足のときに黒や白へ切り替えると視覚言語が崩れます。本ツールは前景の OKLCH 明度軸（知覚的に均一）を歩み、原色相と彩度を保持したまま、現在の背景に対して 4.5 : 1 を最初に満たす明度で停止します。結果として元の色に最も近く本文 AA を通過する色が得られます。色相が sRGB 色域内で目標に届かない場合は、合格する黒または白にフォールバックします。

プライバシー

HEX 解析・OKLCH 変換・コントラスト計算・修正案探索はすべてブラウザ内で完結します。色や設定は一切送信されません。

関連ツール

• カラーパレットジェネレーター——ベースカラーから補色・類似色・トライアド・テトラッドを生成。
• カラーコンバーター——HEX・RGB・HSL 相互変換。
• カラーシェードジェネレーター——Tailwind 風 10 階調スケールを生成。