WCAGカラーコントラストとは
W3CのWebコンテンツアクセシビリティガイドライン(WCAG)は、テキストと背景の間に十分なコントラスト比を要求しています。AAレベルは通常テキスト4.5:1、18pt以上の大きいテキスト3:1が最低基準です。AAAレベルはより厳格で通常テキスト7:1、大きいテキスト4.5:1を要求します。
コントラスト比が低いと、弱視者、色覚異常者、強い日差しの下でのモバイル利用者がコンテンツを読みにくくなります。日本のJIS X 8341-3(ウェブアクセシビリティ)もWCAG 2.1に準拠しており、公共機関や多くの企業サイトでAA準拠が求められています。
色覚異常への設計原則
情報を色だけで伝えてはいけません。赤緑色覚異常（第1・第2色覚）は男性の約8%に見られます。エラー表示には赤色だけでなくアイコンやテキストを組み合わせましょう。赤と緑の組み合わせだけで意味を区別するデザインは避けてください。
よくある質問
WCAG AAとAAAの違いは？
AAは通常テキスト4.5:1、大きいテキスト3:1が基準です。AAAはより厳格で通常テキスト7:1、大きいテキスト4.5:1を要求します。
コントラスト比が低いとどうなりますか？
弱視者、色覚異常者、明るい環境での利用者がテキストを読みにくくなります。アクセシビリティ法令への非準拠にもつながります。
白背景でAAに合格する最小グレーは？
#767676が白背景に対して約4.54:1でギリギリAAに合格します。これより明るいグレーは通常テキストのAAに不合格となります。