色のコントラストとWCAG：読みやすい文字にする方法

白地に薄いグレーの文字はデザインデータでは上品に見えても、日差しの下のスマホや、年齢を重ねた目、ロービジョンの人には読みにくいものです。アクセシビリティのガイドラインWCAGは、「読みやすさ」を確かめられる数値にしてくれます。

コントラスト比

コントラストは1:1（同じ色）から21:1（白地に黒）までの比で表します。基準は相対輝度、つまり目にどれだけ明るく見えるかで、緑が最も重く、青が最も軽く数えられます。だから白地の黄色い文字はほとんど見えず、白地の青い文字はよく読めるのです。

基準値

              通常の文字   大きな文字
AA（最低限）   4.5:1        3:1
AAA（強化）    7:1          4.5:1

大きな文字 = 24px以上、または太字で18.66px以上

AAは多くのアクセシビリティ関連の法律や方針が参照するレベルなので、最低限と考えましょう。長文の本文ではAAAを目指す価値があります。意味を持つアイコン、入力欄の枠、フォーカス表示は、WCAG 2.1では3:1以上が必要です。

基準を満たさないことが多い組み合わせ

グレーのプレースホルダー、オレンジや黄色、明るい緑など鮮やかなブランドカラーの上の白い文字、写真の上の文字です。差はわずかなこともあり、白地の #777777 は約4.48:1でAAをわずかに下回りますが、#767676 は約4.54:1で合格します。

手早い直し方

色相を変えるより、文字か背景を1〜2段階暗くしましょう。明度を少し変えるだけで比は大きく動きます。鮮やかなボタンのラベルは大きく太くするか、白ではなく暗い文字にしてください。写真の上では、文字の背後に暗いオーバーレイを敷きましょう。

色のルールはコントラストだけではない

WCAGは、情報を伝える手段を色だけにしてはいけないとも定めています。赤い枠だけでエラーを示す入力欄や、色だけで線を区別するグラフは、色覚に特性のある人、男性のおよそ12人に1人には伝わりません。アイコン、テキストのラベル、模様、線の種類の違いを加えましょう。

ダークモード

暗い背景にも同じ比率が適用されます。純黒に純白の文字は21:1に達しますが、きつく見えたり、読む人によっては文字がにじんで光るように見えたりします。ごく暗いグレーに明るいグレーなら、余裕でAAを満たしつつ長文も読みやすくなります。ライトモードで合格した組み合わせが色を反転すると不合格になることはよくあるので、両方のテーマを確認しましょう。

画像やグラデーションの上の文字

写真やグラデーションの上では、文字ごとに背景が変わります。平均ではなく、文字の後ろにある背景のいちばん明るい部分に対してコントラストを測りましょう。文字の後ろに半透明の暗いレイヤーや塗りつぶした帯を置けば、結果が予測しやすくなります。

これから

WCAG 3の草案では、文字の大きさと太さをより正確に考慮するAPCAという新しいコントラストの計算方法が検討されています。ただしまだ草案で、現在の法律や監査が参照するのはWCAG 2.1と2.2です。満たすべき基準は引き続き4.5:1と3:1です。

組み合わせをチェック

4Devのカラーコントラストチェッカーは、文字色と背景色のコントラスト比を、ライブプレビューと、通常・大きな文字それぞれのAA・AAAの合否とともに表示します。計算はWCAG 2の式を使い、ブラウザ内で行われます。

カラーコントラストチェッカーを開く