コントラスト比のチェック — 読める配色かどうかを数字で
文字色と背景色のコントラスト比を計算し、アクセシビリティの基準を満たすかを判定します。本文なら4.5対1以上、大きな文字なら3対1以上が目安です。
薄いグレーの文字は上品に見えます。作っている本人には読めます。ところが、明るい場所でスマートフォンを見ている人、加齢で視力が落ちた人、古い液晶を使っている人には読めないことがあります。
コントラスト比は、この「読めるかどうか」を明るさの差として数字にしたものです。1対1が同じ色、21対1が白と黒。人の目の感じ方に合わせて計算されるので、単純な明るさの引き算ではありません。
満たすべき比率
| 対象 | AA（標準） | AAA（強化） |
|---|---|---|
| 本文の文字 | 4.5対1 | 7対1 |
| 大きな文字（約18pt以上、太字は14pt以上） | 3対1 | 4.5対1 |
| ボタンの枠や図の輪郭 | 3対1 | — |
| 装飾だけの要素・ロゴ | 基準なし | — |
AAとAAAのどちらを目指すか
AAが実務上の標準です。日本の公的機関のサイトやJIS X 8341-3もこの水準を求めており、多くの企業の指針もここに合わせています。まずAAを満たすことを目標にしてください。
AAAは本文で7対1と厳しく、使える配色がかなり狭まります。全面的に満たすのは現実的でないことが多いので、重要な情報に絞って適用するのが一般的です。
薄いグレーの文字は、たいていAAを満たしません。白背景に #999999 の文字は約2.8対1で、本文としては不足です。#767676 まで濃くすると4.5対1を超えます。
数字を満たしても読みにくいことがあります
コントラスト比は明るさの差だけを見ます。色相の差は数えないので、赤と緑のように「比率は足りているが色覚のタイプによっては区別しにくい」組み合わせも通ってしまいます。色だけで情報を区別せず、形や文字も添えてください。
文字の細さも効きます。同じ色でも、細いフォントや小さい文字は読みにくくなります。基準ぎりぎりの配色なら、文字を少し太く、大きくするだけで実際の読みやすさは上がります。
背景が写真やグラデーションの場合、場所によって比率が変わります。最も明るい部分と最も暗い部分の両方で確かめるか、文字の後ろに半透明の帯を敷いてください。
使うときのこつ
- •色は #ffffff のようなHEXで入力できます。色のカラーコード変換と組み合わせると、RGBやHSLからでも確認できます。
- •リンクの色は本文との区別も必要です。下線を併用すれば、色の差が小さくても区別できます。
- •ホバーやフォーカスの状態も確認してください。通常状態だけ基準を満たしていても、押した瞬間に読めなくなることがあります。
- •入力した色は保存されません。計算はすべてブラウザの中で行われます。
よくある質問
コントラスト比はどう計算されますか？
それぞれの色の相対輝度を求め、明るいほうに0.05を足した値を暗いほうに0.05を足した値で割ります。人の目の感じ方に合わせた重みが入っています。
大きな文字の基準はどこからですか？
およそ18ポイント（24px）以上、太字なら14ポイント（約18.66px）以上が目安です。
白背景に薄いグレーは使えませんか？
本文としては不足しがちです。#767676 あたりが白背景で4.5対1の境目になります。
AAAを満たす必要はありますか？
多くの場合AAで十分です。AAAは使える配色が狭く、全面適用は現実的でないことが多いです。