コントラスト比が測っているもの
コントラスト比は、2色がどれだけ明るさで異なるか——つまり一方の色の文字が他方の色の背景上でどれだけ読みやすいか——を1つの数値で表したものです。範囲は、2色が同一で文字が見えない 1:1 から、純黒×純白の 21:1 までです。
この数値は色相の見た目の違いではなく、相対輝度（各色が目に送る光の量を重み付けした指標）に基づきます。明るさへの寄与は緑が最も大きく、赤がそれに次ぎ、青が最も小さいです。見た目が大きく違う2色でも、輝度が近すぎると基準を満たさないことがあるのはこのためです。
WCAGの基準をわかりやすく
WCAG 2.1（W3Cによるウェブアクセシビリティ・ガイドライン）は、多くの法規制やデザインシステムが参照する目標値を定めています。レベルは2つ——AAが一般的な基準、AAAがより厳しい目標——で、文字サイズによって必要な比率が変わります。
- AA・通常テキスト: 4.5:1 以上。本文など普通の文字で満たしたい基準です。
- AA・大テキスト: 3:1 以上。大テキストはおおよそ24px以上、または太字なら18.66px以上を指します。
- AAA・通常テキスト: 7:1 以上。長文の読み物や、ロービジョンの読者に向けた高めの基準です。
- AAA・大テキスト: 4.5:1 以上。
大テキストの基準がゆるい理由
大きな文字ほど低いコントラストが許されるのは奇妙に思えるかもしれませんが、理にかなっています。太く大きな字形は文字を構成するピクセルが多く、明るさの差が小さくても目は快適に読み取れます。逆に細く小さな文字は手がかりが乏しいため、読みやすさを保つには余分なコントラストが必要です。
だからこそ、同じ色の組み合わせでも見出しでは合格、注釈では不合格ということが起こります。組み合わせを確認するときは、見栄えのよい大きな太字だけでなく、それが使われる最小・最細の文字を念頭に置きましょう。
不合格の組み合わせを直すには
基準に届かなくても、たいていは色を捨てる必要はありません。輝度の差を広げればよいだけです。文字を暗くするか背景を明るくする（あるいは両方）ことで、選んだ色相を必ずしも変えずに比率を上げられます。
本チェッカーは不合格のペアを見つけると、AA基準を満たす最も近い色を提案します。デザインの意図を保ちつつ、読みやすい色に着地できます。適用して目で確かめ、そこから微調整しましょう。多くの場合、わずかな変更で不合格から余裕のある合格に変わります。
なぜそこまで手をかける価値があるのか
男性のおよそ12人に1人、女性ではより少ない割合の人が、何らかの色覚特性を持つと言われます。さらに多くの人が、まぶしさ、加齢による見えにくさ、安価な画面、あるいは直射日光下のスマホ閲覧といった状況に直面します。良好なコントラストは、診断のある利用者だけでなく、こうしたすべての人を助けます。
アクセシビリティ上の利点に加えて、読みやすい文字は閲覧者の滞在時間を伸ばし、調達基準やプラットフォームのガイドラインでも求められることが増えています。コントラストの確認は数秒で済み、訪れる誰にとっても体験を静かに改善してくれます。