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

使い方

1. 文字色と背景色を、色の選択画面または HEX（#1f2933 など）・rgb() の文字列で入力します。入力と同時にコントラスト比が計算されます。
2. 通常の文字・大きな文字・UI部品の各基準について、AA / AAA の合否が「合格／不合格」で表示されます。表示サンプルで実際の見え方も確認できます。
3. 不合格の場合は、色相と彩度を保ったまま明度だけを調整して基準に届く色を提案します。「適用」を押すと文字色に反映されます。
4. 「パレット一括チェック」にブランドカラーの候補を改行区切りで入力すると、色同士の総当たり表で使える組み合わせを確認できます。

このツールについて

コントラスト比は WCAG 2.1（2.2 でも同じ定義）に従って計算しています。sRGB の各チャンネルを線形化したうえで相対輝度 L = 0.2126R + 0.7152G + 0.0722B を求め、明るい方を L1、暗い方を L2 として (L1 + 0.05) / (L2 + 0.05) を比率とします。黒と白の組み合わせが最大の 21:1、同じ色同士が 1:1 です。表示は小数第2位までの四捨五入ですが、4.4996 のようにわずかに届かない値が「4.50」に見えて判定と食い違う場合だけ切り捨てて表示します。

合否の基準は達成基準 1.4.3（AA）・1.4.6（AAA）・1.4.11（非テキストのコントラスト）に基づきます。通常の文字は AA 4.5:1・AAA 7:1、大きな文字は AA 3:1・AAA 4.5:1、ボタンの枠線やアイコンなどの UI 部品・図形は 3:1 です。「大きな文字」は 18 ポイント（約 24px）以上、または 14 ポイント（約 18.66px）以上の太字を指します。

色の提案は、文字色を HSL に変換して明度を 1% ずつ暗く・明るくし、背景色に対して目標の比率に最初に届いた色を返します。両方向で届く場合は比率が高い方を選びます。背景が中間の明るさで、黒や白にしても届かない場合は提案しません（その場合は背景色の見直しが必要です）。

この数式は色の明るさの差だけを見るため、フォントの太さ・書体・文字サイズの細かな違いや、色覚の多様性への配慮はカバーしていません。比率を満たしたうえで、実際の画面や印刷で読みやすさを確認してください。入力した色はブラウザ内だけで処理され、保存も送信もされません。

よくある質問

Q. AA と AAA はどちらを目指せばよいですか？

一般的な Web サイトでは AA（通常文字 4.5:1）が実務上の目安として広く使われています。AAA（7:1）は高いレベルの基準で、長文を読む画面や視認性を重視する場面で採用されます。

Q. 「大きな文字」とは具体的に何 px からですか？

WCAG では 18 ポイント以上、または 14 ポイント以上の太字と定義されています。1 ポイント = 1.333px で換算すると、通常の太さで 24px 以上、太字で約 18.66px 以上が目安です。

Q. グラデーションや半透明の背景はどう調べればよいですか？

このツールは不透明な 2 色の組み合わせだけを計算します。グラデーションの場合は最も明るい部分と最も暗い部分のそれぞれで確認し、半透明の場合は実際に表示される合成後の色を取得して入力してください。

Q. 比率は合格なのに読みにくく感じます。

WCAG 2.x の数式は明るさの差だけを見るため、細い書体・小さな文字・彩度の高い色同士の組み合わせでは、比率が同じでも読みやすさに差が出ます。比率は最低限の条件として使い、最終判断は実際の画面で行ってください。

Q. CSS の色名（red など）や HSL は入力できますか？

現在は HEX（#rgb / #rrggbb）と rgb() / rgba() だけに対応しています。色名や hsl() は、ブラウザの開発者ツールなどで HEX に変換してから入力してください。