使い方
- 色を選ぶか、hex、rgb()、hsl()、oklch()、色名で入力します。
- 比率と 4 種類の WCAG 判定を確認し、下のライブプレビューを見ます。
- 不合格の場合は、提案の横にある「この色を使う」をクリックして適用します。
オプションの説明
- AA
- 通常の文字は 4.5:1 以上、大きな文字は 3:1 以上が必要です。大きな文字は 18 pt / 24 px、または 14 pt / 約 18.7 px の太字を指します。多くの規制やデザインシステムは AA を求めます。
- AAA
- 通常の文字は 7:1 以上、大きな文字は 4.5:1 以上が必要です。読みやすさを特に重視するコンテンツ向けです。
- 提案色
- OKLCH 色空間で色相と彩度を保ち、明度だけを変えて、ぎりぎり基準を満たす最も近い色を探します。
- 透明な色
- 透明度のある文字色は、背景の上に表示された見た目の色として測定します。
比率の計算方法
各色を sRGB から線形光に変換し、さらに相対輝度に変換します。
linear = c ÷ 12.92 if c ≤ 0.04045
linear = ((c + 0.055) ÷ 1.055) ^ 2.4 otherwise (c is 0–1)
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)目は緑にいちばん敏感なので、緑の寄与が最も大きくなります。白い背景に対する結果の例です。
| 文字色 | 比率 | 結果 |
|---|---|---|
| #000000 | 21 : 1 | AAA |
| #0066cc | 5.57 : 1 | 通常の文字で AA、通常の文字で AAA は不合格 |
| #767676 | 4.54 : 1 | 通常の文字で AA |
| #777777 | 4.48 : 1 | 通常の文字では AA 不合格、大きな文字では合格 |
WCAG の定義は 達成基準 1.4.3 を理解する (英語) にあります。
よくある質問
コントラストはどう計算されますか？
WCAG 2.x の式（明るい方の相対輝度 + 0.05）÷（暗い方の相対輝度 + 0.05）を使い、1:1〜21:1 の範囲になります。白地に黒は 21:1 です。
#767676 がよく言及されるのはなぜですか？
白に対して 4.5:1（約 4.54:1）を満たす最も明るいグレーなので、補助テキストの一般的な下限として使われます。
アイコンや枠線も確認する必要がありますか？
はい。WCAG 2.1 以降、ボタンの枠、入力欄、アイコンなどのユーザーインターフェース部品と図形は、隣接する色に対して少なくとも 3:1 が必要です。
プライバシー
このツールはすべてブラウザ内で動作します。ファイルやテキストはお使いの端末上で処理され、当サイトのサーバーにアップロードされることはありません。