ウェブアクセシビリティに配慮した配色では、好きな色を選ぶ前に、文字と背景のコントラストを測り、色以外の手がかりを用意します。色の名前や雰囲気だけでは、読みやすさや情報の伝わり方を判断できないためです。
この記事では、本文、リンク、フォーム、グラフなどに共通する配色の考え方と、公開前に確認したい手順を整理します。
配色で確かめる三つのこと
配色の確認では、次の三点を分けて考えると判断しやすくなります。
- 文字を読めるか：文字色と背景色のコントラストを測ります。
- 色を区別できなくても意味が伝わるか：ラベル、アイコン、形、線などを併用します。
- 操作する要素を見つけられるか：リンク、ボタン、入力欄、選択状態などを確認します。
色の見え方には個人差があります。特定の色の組み合わせを区別しにくい人、視力が低下している人、強い光や明るい画面に負担を感じる人など、困り方も一つではありません。そのため、「この色なら誰にでも見やすい」と色名だけで決めず、用途ごとに検証します。
文字と背景のコントラストを測る
コントラスト比とは、文字色と背景色の明るさの差を比率で表した指標です。数値が高いほど差が大きくなります。詳しい考え方は、サイト内のコントラスト比の基準と確認方法でも解説しています。
| 確認する文字 | コントラスト比の目安 |
|---|---|
| 本文などの通常サイズの文字 | 4.5:1以上 |
| 大きな文字 | 3:1以上 |
大きな文字に該当するか判断しにくい場合は、通常サイズの文字と同じ基準で確認すると迷いにくくなります。見出しだけでなく、ボタン内の文字、画像に重ねた文字、入力欄の説明など、実際に表示される文字色と背景色の組み合わせを一つずつ測ります。
色の組み合わせは、WebAIM Contrast Checkerなどのチェックツールで確認できます。文字色と背景色を入力し、通常の文字と大きな文字の判定を分けて確認してください。
色名では合否を決められない
「黒と白」「青と白」のような色名だけでは、コントラスト比は決まりません。同じ青でも明るさや濃さが異なり、背景との組み合わせによって結果が変わるからです。ブランドカラーを使う場合も、色名や印象ではなく、実際のカラーコードで測ります。
情報を色だけで伝えない
十分なコントラストがあっても、色だけで状態や意味を示すと、色の違いを捉えにくい人には情報が伝わらない場合があります。色は補助として使い、文字や形など、別の手がかりを組み合わせます。
| 場面 | 色だけに頼る例 | 伝わりやすい示し方 |
|---|---|---|
| 入力エラー | 入力欄の枠を赤くする | 枠色に加えて「入力内容を確認してください」などの文を表示する |
| 必須項目 | 項目名を赤くする | 「必須」という文字や記号を項目名に添える |
| 本文中のリンク | 文字色だけを変える | 下線など、色以外の見分け方を用意する |
| グラフ | 系列を色だけで分ける | ラベル、線種、模様などを併用する |
グラフや表では、凡例の色を見比べ続けなくても内容を追えるように、系列名や値を近くに表示します。実装上の選択肢は、データ表とグラフのアクセシビリティガイドで詳しく確認できます。
ダークモードや淡い色も個別に検証する
ダークモードは、暗い背景に明るい文字を置けば自動的に読みやすくなるわけではありません。背景、本文、補足文、リンク、ボタン、境界線をダークモード用の組み合わせとして測り直します。ライトモードで見えていた入力欄の枠やフォーカス表示が、暗い背景に埋もれていないかも確認します。
ダークモードを実装する場合は、ダークモードと高コントラスト対応の設計ポイントも参考になります。
パステルカラーや中間色も、「目に優しい」という印象だけで採用せず、文字と背景の組み合わせを測ります。淡い文字を明るい背景に置くと差が小さくなりやすいため、本文よりも装飾や広い背景に使うなど、役割を分けると調整しやすくなります。鮮やかな色は強調に使えますが、色だけで重要度を示さないことが前提です。
カラーユニバーサルデザインを実践する
カラーユニバーサルデザインは、色の見え方の違いにかかわらず、情報を受け取りやすくする考え方です。特定の色を避けるだけではなく、色を区別できない場合にも意味が残るように設計します。
- 「青を選んでください」だけで済ませず、「青（B）」のように文字ラベルを添えます。
- 地図やグラフでは、色に加えて模様、線種、形、直接ラベルを使います。
- 成功、注意、エラーの状態には、色だけでなく、状態名と説明文を表示します。
- 選択中の要素には、色の変化に加えて、枠線やチェック印などを用意します。
色の名前を表示するだけで十分とは限りません。「どの要素がどの状態か」を文字や形から判断できることまで確認します。
公開前の配色チェック手順
- 色の組み合わせを洗い出す：本文、見出し、リンク、ボタン、フォーム、通知、グラフを対象にします。
- コントラスト比を測る：通常の文字と大きな文字を分け、実際の文字色と背景色で確認します。
- 色だけの手がかりを探す：エラー、必須、選択中、リンク、グラフの系列を重点的に見ます。
- 別の手がかりを加える：ラベル、説明文、アイコン、下線、形、模様を用途に合わせて選びます。
- 表示状態を切り替えて再確認する：通常時だけでなく、選択時やフォーカス時、ライトモードとダークモードも確認します。
配色チェックの要点
- 通常サイズの文字は4.5:1以上、大きな文字は3:1以上を目安にします。
- 「黒」「青」「パステル」といった色名では判断せず、実際の組み合わせを測ります。
- エラーや選択状態は、色に加えて文字、形、線などでも伝えます。
- ライトモードとダークモードは、それぞれの配色で確認します。
当社では、ウェブアクセシビリティ対応を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。配色や表示調整を含むアクセシビリティ対応を検討している方は、サービスの詳細をご覧ください。