読みやすいWebサイトの配色の選び方

まずブランドカラーを確認する

デザインを始める前に、メインカラーを白背景と黒背景で確認しましょう。例の青 #3366CC は白背景で 5.36:1 となり通常の文字でAAに適合しますが、黒背景では 3.91:1 で、大きな文字にしか使えません。

両方の向きを確認してください。明るい背景にその色の文字を置く場合と、ボタンなどでその色の上に白や黒の文字を置く場合です。

明るさを変えてコントラストを直す

まったく別の色にする必要はほとんどありません。色相を保ったまま少し暗く、または明るくすれば十分なことがほとんどです。ツールの修正案はまさにこの方法です。

明るい色・暗い色でパレットを作る

ブランドカラー1色だけでは画面全体を作れません。同じ色相の明るい色（白と混色）と暗い色（黒と混色）を使えば、背景、枠線、ホバー時の色をそろえられます。#3366CC の場合、50%の明るい色は #99B3E6、50%の暗い色は #1A3366 です。

明るい色は背景に、暗い色は文字に使い、実際に使う文字色と背景色の組み合わせはすべて確認しましょう。

色だけで情報を伝えない

WCAGの達成基準1.4.1「色の使用」（レベルA）では、色を情報を伝える唯一の手段にしてはいけないとしています。色覚に特性のある人は、特に赤と緑など一部の色を区別しにくいことがあります。

本文中のリンクには下線を付け、エラーメッセージにはアイコンや言葉を添え、グラフの線には色の凡例だけでなく直接ラベルを付けましょう。

チェックリスト

公開前に次の点を確認しましょう。

• 本文の文字は背景に対して4.5:1以上ある。
• 大きな見出しは3:1以上ある。
• 入力欄の枠線、フォーカス表示、アイコンは3:1以上ある。
• リンク、エラー、必須項目は色以外の方法でも示している。
• 画像やグラデーションの上の文字は、背後の最も明るい部分で確認している。