コントラスト比が存在する理由

文字を読むとき、目は文字の明るさや暗さと背景を比較しています。その差がコントラストです。👀

あるデザイナーには十分に見える色でも、別の人には見づらいかもしれません。そこでアクセシビリティでは、誰でも確認できる測定可能な数値であるコントラスト比を使います。

比率は1:1から21:1までです。白地に黒は最大の21:1で、同じ色同士では1:1となり、完全に見えません。

計算の基礎となるのは、色の見かけの明るさである輝度です。色相が大きく異なっていても、明るさが近すぎると見分けにくくなります。

視力には個人差があるため、コントラストのルールがあります。弱視のユーザーや高齢者、疲れている人には、明るい画面を見る若いデザイナーより大きな差が必要です。

日光の反射、安価なモニター、暗くしたスマートフォンは、いずれもコントラストを低下させます。そのような環境でも保てる比率なら、どこでも文字を読みやすくできます。

WCAGは、調査に基づく通常の文字の最低基準として4.5:1を定めています。白と黒を強制しなくても、中程度の弱視におおむね対応できる値です。

大きな文字は読みやすいため、基準は3:1まで下がります。太く大きな文字は、小さな本文より小さい明るさの差でも読み取れます。

比率は常に2つの色の組み合わせを表します。グレーは単独で読みやすいのでも読みにくいのでもなく、置かれた背景との関係で決まります。

同じ考え方はUIコンポーネントにも当てはまります。ボタンの境界線、アイコン、フォームの輪郭にも、見つけられるだけのコントラストが必要です。

この2色の比率はおよそ4.6:1で、通常の文字に必要な基準をわずかに上回り、快適に読めます。

コントラスト比によって、読みやすさを輝度に基づく1つの正直な数値で表せるため、あらゆる人の目に対応できることを学びました。次はAA基準を満たす方法です。✅