見づらい配色を減らす確認項目と直し方

配色が見づらいという指摘は、たいてい後から届きます。 公開してしばらく経ってから「この文字が読めない」と言われる形です。

やっかいなのは、作った本人には読めてしまうことです。 大きな画面と明るい部屋で作業していると、薄い文字の読みにくさに気づきにくくなります。

この記事では、見づらさが生まれやすい場所を 8 つに絞り、確認する順番と直し方をまとめます。 数値そのものの測り方ではなく、「どこを見て、どう直すか」を扱います。

落ちるのは本文ではなく、その周りの文字

本文の色が真っ黒に近いサイトは多く、ここが基準を割ることはあまりありません。 問題が出るのは、意図的に色を薄くした部分です。

薄くする理由はだいたい同じで、主役を目立たせるためです。 補足・注釈・日付・入力例といった脇役に、グレーを当てていくうちに落ちます。

つまり見づらさは、デザインの失敗ではなく「弱めたい気持ちの行きすぎ」で起きます。 だから直すときも、全部を濃くするのではなく行きすぎた分だけ戻せば足ります。

確認する場所は 8 つでほぼ足りる

ページ全体を眺めても抜けが出ます。 場所を決めて順に見るほうが確実です。

文字まわりの 4 か所

1. 本文と見出し：基準は 4.5:1。見出しが 24px 以上なら 3:1 まで下げられます
2. 補足・注釈・キャプション：グレーを使うところ。最も落ちやすい
3. 入力欄のプレースホルダ：「例: 山田太郎」のような薄い文字。入力前は唯一の手がかりになります
4. リンクの文字：背景との比率に加えて、周りの本文と区別できるかも見ます

文字以外の 4 か所

5. ボタンの枠線：塗りのないボタンは枠線だけが手がかり。基準は 3:1
6. 入力欄の枠線：どこが入力欄かを示す線。薄いグレーになりがち
7. フォーカスの輪郭：キーボード操作で今どこにいるかを示す線
8. アイコンとグラフの線：色だけで系列を分けている図は特に危険

4 から 8 は本文が通っていても落ちることがあります。 文字の色だけ直して安心しないよう、番号順に一度ずつ見てください。

直す順番は面積の広いところから

全部を同時に直そうとすると、途中で配色が崩れます。 面積の広い順に手をつけると、後の判断が楽になります。

まず背景色を決めます。 背景が動くと、その上の文字とアイコンの数値が全部つられて動くからです。

次に本文の文字色、そのあとに補足文字です。 最後に枠線やアイコンを合わせると、前の判断をやり直さずに済みます。

直し方は 3 通りしかない

数値が足りないとき、打てる手は多くありません。 組み合わせて使うこともありますが、種類としては 3 つです。

1. 明るさだけを動かす

いちばん影響が小さい方法です。 色相と彩度をそのままにして明度だけ下げれば、色味の印象を保ったまま比率を上げられます。

ブランドカラーを使っている場面ではこれが第一手になります。 コントラスト比チェッカーは、この考え方で候補色を出します。

2. 背景に帯を敷く

写真や動画の上に文字を置くときの定番です。 文字の後ろに単色または半透明の帯を入れ、背景の明るさを固定します。

半透明を使うときは、混ざったあとの色で測り直してください。 指定した色のまま数えると、実際より高い比率が出ます。

3. 文字を大きく、または太くする

18pt（約 24px）以上、または太字 14pt（約 18.66px）以上になると、基準が 4.5:1 から 3:1 に下がります。 色を変えたくないときは、サイズを一段上げるほうが早いこともあります。

ただし補足文字を大きくすると主役との差が消えます。 脇役として弱めたいなら、サイズではなく明るさで調整するほうが向きます。

色を変えずに済ませる判断もある

すべてを基準に合わせる必要はありません。 装飾目的の文字、ロゴ、操作できない状態の部品は、規格の対象外です。

とはいえ「装飾だから」と広く解釈すると、読ませたい文字まで例外になります。 迷ったら「これが読めないと困る人がいるか」で分けてください。

数値が境目のときにどう決めるか

4.5 に対して 4.51 のような値は、通っていても余裕がありません。 屋外の画面、古いディスプレイ、明るい部屋では印象が変わります。

境目の色を選ぶくらいなら、一段濃い色を選ぶほうが後で楽です。 測り直しや指摘対応の回数が減ります。

なお、ツールによって表示が 0.01 だけ違うことがあります。 小数の丸め方の違いなので、境目の値は「切り捨てで見ても通るか」で判断すると安全です。

見直しをいつ行うか

配色は一度決めたら終わり、という性質のものではありません。 新しい部品を足すたびに、薄いグレーが増えていきます。

デザインを更新したとき、上の 8 か所をもう一度たどってください。 所要時間は数分で、公開後に指摘を受けて直すより確実に速く済みます。

この記事のまとめ

見づらさは本文ではなく、補足文字・プレースホルダ・枠線から始まります。 確認する場所を 8 つに固定すると、抜けと二度手間が減ります。

直すときは面積の広いところから順に、明るさ・帯・サイズの 3 通りで対処します。 境目の値は避けて一段濃く選んでおくと、次の更新で測り直す回数が減ります。