文字色と背景色のコントラスト比を確かめる手順

薄いグレーの文字が「おしゃれだけど読みにくい」と言われることがあります。 どのくらい濃くすれば十分なのかは、見た目の印象だけでは決められません。

コントラスト比チェッカーは、文字色と背景色の明るさの差を数値にする道具です。 ここでは色を入れてから配色を直すまでを、画面を見ながらたどります。

開いた時点で数値が出ている

ページを開くと、文字色 #767676 と背景色 #FFFFFF が入った状態から始まります。 この灰色は、基準のちょうど境目にある色です。

上のカードに「4.54 : 1」と出ます。 その下のプレビューでは、同じ配色が 16px の本文・24px の見出し・枠線つきボタンとして並びます。

色を打ち替えるには、テキスト欄に貼り付けるかカラーピッカーを押します。 #333 のような 3 桁の書き方や、rgb(51, 51, 51) の形式もそのまま読み取ります。

判定は 1 行ではなく 5 行で出る

比率の下に、適合の判定が 5 行並びます。

上の 4 行は文字向けで、通常の文字と大きい文字にそれぞれ AA と AAA があります。 「大きい文字」は 18pt（約 24px）以上、または太字 14pt（約 18.66px）以上を指します。

5 行目は文字以外です。 ボタンの枠線・アイコン・グラフの線には 3:1 が必要で、この行はそこを見ています。

届かないときは色の候補が 2 つ出る

基準に足りない配色を入れると、下に修正候補が出ます。

候補は色相をそのままに、明るさだけを動かした色です。 元の色味を保つので、ブランドカラーの雰囲気を壊さずに濃さだけ調整できます。

左が文字色を動かす案、右が背景色を動かす案です。 どちらのボタンにも変更後の比率が入っているので、押す前に効果が読めます。

押すと入力欄・ピッカー・判定がまとめて切り替わります。 気に入らなければ、もう一度手で打ち替えれば戻せます。

「文字色と背景色を入れ替える」を押すと、2 色が交換されます。 白背景に濃い文字と、濃い背景に白文字のどちらが好みかを素早く見比べられます。

どちらも不透明なら、入れ替えても比率は同じ値になります。 半透明が混じるときは合成の順序が変わるため、入れ替えると数値も動きます。

半透明の色は混ざったあとの色で見る

rgba() や透明度つきの指定を入れると、扱いが少し変わります。

画面に出ている色は、指定した色と背景が混ざった結果です。 そこで、いったん背景と合成してから比率を計算します。

上の例では、半分透けた黒が実効色 #808080 になり、比率は 3.94 に下がりました。 指定値のまま数えると 21 になってしまうので、この差はそのまま判定の誤りになります。

合成した色は画面にも出ます。 「思ったより低い」と感じたら、この実効色を見ると理由がすぐ分かります。

使用例

たとえば、社内向けの管理画面を作っている Web 制作の担当者の場合です。

補足説明のグレー文字について、レビューで「読みにくい」と指摘が入りました。 現在の色 #AAAAAA を貼り付けると比率 2.32 と出て、通常の文字 AA に届いていないと分かります。

修正候補の #767676 を押すと 4.54 になり、AA の行が合格に変わります。 「結果をコピー」で数値と判定を書き出せば、指摘へのコメントにそのまま貼れます。

数値は切り捨てで出す

このツールは比率を切り捨てで表示します。 4.4999 は「4.49」と出て、「4.5」とは表示しません。

丸め上げると、基準に届いていない配色が合格したように見えてしまいます。 他のツールと 0.01 だけ違う値が出るのは、この扱いの差によるものです。

境目ぎりぎりの色は、環境によって印象が変わります。 少し余裕を持たせた色を選んでおくと、あとで直し直す手間が減ります。

関連するツール

拾った色を別の形式に直したいときは、カラーコード変換で HEX・RGB・HSL を並べて確認できます。

背景にグラデーションを使う場合は、CSSグラデーション生成で作った配色を確かめられます。

ただし両端の色だけを見ても足りません。 輝度の変化は直線ではないため、途中の色が両端より低くなることがあります。

文字が乗る範囲から、いちばん条件の悪い位置の色を拾って入れてください。 中間の数か所も測っておくと取りこぼしが減ります。

まとめ

2 色を入れれば、比率と 5 段の適合判定がその場で並びます。 文字だけでなく、枠線やアイコンに必要な 3:1 も同じ画面で確認できます。

半透明の色は背景と混ぜた実効色で判定するので、画面の見え方と数値がずれません。 基準に届かないときは色相を保った候補が出るため、直すところまで 1 ページで終わります。