コントラスト比

前景色と背景色の明度差を数値化した比率。WCAG ではテキストの可読性基準として 4.5:1 以上を要求する。

コントラスト比は、前景色 (テキストやアイコン) と背景色の相対的な明度差を数値で表した比率です。1:1 (差なし) から 21:1 (黒と白) の範囲で表現されます。

WCAG (Web Content Accessibility Guidelines) 2.1 では、通常テキストに 4.5:1 以上、大きなテキスト (18pt 以上または 14pt 太字以上) に 3:1 以上のコントラスト比を要求しています。アクセシビリティデザインの書籍で基準を学べます。

コントラスト比の計算には、色の相対輝度 (relative luminance) を使用します。Chrome DevTools や axe などのツールで簡単にチェックできます。

文字数カウントとの関連では、コントラスト比が低いテキストは読みにくく、ユーザーが文字を正確に認識できない原因になります。カラーデザイン基礎の書籍も参考になります。