Design Tool
Contrast Checker
Test foreground and background colours for WCAG contrast, preview UI states and copy an accessibility report.
WCAG contrast workspace
Enter colours as HEX, RGB or HSL, preview text and UI elements, then copy a shareable contrast report.
Colour inputs
Suggestions
This pair passes WCAG AA for normal text. Suggestions are still available if you want stronger contrast.
This pair passes AAA for normal text.
PrivacyYour colours are checked in your browser and are not uploaded.
Contrast results
Accessible interface preview
This paragraph shows how body copy appears with the selected foreground and background colours.
Example text linkDevKitYard Contrast Report Foreground: #0F172A Background: #FFFFFF Contrast ratio: 17.85:1 AA Normal Text: Pass AA Large Text: Pass AAA Normal Text: Pass AAA Large Text: Pass
How to Use Contrast Checker
- Choose a foreground text colour.
- Choose a background colour.
- Review the contrast ratio and pass results.
- Adjust colours until the combination meets your target.
FAQ
What does WCAG contrast mean?
WCAG contrast compares foreground and background colours to help judge text readability.
What is a good contrast ratio?
For normal text, WCAG AA generally requires at least 4.5:1 contrast.
Can I test brand colours?
Yes. Enter your brand foreground and background colours to check whether they are readable together.
Does passing contrast guarantee accessibility?
No. Contrast is important, but accessible design also depends on font size, layout, labels and interaction design.