WCAGコントラストチェッカー
文字色と背景色の組み合わせのコントラスト比をWCAG AA・AAA基準で確認 — 通常サイズと大きいサイズのテキストをライブプレビュー付きで。
1,129回閲覧
素早い茶色の狐が怠けた犬を飛び越える
大きいテキストの例 24px
比率はどう計算されるのか
WCAGの計算式は (L1 + 0.05) / (L2 + 0.05) で、L1は明るい方の色の相対輝度、L2は暗い方の色の相対輝度です — そのため結果は常に1:1(同一色)から21:1(純白地に純黒)の間に収まります。相対輝度はRGBチャンネルの単純な平均ではありません。各チャンネルをsRGBのガンマカーブを逆算して線形化した後(0.03928未満の値は12.92で割り、それ以外は((c+0.055)/1.055)^2.4を通す)、知覚的な重み付けをした合計 L = 0.2126R + 0.7152G + 0.0722B として求められます。緑は青の約10倍もの知覚的な明るさに寄与するため、ある色の緑チャンネルと青チャンネルを入れ替えると、生の明るさは変わらないまま見た目の重みが大きく変化することがあります。
具体例を挙げましょう。白い背景の上の純粋な中間グレー#767676は、ちょうど4.54:1になります — 通常テキストのWCAG AAしきい値である4.5:1をわずかに上回るだけです。これを1段階暗い#757575にずらすと4.48:1に下がり、AAに落ちてしまいます。多くのグレー・オン・ホワイトのデザインが監査でひっそりと不合格になるのはこのためです — 合格するグレーと不合格になるグレーの視覚的な差はRGB1段階分しかなく、ほとんどの目には見えなくても、自動スキャナーや、明るい日差しの下にいるロービジョンのユーザーにははっきりと見えるのです。
知っておくべきこと
WCAG 2.1はテキストサイズに応じて2つのAAしきい値を定めています — 通常テキストで4.5:1、そして緩和された大きいテキストで3:1です。大きいテキストは18pt(24px)の標準ウェイト、または14pt(18.7px)の太字以上と定義されており、大きなストロークは低いコントラストでも読みやすいためです。より厳しいAAAレベルでは、通常テキストで7:1、大きいテキストで4.5:1が求められます。アイコン、入力欄の枠線、フォーカスインジケーターなどの非テキストUI要素は、WCAG 2.1のSC 1.4.11のもとで、隣接する背景色に対して独自に3:1が求められます。
これらの数値は恣意的なものではありません — ロービジョン、色覚異常、加齢によるコントラスト感度低下を持つユーザーの読みやすさに関する研究から導かれたものであり、ADAや、欧州アクセシビリティ法の根拠となるEU規格EN 301 549といったアクセシビリティ規制における法的な参照点としても使われています。コントラストの不合格は、自動化されたWebアクセシビリティ監査で最も頻繁に指摘される問題の1つであり、そのため多くのデザインシステムは、個々のデザイナーによるチェックに任せるのではなく、4.5:1という下限を直接カラートークンに組み込んでいます。
よくある質問
文字色と背景色を入れ替えるとコントラスト比は変わりますか?
いいえ — この計算式は常に明るい色を分子に置くため、比率は対称です。読みやすさは主観的に異なって感じられることがあります(暗地に明るい文字のハレーションなど)が、WCAGのスコアは同一です。
大きいテキストとは何を指しますか?
24px(18pt)以上の標準ウェイト、または約18.7px(14pt)以上の太字です。大きいテキストがAAで3:1しか必要ないのは、文字が大きいほど低いコントラストでも読みやすさが保たれるためです。
ブランドカラーが基準を満たしません — どうすればいいですか?
装飾用途にはそのまま使い、テキスト用途では基準を満たすまで濃く、または薄く調整してください。色調・階調のスケールを用意すると役立ちます。プレースホルダーテキストや無効状態は要件の対象外ですが、それでも妥当な範囲に収めておきましょう。
なぜ単純なRGB平均ではなく、ガンマ補正した輝度を使うのですか?
知覚される明るさは線形でも、チャンネル間で均等でもないからです — 生のRGBを平均すると、明るい黄色(#ffff00)と中間の青(#0000ff)がほぼ同じ明るさとして扱われてしまいますが、実際には黄色の方がはるかに明るく見えます。ガンマ復号の工程は、sRGBが線形の光をそのまま保存せず圧縮していることを補正するものであり、0.2126/0.7152/0.0722という重みは、目が緑に最も敏感で、次に赤、最後に青の順に敏感であることを反映しています。どちらかの工程を省くと、数値は実際に見えるコントラストと一致しなくなります。
合格するコントラスト比は、色覚異常のユーザーにとっても問題なく機能することを保証しますか?
完全にはそうではありません — この比率は輝度差のみを測るものであり、色相の差は測りません。そのため2色が4.5:1に合格していても、明るさよりも主に色相の違いに頼っている場合(たとえば同じ明るさの一部の赤/緑の組み合わせ)、2型色覚(緑色弱)の人には区別しづらいことがあります。高いコントラスト比は色覚異常への配慮に必要ではありますが、それだけでは十分ではありません。明るさの差や、アイコン・下線といった色以外の手がかりを組み合わせることで、両方のケースをカバーできます。
関連ツール
問題を報告
WCAGコントラストチェッカー
コメント
まだコメントはありません — 最初のコメントを書いてみましょう！