How to choose accessible color contrast
Check text and background colors against WCAG contrast guidance, then test the finished component in realistic states.
Contrast is a relationship between two colors, not a quality one color possesses alone. The same blue can pass on white and fail on a slightly darker panel, especially at small text sizes.
Key takeaways
- Test the exact foreground and background pair.
- Use 4.5:1 for normal text and 3:1 for qualifying large text under WCAG AA.
- Check hover, disabled, focus and error states—not only the default.
Measure the real pair
Sample the actual text color and the background directly behind it. If an image or gradient sits underneath, test the least favourable area.
Know the common thresholds
WCAG 2.2 Level AA calls for at least 4.5:1 for normal text and 3:1 for large-scale text. Enhanced AAA targets are higher.
Do not rely on size alone
Thin fonts, anti-aliasing and bright environments can make technically large text difficult to read. More contrast is often the safer design choice.
Test every state
Links, buttons, placeholders, focus rings and error messages can use different colors from the default component. Each meaningful state deserves a check.
Use more than color
Contrast does not solve instructions such as “fields in red are required.” Pair color with text, icons, shapes or patterns so meaning survives limited color perception.
Final check
Use the contrast ratio as a baseline, then look at the complete component with real content, realistic size and keyboard interaction.