Accessibility
文字と背景のコントラスト不足を直す
コントラスト不足は視力や環境に関係なく読みにくさを生みます。ブランドカラーを保つ場合も、文字サイズ、背景、太さ、用途を合わせて調整します。
ui.design: contrast-pixelui.design: contrast-domui.design: color-contrast
まず確認する症状
- 薄いグレー文字や淡い背景上の文字が読みにくい。
- 画像やグラデーション上の文字が場所によって潰れる。
なぜ問題か
- 読みにくい説明はCV導線やフォーム完了率にも影響します。
- 自動検査で繰り返し検出されやすく、同じデザイントークンから再発します。
診断で見る指標
WCAGコントラスト比
スクリーンショット上のピクセル実測
状態色以外の手がかり
デザイントークン
修正方法
最小修正
文字色か背景色を調整する
本文、小さい文字、リンク、disabled風に見える通常文字から優先して直します。
推奨修正
トークン単位で直す
単発CSSではなく、text-muted、border、accentなどの共通値を見直します。
さらに改善
画像上文字の代替レイアウトを用意する
画像に暗幕を足すだけでなく、本文を画像外へ出す案も検討します。
受け入れ条件
- 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
- 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
- 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
コーディングエージェント向け修正指示
目的: contrast系所見の対象を確認し、共通カラー変数または該当コンポーネントで読みやすい文字色・背景色に修正してください。状態は色だけでなくテキストや形でも示してください。
参考資料
よくある失敗
- 対象箇所だけを個別styleで直し、同じmuted色の再発を残す。
- 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
- 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。