先に結論通常・選択・無効・エラー・完了を色以外でも識別し、実機と文字拡大で確認します。
本文と操作文字のコントラストを測る
薄い灰色の本文、画像上の文字、無効ボタン、入力例は読みづらくなりやすい部分です。通常、ホバー、フォーカス、押下、無効の各状態で背景との違いを確認します。
ブランド色をそのまま細い文字へ使わず、背景や太さを調整します。数値基準だけでなく、屋外、明るい画面、古い端末でも実際に読みます。
状態を文言と形でも示す
未入力、確認待ち、差し戻し、完了をラベル文言で示し、色だけで判断させません。警告アイコンだけでなく、対象と次の行動を短く表示します。
グラフは色に加えて凡例、模様、直接ラベルを使います。表をモノクロ印刷しても項目を区別できるか確認します。
選択・フォーカス・無効を混同しない
選択中のタブ、キーボードフォーカス、押せないボタンを別の見た目にします。淡い背景だけではなく、枠、下線、チェック、aria属性など状態に合う方法を使います。
無効ボタンだけを置いて理由を示さず、必要な入力や権限を近くに説明します。押せるようになる条件を利用者が推測しない画面にします。
画面・印刷・高コントラストで試す
PC、スマホ、タブレット、プロジェクター、PDF・印刷で確認します。OSの高コントラストや文字拡大でも、アイコンと状態が消えないかを見ます。
デザイン変更後に代表画面だけでなく、エラー、空状態、長い文言、選択状態を画像監査します。色の調整でブランド認識より操作性が落ちないようバランスを取ります。
相談前にそろえるもの
- 文字・背景のコントラスト
- 色以外の状態文言
- グラフ・印刷
- 選択・フォーカス・無効
- 屋外・高コントラスト
全部そろっていなくても構いません。分かる範囲を確認し、業務ルールや金額に関わる部分は担当者と一緒に決めます。