色覚の多様性に配慮したUI：色だけに頼らず状態を伝える

色覚の多様性に配慮したUIでは、特定の色を見分けなくても重要な情報を理解できるようにします。色を手がかりとして使いながら、意味を持つ箇所には分かりやすい言葉、形、模様、配置を組み合わせます。赤いエラー枠には説明を、選んだ予約時間には選択中と分かる表示を、使えない操作にはその理由を添えます。

配色だけを入れ替えるのではなく、一連の作業から考えましょう。この記事では、時間を選び、情報を入力し、予約を確定する画面を例にします。PixsoのUIデザインワークスペースで各状態を並べ、時間の選択から予約完了まで、情報の意味が伝わるかを確認します。

色だけで判断しなければならない箇所を探す

顧客の立場で予約画面を見てみます。必要なのは、予約できる時間、選んだ時間、入力内容に修正が必要か、予約が完了したかという情報です。いずれかの答えが「緑色のものを見る」になっているなら、色以外の見える手がかりを加える必要があります。

初期案では、予約できる時間を緑、予約できない時間をグレー、選択した時間を青で表示しているとします。メールアドレスが正しくないと、入力欄に赤い枠が付きます。デザイナーには色の違いが明確でも、顧客はそれぞれの変化が何を意味するかを読み取らなければなりません。

まず、意味の伝え方を見直します。各選択肢には時刻を表示したままにします。選んだ時間にはチェックマークと「選択中」、予約できない時間には「予約不可」を付けます。入力エラーのそばには、「name@example.comの形式でメールアドレスを入力してください」のような説明を置きます。色はこれらの情報を補強できますが、単独で伝える手段にはしません。

WCAGの「色の使用」に関する解説（英語）では、色の違いで伝える情報について、別の視覚的な方法でも分かるようにすることを求めています。画面を見ていても色を区別しにくい人に対しては、スクリーンリーダー用のラベルだけを追加しても、色だけの手がかりは解消されません。

それぞれの状態を、見て理解できるようにする

色を補う手がかりは、状態を素早く一貫して伝えるものにします。予約では「選択中」と「予約確定」の違いが重要なため、文字による説明が役立ちます。チェックマークはどちらにも使えますが、同じマークだけを置くと、時間を選んだ時点で予約が完了したように見えるおそれがあります。

装飾用の図形すべてに文字を付ける必要はありません。状態を理解したり操作を選んだりする箇所で、明確な手がかりを使います。長い一覧で「予約可」が繰り返されて読みにくい場合は、「予約できる時間」という見出しの下へまとめる方法もあります。ただし、予約不可や選択中といった例外は、それぞれの場所で識別できるようにします。

最も狭い想定レイアウトでも、手がかりを読み取れるようにします。スマートフォンで見分けられなくなるほど小さなチェックマークでは、役に立ちません。時刻と状態を表示する余裕がなければ、両方の文字を縮めるのではなく、枠を広げるか、ゆとりのあるリストへ変えます。

コントラストは別の観点として確認する

色相が違っていても、文字や必要な目印に十分な明暗の差があるとは限りません。逆に、コントラストが高い色の組み合わせだけでは、状態の意味までは伝わりません。「情報が見えるか」と「意味が分かるか」の両方を確認します。

WCAG 2.2の文字コントラストの解説（英語）では、所定の例外を除き、通常の文字で4.5:1、基準を満たす大きな文字で3:1以上のコントラスト比を求めています。予約欄の小さな時刻や状態ラベルは、通常の文字として確認します。状態ごとに、実際の文字色と背景色の組み合わせを測定してください。

選択中の枠では、文字だけでなく、チェックマークと背景の関係も確認します。非テキストのコントラストに関する解説（英語）では、操作可能なコントロールやその状態を識別するために必要な視覚情報について、原則として隣接する色との3:1以上の比率を求めています。すべての装飾枠や、異なる状態の色同士に、その比率が必要という意味ではありません。

選択中の塗りを、そのまま唯一のフォーカス表示にしないようにします。キーボードで時間を移動する人には、現在フォーカスがあるコントロールと、すでに選んだ時間の両方が分かる必要があります。フォーカスには独立した視覚表現を用意し、選択状態とは分けて仕様を伝えます。

