Design Tool
Contrast Checker
Check foreground and background colors against WCAG contrast rules. Preview real text, headings, links and buttons, then copy an accessibility report with AA and AAA results.
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.
StatusExcellent contrast
This pair passes AAA for normal text.
PrivacyYour colours are checked in your browser and are not uploaded.
Contrast results
Contrast ratio17.85:1AAA
AA Normal TextPass4.5:1 required
AA Large TextPass3:1 required
AAA Normal TextPass7:1 required
AAA Large TextPass4.5:1 required
Accessible interface preview
This paragraph shows how body copy appears with the selected foreground and background colours.
Example text linkContrast ratio17.85:1
WCAG levelAAA
Foreground#0F172A
Background#FFFFFF
DevKitYard 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
- Enter the foreground and background colors using HEX, RGB, HSL or the color picker.
- Review the live contrast ratio.
- Check AA and AAA results for normal and large text.
- Preview text, headings, buttons and links, then copy the contrast report.
FAQ
What contrast ratio do I need for WCAG AA?
Normal text generally needs at least 4.5:1, while large text generally needs at least 3:1.
What contrast ratio do I need for WCAG AAA?
Normal text generally needs at least 7:1, while large text generally needs at least 4.5:1.
Can I test brand colors?
Yes. Enter brand foreground and background colors to see whether the combination is readable.
Does contrast guarantee accessibility?
No. Contrast is one important check, but accessible interfaces also need clear labels, focus states, semantics and usable interactions.