Accessibility
文字と背景のコントラスト不足を直す
コントラスト不足は視力や環境に関係なく読みにくさを生みます。ブランドカラーを保つ場合も、文字サイズ、背景、太さ、用途を合わせて調整します。
ui.design: contrast-pixelui.design: contrast-domui.design: color-contrast
まず確認する症状
- 薄いグレー文字や淡い背景上の文字が読みにくい。
- 画像やグラデーション上の文字が場所によって潰れる。
- 自動検査で同じ種類の所見が複数箇所に出ているのに、原因がコンポーネント単位で整理されていない。
- 見える状態だけ整っており、名前、役割、順序、代替テキスト、拡大時の状態が検証されていない。
なぜ問題か
- 読みにくい説明はCV導線やフォーム完了率にも影響します。
- 自動検査で繰り返し検出されやすく、同じデザイントークンから再発します。
- アクセシビリティ修正は個別箇所の穴埋めではなく、再利用コンポーネントと入力・ナビゲーションの契約を直す作業です。
- WCAGの達成基準に対応する根拠を残すと、人間レビュー、AI修正、再スキャンの判断が揃いやすくなります。
診断で見る指標
WCAGコントラスト比
スクリーンショット上のピクセル実測
状態色以外の手がかり
デザイントークン
該当WCAG達成基準
再利用コンポーネントでの再発有無
キーボードだけでの完了可否
スクリーンリーダーが読む名前と状態
通常文字/大きな文字の必要比率
画像上文字
状態色
共通トークンの影響範囲
修正方法
最小修正
文字色か背景色を調整する
本文、小さい文字、リンク、disabled風に見える通常文字から優先して直します。
推奨修正
トークン単位で直す
単発CSSではなく、text-muted、border、accentなどの共通値を見直します。
さらに改善
画像上文字の代替レイアウトを用意する
画像に暗幕を足すだけでなく、本文を画像外へ出す案も検討します。
受け入れ条件
- 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
- 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
- 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
- 04該当所見が単発修正か共通コンポーネント由来かを分け、再発しやすい原因を修正している。
- 05自動検査だけでなく、キーボード操作、拡大表示、読み上げ名、スマホ操作のうち該当する観点を確認している。
- 06本文、補足、リンク、フォーム、エラー、disabledではない通常文字が、背景と十分に区別できる。
- 07色だけで状態を伝えず、テキスト、アイコン、形、aria状態のいずれかを併用している。
コーディングエージェント向け修正指示
目的: contrast系所見の対象を確認し、共通カラー変数または該当コンポーネントで読みやすい文字色・背景色に修正してください。状態は色だけでなくテキストや形でも示してください。 追加確認: 単発の色変更ではなく、muted、accent、danger、linkなどの共通トークンが他画面へ与える影響も確認してください。
参考資料
よくある失敗
- 対象箇所だけを個別styleで直し、同じmuted色の再発を残す。
- 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
- 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。
- ariaを追加して見た目と機械可読名を矛盾させる。
- 自動検査の消滅だけを完了条件にし、実際に操作できるかを確認しない。