今日の問い
色が消えても、成功と失敗を区別できますか。
30秒でつかむ
色は、装飾だけでなく状態と操作を伝えます。 ただし、色だけに意味を背負わせると、 見え方や利用環境によって情報が消えます。
色の役割、明暗差、色以外の手がかりを、 別々に確認します。
30秒図解 · LESSON 22
対比図
色は意味を補い、コントラストは判別を守る
色だけに頼らず、形、文字、位置と組み合わせます。
- 01色だけで示す
- 02色＋文字・形で示す
- 03低い判別性
- 04十分なコントラスト
CLUE · 見抜く手掛かり
白黒でも状態を区別できるか
TRAP · ありがちな罠
ブランド色をそのまま操作色にする
原則
まず、色の役割を名前で定義します。
blue-500より、action-primaryや
status-errorのように用途を表す名前を使います。
色相を変えても、役割を追跡しやすくなります。
次に、文字と背景のコントラストを測ります。 WCAG 2.2の達成基準1.4.3は、通常の文字に 少なくとも4.5対1を求めます。 大きな文字は3対1ですが、閾値は丸めません。 細い書体は数値以上に淡く見えることもあります。
ただし、コントラストに合格しても、 色だけで意味を伝えてよいわけではありません。 達成基準1.4.1は、操作、応答、状態の区別に、 色を唯一の視覚的手段として使わないよう求めます。
エラーなら赤に加えて、文言とアイコンを添えます。 選択中なら色に加えて、印や太さを変えます。 グラフなら色だけで系列を分けず、 線種、形、直接ラベルも使います。
最後に、通常、hover、focus、disabled、errorを並べます。 個別画面で色を決めるのではなく、 同じ状態が同じ意味に見えるかを確認します。
達成基準1.4.1の色への非依存と、1.4.3の最低コントラストを同じW3C勧告で確認する。
良い例と惜しい例
入力エラーの伝達
確認項目を切り替え、色がなくても意味が残る条件を比べてください。
確認項目を切り替え、色がなくても意味が残る条件を比べてください。
チェックはこのデモ内で条件を有効にした状態を示します。
3項目中2項目を満たしています（このデモ内の状態であり、WCAG適合判定ではありません）
AIへの指示例
目的: 予約変更画面の色役割と状態表示を定義する
制約: 色だけで成功、失敗、選択を伝えない。コントラスト比を推測で書かない
参照: visual-system.md、通常、hover、focus、disabled、errorの各状態
受入条件: 色名、用途、前景、背景、測定した比率、色以外の手がかりを表にし、通常文字は4.5対1以上にする
確認問題
セルフチェック
1. エラー欄の赤い枠は背景とのコントラストが十分でした。これだけでよいですか。
最終制作へ反映する
visual-system.mdの色と状態規則
文字体系までの成果物へ、色の役割、状態別の組み合わせ、測定したコントラスト比、色以外の手がかりを追記する。
Acceptance criteria
- 主要な文字と背景の組み合わせに測定値があり、WCAG 2.2 AAの最低値を満たす
- 成功、失敗、選択、フォーカスが色以外の文字または形でも区別できる
今日のまとめ
- 色は、見た目の名前ではなく意味の役割で管理する
- コントラストを測り、閾値を丸めず判定する
- 次は、規則を部品、状態、トークンへまとめる