コントラストと色覚
読めるかどうかは感覚ではなく比率で決まります。本文は 4.5:1。測れば、議論が要らなくなります。
図の中身を文字で読む
- 同じ白背景でも、文字色でこれだけ変わる
- 読みにくい文字 やや薄い文字 補助的な文字 本文の文字
- 1.6:1 基準以下 3.5:1 通常文字は不足 7.0:1 AAA 16.1:1
- 通常の文字は 4.5:1 以上（AA）。大きい文字と UI 部品の境界は 3:1 以上。
- ✕ 色だけで状態を区別する ○ 形と文言を併用する
- 送信できました 送信できました 送信できました
- 送信できません 送信できません 送信できません
- P型・D型の見え方（近似） 丸の色が区別できない 色が伝わらなくても、形と言葉で分かる
- 日本人男性のおよそ20人に1人が色覚特性を持つ。加えて、屋外の明るさ・画面の設定・印刷でも色は変わる。
- 半透明の要素や写真の上の文字は、合成後の実際の色で測る。CSSの値ではなく、表示された画素を測る。
ひと目で#
- コントラスト比
- 前景と背景の相対輝度の比。同じ色で 1:1、黒と白で 21:1
- 色覚特性
- 特定の色の区別が難しい視覚の特性。日本人男性のおよそ20人に1人
- APCA
- 知覚により近い新しい算出方式。ただし適合の判定は今も WCAG 2.x
基準値#
| 対象 | AA | AAA |
|---|---|---|
| 通常の文字 | 4.5:1 | 7:1 |
| 大きい文字（24px 相当以上、太字なら18.66px 相当以上） | 3:1 | 4.5:1 |
| UI 部品と図形の境界 | 3:1 | 規定なし |
図の中身を文字で読む
- 同じ色でも、文字の大きさで合否が変わる
- 見出しなら使える 本文に使うと薄すぎる。長く読ませる文字には向かない。
- #ba7336 3.75:1 ○ 24px 以上は 3:1 でよい #ba7336 3.75:1 ✕ 通常文字は 4.5:1
- 本文の文字を薄くするなら、ここまで
- 補助の文字はここが下限 AAA まで確保するなら
- #767676 4.54:1 AA #595959 7.00:1 AAA
- 大きい文字＝24px 相当以上、太字なら 18.66px 相当以上。UI 部品と図形の境界は 3:1。
使い分け#
| こう感じたら | 直すところ |
|---|---|
| 文字が読みにくい | 明度差を広げる。彩度や色相では変わらない |
| 補助の文字を薄くしたい | 4.5:1 を下回らない範囲で。白地なら #767676 が4.54:1、#595959 が7.00:1 |
| 写真の上の文字が、場所によって読めない | スクリムを敷くか、文字側にパネルを置く |
| エラーと成功を区別させたい | 色に加えて、アイコンと文言を必ず添える |
| ダークモードで数値が合わない | 暗い背景では組み合わせが変わる。改めて実測する |
間違えやすいところ#
- 色だけでエラーと成功を示す図の下段のとおり、色覚特性のある利用者に伝わらない
- HSL の明度差で判断する知覚的に均等ではないので、実際の比率と対応しない
- 半透明の要素を CSS の値で計算する背後と合成された実際の色で測る
- プレースホルダーや無効状態は対象外だと考える意味を持つ文字なら基準は適用される
- 自動チェックツールで終わらせる写真の上の文字は、機械では判定できない
- APCA の値で適合を宣言する現行の基準は WCAG 2.x
測り方#
CSS の値ではなく、表示された画素を測ります。ブラウザの開発者ツールで拾うか、スクリーンショットの画素を採って計算します。
直す例#
架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。
例として、珈琲店のヒーローに、朝の窓辺の写真を敷いて白い見出しを載せました。デザインツール上では、文字色 #ffffff と写真の平均色で 5.2:1。数字の上では合格です。実機で見ると、窓の白飛びした部分では見出しが消え、カウンターの影では読めます。平均値で測った典型的な失敗です。
写真と文字のあいだに暗幕を1枚はさみます。下から強く、上へ抜けるグラデーションにすると、写真の主題を潰さずに文字の直下だけを暗くできます。濃さは変数1つで持ち、375px と 1280px の両方でスクリーンショットから測り直します。
写真が運用で差し替わるなら、いちばん明るい1枚で測ります。1枚合格すれば、暗い写真は必ず通ります。
確認する#
- 文字の直下の画素で測っている（写真全体の平均ではない）
- 写真のいちばん明るい部分と暗い部分の両方で読める
- 成功と失敗の区別に、色以外（形か文言）が添えられている
使えるパターン#
この話が要る場面#
このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。
明度差を広げる。彩度や色相をいじっても比率は上がらない。本文4.5:1、大きい文字とUI部品は3:1。
このコードで動いている見本です
4.5:1を下回らない範囲まで。白地なら #767676 が4.54:1、#595959 が7.00:1。これより薄いと割る。
このコードで動いている見本です
写真側にスクリムを敷くか、文字側に不透明のパネルを置く。文字色だけで解こうとしない。
このコードで動いている見本です
CSSの値ではなく、表示された実画素で測る。開発者ツールで拾うか、スクリーンショットから採る。
開発者ツールのカラーピッカーで実画素を拾う
日本人男性のおよそ20人に1人が区別しにくい。形と文言を足せば、色が伝わらなくても通じる。
このコードで動いている見本です
この場面のほかの困り事と、そのまま貼れる部品は色を決めるにまとめてある。逆引きには全188件。
測ってみる#
この値は作業台で決められます。和文の予約ページに載せて、幅と明暗を替えて確かめてから CSS を持ち帰る: 色と階段、グラデーションとスクリム
2色を入れると比率と判定が出ます。色覚特性での見え方も近似で並べています。
この大きさの文字（24px）
この大きさの文字（18.7px 太字）
この大きさの文字（16px）。本文はここで判定します。
UI部品と図形の境界
色覚特性での見え方（近似）
スクリムを試す#
写真の上に文字を載せるとき、グラデーションで地を暗くします。不透明度を動かして、読めるラインを探します。
この道具は JavaScript で動きます。無効の場合は、上の表の数値を使ってください。