Goal
Ensure that visual elements essential for understanding and interaction—such as buttons, form fields, icons, and focus indicators—have sufficient color contrast against adjacent colors.
This ensures users with low vision or color perception difficulties can clearly identify controls and their states.
Key Points
- Applies to UI components, graphics, and focus indicators, not just text.
- Contrast ratio must be at least 3:1 between:
- Component or graphical object and adjacent colors.
- Focus indicator and surrounding colors.
- Includes icons, borders, switches, form outlines, sliders, and states (hover, active, focus).
- Helps users identify controls even if they can’t distinguish colors well.
Short Summary
Every interactive or informative visual element must have strong visual contrast so users can perceive its shape, boundary, and state — even with reduced vision or color blindness.
Example Issues and Fixes
Low Contrast Button Outline
Fail
<div class="flex w-full flex-col items-center justify-center gap-8 p-8 text-center">
<button class="border border-gray-300 text-gray-700 bg-white px-4 py-2 rounded">
Submit
</button>
</div>
Pass
<div class="flex w-full flex-col items-center justify-center gap-8 p-8 text-center">
<button class="border border-gray-800 text-gray-900 bg-white hover:bg-gray-100 px-4 py-2 rounded">
Submit
</button>
</div>
Quick Checklist
- UI components (buttons, inputs, toggles) have ≥ 3:1 contrast with background.
- Graphical objects (icons, charts, lines) have ≥ 3:1 contrast with adjacent colors.
- Focus indicators and borders are clearly visible (≥ 3:1 contrast).
- Color is not the only visual cue for important information.
- Hover, active, and disabled states maintain sufficient contrast.