WCAG AAA配色ジェネレーター

使い方

1. 固定する色を入力する

   カラーピッカーまたは3桁・6桁のHEXで色を指定し、背景色と文字色のどちらとして使うか選びます。

2. 文字サイズを選ぶ

   通常の文字は7:1、大きな文字は4.5:1が基準です。大きな文字には24 CSS px以上、太字なら18⅔ CSS px以上のサイズが必要です。

3. 候補を確認してコピーする

   候補の配色をプレビューで比較し、HEXをコピーします。実際に出力するHEX色から計算した比率で、表示用に丸める前に判定します。

判定範囲

不透明なsRGBのHEX色が対象です。透明色、画像、グラデーション、広色域の色は評価しません。候補は色相を一定間隔で選んだ配色例であり、全候補の列挙や知覚的に最も近い色の保証ではありません。文字のコントラスト基準を満たしても、WCAG AAA全体への適合にはなりません。

よくある質問

候補が出ないのはなぜですか？

中間的な明るさの色には、黒・白と組み合わせても7:1に届かないものがあります。その色を固定したままでは通常の文字のAAA基準を満たせません。固定色を変更するか、条件を満たす大きな文字での利用を検討してください。

どのWCAG基準で判定していますか？

WCAG 2.2の達成基準1.4.6「コントラスト（高度）」を使い、通常の文字は7:1、大きな文字は4.5:1で判定します。参照：https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced.html

候補の色はどう選んでいますか？

指定色の色相を起点に30度ずつ色相を変え、HSL彩度65%で明度を探索します。条件を満たす黒・白も加え、表示するすべてのHEX色を選択基準で再確認します。