エラーとリンクの意味を明確にする

予約フォームでは、問題が起きた場所で直し方を伝えます。「赤い項目を確認してください」では、色の意味を読み解き、ページ内を探す負担が生まれます。メールアドレス欄のそばに「メールアドレスを入力してください」と表示すれば、対応すべき箇所が分かります。複数の修正が必要な場合は、上部のエラー一覧から該当欄へ移動できるようにする方法もあります。

入力後も項目のラベルを残します。どの質問に答えていたかが分かれば、エラーメッセージも理解しやすくなります。入力済みの値を保持し、最初からやり直さずに修正できるようにします。

説明文の中に「キャンセルポリシー」というリンクを置く場合、下線は周囲の文章との分かりやすい区別になります。タッチ操作ではマウスホバーに頼れないため、触れる前からリンクだと分かる表示にします。リンクの文言も、文字の色ではなく、何が開くかを示します。

確認メッセージも同じ考え方です。「火曜日の10:30に予約が確定しました」なら結果が伝わります。「成功」と書いた色付きのバッジだけでは、必要な情報が不足します。予約がまだ保留中なら、そのように伝えます。システムが確定していない約束を、見た目だけで成立したように見せないことが大切です。

Pixsoで予約の流れ全体を作る

時間の選択、メールアドレスにエラーがある入力画面、予約の確認画面という3画面を並べます。選択した時間は全体で統一します。画面のそばには、再利用する時間枠の状態も並べます。レイアウトが変わっても、選択中や予約不可の表現がぶれないようにするためです。

この例では、09:00を予約可、10:30を選択中、11:00を予約不可にします。予約内容の要約にも10:30を表示し、完了画面にも同じ予約を示します。同じ時刻を繰り返すことで、顧客が自分の選択を確認でき、レビュー時にも不一致を見つけやすくなります。

見た目の状態と、意図する動作は近くにまとめます。実装担当者への説明では、フォーカスと選択の違い、一覧に残す予約不可の時間、エラーと入力欄の関連付けを明確にします。見た目を作っただけでは、実装される部品のアクセシブルな名前やキーボード操作は決まりません。それらの情報も実装へ引き継ぐ必要があります。

繰り返し使う色と文字の役割には共有スタイルを使います。ただし、状態の名前を色だけで付けることは避けます。「予約時間・選択中」ならテーマが変わっても意味が残ります。「青いバッジ」は現在の見た目しか表さず、無関係な意味にも同じ表現を使ってしまいやすくなります。

色がある場合とない場合で、作業を確認する

一時的に色を外し、予約の内容を理解できるか確認します。予約できる時間を見つけ、選んだ時間を確かめ、メールアドレスを修正し、予約完了を判断できることが必要です。これは設計を素早く確かめる方法であり、あらゆる色覚の見え方を再現するものではありません。

色覚シミュレーションは、見直すべき色の組み合わせを探す手がかりになります。ただし、一つの表示がすべての人の見え方を代表するわけではありません。コントラストの測定と、実際のラベル、記号、状態の確認を組み合わせます。可能であれば、多様な視覚特性を持つ人にも、実装した画面で課題に取り組んでもらいます。

製品がライトテーマとダークテーマに対応している場合は、両方を確認します。明るい背景で読めるバッジでも、暗い背景では境界が分からなくなることがあります。意味と手がかりを保ちながら、文字や記号と背景の具体的な組み合わせを調整します。すべての色を単純に反転するだけでは、別の問題が生まれることがあります。

アクセシビリティ検証ツールのガイド（英語）では、設計時のコントラスト確認とブラウザーでの検証が補い合う関係を解説しています。完成した予約の課題を検証に使えば、結果を実際に必要な利用体験へ結び付けられます。

色を役立てながら、色だけに頼らないUIにする

色は、予約できる時間を探しやすくしたり、予約完了を安心して受け取れるよう強調したりするために使えます。同じ情報が時刻、状態を示す言葉、記号、要約にも表れていれば、より確実に伝わります。

この流れで重要なのは、選べるもの、選んだもの、修正が必要な箇所、完了したかどうかを顧客が判断できることです。まずそれらの答えを見える形にし、そのうえで配色を整えましょう。

Pixsoで状態が伝わるUIを設計する