女性向けエンジニアスクール
3秒でわかる
文字と背景の明るさの差など、視覚的な強弱で読みやすさと情報の優先順位を決める考え方。比として数値で測れる基準があります。
もう少し詳しく
どういうものか
コントラストは、隣り合う要素の明るさや色の差のことです。UIの文脈では2つの意味で使われます。1つは文字と背景の輝度差で、読めるかどうかを決める部分です。もう1つは見出しと本文、主ボタンと副ボタンのように、大きさや濃さの差で「どれを先に見ればよいか」を伝える部分です。前者は数値で測れます。
なぜ必要か
薄いグレーの文字は、デザイナーの高輝度ディスプレイでは上品に見えても、屋外のスマホや古い液晶では消えます。WCAG 2.1 では通常サイズの文字で4.5対1以上、18pt相当以上の大きな文字で3対1以上のコントラスト比が求められます。これは視力の弱い利用者だけの話ではなく、明るい場所で画面を見る全員に効きます。
具体例
/* 白背景に対して比 2.8 対 1 で基準を満たさない */
.note-bad { color: #999999; background: #ffffff; }
/* 同じ灰色系でも #595959 なら 7.0 対 1 で余裕を持って満たす */
.note-ok { color: #595959; background: #ffffff; }
/* 強弱は色だけでなくサイズと太さでも作る */
.title { font-size: 1.5rem; font-weight: 700; }
.body { font-size: 1rem; font-weight: 400; }比の計算はブラウザの開発者ツールで確認できます。色を選ぶ段階で測る習慣にすると手戻りが減ります。
つまずきやすいところ
色だけで状態を区別する設計は、コントラストの数値を満たしていても失敗します。赤と緑のバッジで成功と失敗を表すと、色覚特性のある利用者には同じ濃さの2つの丸にしか見えません。アイコンや文言を必ず添えます。もうひとつは半透明の重ね置きです。opacity で薄くした文字は、背後の画像によって実際の比が変わるため、単色背景で測った値が当てになりません。
覚え方
「薄い文字はおしゃれではなく、読めない文字」と覚えておくと判断がぶれません。
似た用語との違い
コントラスト比は文字と背景の輝度から計算する数値で、合否がはっきり決まります。一方、視覚的な階層はサイズや余白や太さも含めた設計上の強弱で、数値では測れません。彩度の差だけを付けても輝度が近ければ比は上がらないため、色を鮮やかにする対応は読みやすさの改善になりません。明るさを動かすのが正解です。
ダークモードを用意する場合は、明るい配色をそのまま反転させると比が崩れます。背景と文字の組み合わせごとに測り直し、影ではなく境界線で領域を分けると読みやすさを保てます。
背景に写真を敷く場合は、写真の明るさが場所によって変わるため、半透明の帯を1枚挟んでから文字を置くと安定します。
