直接の回答
カラーコントラストチェッカーは、W3C WCAG 2.2ガイドラインに準拠してテキスト色と背景色の相対輝度(Relative Luminance)を算出し、アクセシビリティ適合基準(AA・AAA)を即座に判定します。
このツールの使い方
前景色(テキスト色)と背景色を入力する
カラーピッカーまたはHEX/RGBコードから2つの色を指定します。
コントラスト比と合否基準を確認する
算出されたコントラスト比(例:4.5:1)と、通常テキスト・大テキスト・UI要素の適合状況を確認します。
自動修正サジェストを活用する
基準を満たさない場合、色味を保ったまま基準を満たす推奨カラーパレットをワンクリックで適用します。
相対輝度とWCAGコントラスト比の計算式
sRGB色空間のRGB値をガンマ補正して相対輝度Lを算出し、明るい方の輝度L1と暗い方の輝度L2の比率を求めます。WCAG 2.2では通常テキストで最低4.5:1(AA基準)、7:1(AAA基準)が求められます。
- WCAG 2.2 AA基準:通常の本文テキストで4.5:1以上、18pt以上または14pt太字の大きなテキストで3:1以上が必要です。
- UIコンポーネント基準:フォームの境界線やグラフィカルな操作アイコンには最低3:1のコントラスト比が推奨されます。
具体例
白背景に対するネイビーブルーテキストのコントラスト評価
入力: 前景色:#1E3A8A、背景色:#FFFFFF
出力: コントラスト比:10.4:1(AA合格・AAA合格)
視覚障害を持つ方や屋外の直射日光下でも高い可読性が保証される優れた配色です。
制限事項
- 単一の前景色と背景色の組み合わせを評価するツールであり、写真やグラデーション背景上のテキストは評価できません。
- フォントの太さ(ウェイト)や字形の特性による主観的な読みやすさの違いまでは評価しません。
よくある質問
WCAG 2.2における「大きなテキスト」の定義は何ですか?
一般的に18pt(約24px)以上の通常フォント、または14pt(約18.66px)以上の太字(Bold)テキストが該当します。
色の自動修正機能はどのように色を選定していますか?
元の色相(Hue)と彩度(Saturation)を最大限に保持しながら、必要なコントラスト比を満たすまで輝度(明度)のみをアルゴリズム的に調整します。
信頼できる参考文献・標準規格
- W3C Web Content Accessibility Guidelines (WCAG) 2.2 ↗ — コントラスト比、レベルAA/AAAベースライン、非テキストコントラストに関する公式規格。
- W3C 相対輝度の定義と計算式 ↗ — sRGB色空間における相対輝度算出の数学的計算式。