ウェブアクセシビリティに配慮した配色とは、特定の色を避けることではありません。
文字や操作部分を背景から見分けやすくし、色の違いが分からなくても情報や状態を理解できるように設計することです。
配色を決めるときは、見た目の印象だけでなく、コントラストと情報の伝え方を分けて確認します。
配色を決める前に確認したいこと
色の見え方や、明るさの差を感じ取る力には個人差があります。
そのため、「見栄えのよい色を選んだ」だけでは、読みやすさや操作のしやすさを保証できません。
配色設計では、次の二つを同時に満たす必要があります。
- 十分なコントラストを確保する：文字、背景、重要な視覚要素を区別しやすくします。
- 色だけで意味を伝えない：文字、形、アイコン、線、模様など、別の手がかりを添えます。
この二つは別の条件です。
赤と緑の明るさに十分な差があっても、「赤はエラー、緑は成功」という意味を色だけで示せば、状態を区別できない人がいます。
文字と背景のコントラストを測る
コントラスト比は、前景色と背景色の明るさの差を数値で表したものです。
感覚だけで判断せず、実際に使う文字色と背景色の組み合わせを測定します。
| 対象 | 目安となるコントラスト比 | 確認時の注意 |
|---|---|---|
| 通常の文字 | 4.5:1以上 | 本文、注釈、ボタン内の文字などを個別に確認する |
| 大きな文字 | 3:1以上 | 大きな文字に該当するか迷う場合は、4.5:1以上を目標にする |
測定には、WebAIM Contrast Checkerを利用できます。
文字色と背景色を入力し、通常の文字と大きな文字の判定を確認します。
基準に届かない場合は、色相を変えるだけでなく、文字をより暗くする、背景をより明るくするなど、明るさの差を広げます。
通常時以外の配色も確認する
ボタンやリンクは、通常時の色だけを測れば終わりではありません。
マウスポインターを重ねた状態、選択中の状態、エラー表示など、画面上で実際に現れる組み合わせも確認します。
サイト全体の検査方法を整理したい場合は、ウェブアクセシビリティチェックツールの使い分けも参考になります。
色だけに頼らず情報を伝える
十分なコントラストがあっても、色だけに意味を持たせると情報が伝わらない場合があります。
色は補助として使い、同じ意味を文字や形でも表します。
| 場面 | 色だけに頼る例 | 改善例 |
|---|---|---|
| 入力エラー | 入力欄の枠を赤くする | 枠色に加えて、「メールアドレスを入力してください」などの文を表示する |
| 成功と失敗 | 緑と赤の丸だけを表示する | 「成功」「失敗」という文字と形の異なるアイコンを添える |
| グラフ | 系列を色だけで分ける | 線種、模様、ラベルを併用する |
| 本文中のリンク | 文字色だけを変える | 下線など、色以外の見分け方を用意する |
エラーメッセージでは、「×」だけを置くより、何が起きていて、どう直せばよいかを文章で示すほうが明確です。
グラフやチャートの具体的な設計は、色だけに頼らないグラフとデータ可視化の設計で詳しく確認できます。
色名を書くだけでは解決しない
「青を選んでください」のように色名を記すだけでは、画面上のどれが青なのかを見分ける必要が残ります。
色見本には色名を添えたうえで、選択中の項目にチェックマークと「選択中」という文字を表示するなど、操作結果も色以外で伝えます。
明るさと彩度を一律に決めない
明るさは色が明るく見える度合い、彩度は色の鮮やかさの度合いです。
どちらも画面の印象に影響しますが、「パステルカラーなら目に優しい」「鮮やかな色は使わないほうがよい」と一律には判断できません。
淡い文字と淡い背景を組み合わせると、落ち着いて見えてもコントラストが不足することがあります。
一方、鮮やかな色は、重要な箇所を見つける手がかりとして使えます。
色の名称や印象ではなく、用途を決め、実際の組み合わせを測定して採用します。
代表的な配色をどう評価するか
白い背景と黒い文字
白と黒は明るさの差を確保しやすい組み合わせです。
ただし、読みやすさは配色だけで決まらないため、文字の大きさ、行間、余白も併せて確認します。
ダークモード
ダークモードは、暗い背景に明るい文字を置く表示方法です。
利用者によって好みや見やすさが異なるため、ダークモード自体をアクセシビリティ対応とみなすことはできません。
通常表示と同じように、本文、リンク、ボタン、補足文字の組み合わせを一つずつ測定します。
設計と検証の詳細は、ダークモードと高コントラスト対応のアクセシビリティガイドを参照してください。
青い背景と白い文字
「青と白」という色名だけでは、見やすさを判定できません。
濃い青と白は十分な差を作れる場合がありますが、淡い青と白では文字を識別しにくくなる場合があります。
ブランドカラーを使うときも、実際のカラーコードで測定し、基準に届かない組み合わせは文字や背景に使わない判断が必要です。
カラーユニバーサルデザインの考え方
カラーユニバーサルデザイン（CUD）は、色の見え方の違いにかかわらず、情報を受け取りやすくする設計の考え方です。
特定の配色パターンを当てはめるのではなく、色以外の手がかりを用意し、情報の区別が保たれているかを確認します。
- 色の違いを正確に見分ける操作を利用者に求めない
- 文字、形、線種、模様、アイコンを目的に応じて組み合わせる
- 隣り合う色や、文字と背景の組み合わせを実際に測定する
- 色を変えたときも、選択中、成功、警告などの状態名を表示する
公開前の配色チェックリスト
- 本文と背景のコントラスト比が4.5:1以上になっている
- 大きな文字に3:1を適用する場合は、文字の大きさを確認している
- エラー、成功、選択中などの状態を色だけで表していない
- リンクを本文の文字色だけで区別していない
- グラフの系列にラベル、線種、模様などを併用している
- 通常表示とダークモードをそれぞれ測定している
- 通常時だけでなく、選択中やエラー表示の配色も確認している
検査ツールの合否は、確認の出発点です。
最後に画面を操作し、情報の意味と次の操作が色を見分けなくても理解できるかを確かめます。
当社では、ウェブアクセシビリティ対応を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。
アクセシビリティ向上に関心のある方は、サービスの詳細をご覧ください。