ガイド
避けたいアクセシビリティ配色コントラストのミス
デザインと実装で繰り返される代表的なコントラストの失敗を整理します。
コントラスト問題の多くは同じパターンです。チェック時期が遅い、状態を網羅しない、比率を見ないことが主因です。
Mistake: checking only default state
Hover, focus, disabled, and active states often fail while default passes.
Always test full component state sets.
Mistake: treating brand colors as untouchable
Brand identity can stay intact while adjusting lightness for readability.
Document accessible alternates for text and interactive UI use.
Mistake: testing large text only
Body copy and helper text require stricter contrast thresholds.
Include small text in every accessibility review.
Mistake: skipping real-background testing
A color can pass on white but fail on cards, banners, and gradients.
Validate color pairs in real layouts.
Useful for
- Design QA checklists.
- Frontend accessibility reviews.
- Component library updates.
Prevent mistakes upstream
Catch contrast problems in design tokens and component specs, and you will fix fewer issues later in QA.