Choose two solid colors
Enter #RGB or #RRGGBB foreground and background colors. Alpha channels, gradients and images are not supported.
Accessibility & design / Made for the task at hand
Good color.
Clearer reading.
Check contrast between two opaque HEX colors. See the exact WCAG threshold outcomes for normal and large text, with a live reading sample and CSV report.
Your wcag color contrast checker workspace
02 / SOURCE
03 / RESULT
Ready when you areContrast report
A little less work starts here.
Add your source, or try the example, then choose “Check my colors”.
Results are temporary. Download anything you want to keep.
Your original data is never changed.
◇ Local processing↧ Real, downloadable results⌁ No account required
A practical little workflow
From “I need to…” to done.
Read the threshold results
Check AA and AAA for normal and large text. Pass/fail uses the unrounded ratio, even when the displayed number rounds up.
Test it in context
Review actual font size, weight, states and surrounding colors in your design. Export a small report for handoff.
Before you get started
Useful answers.
Clear boundaries.
Built for a focused job.
Review important results before use.
What counts as large text?
At least 24 CSS pixels for normal weight, or about 18.67 CSS pixels when bold. AA requires 4.5:1 for normal text and 3:1 for large text, subject to WCAG exceptions.
Does passing mean my site is accessible?
No. This checks only color contrast for solid pairs. Accessibility also includes semantics, keyboard use, focus, content and many other requirements.
What about transparent colors or photographs?
Composite transparency against its actual background first. Gradients and images may vary across the text; test the least favorable area separately.
What happens to my data?
Working text and local files are processed in this browser tab and are not sent to a server or an AI service. Reloading clears this workspace. Optional analytics and feedback have separate privacy controls; see Privacy below.