Colour Contrast Checker (WCAG)
Measure foreground against background, judge WCAG AA and AAA by text size, and suggest a colour that passes when it does not.
Runs in your browser: input and output are never sent to the server, and the platform does not store your input.
Output
Fill in the fields on the left, then run.
How to use
- 1Enter the foreground and background colours (use the swatch or paste #rrggbb).
- 2Set the real font size and weight — large text has a lower threshold.
- 3If it fails, apply the suggested colour or change the background instead.
FAQ
What is the difference between AA and AAA?
Normal text needs 4.5:1 for AA and 7:1 for AAA; large text needs 3:1 and 4.5:1. Most projects target AA, with AAA reserved for reading-heavy content.
Why does font size change the result?
The same colours read better at a larger size, so WCAG treats 24px (or 18.66px bold) and up as large text and drops the requirement from 4.5:1 to 3:1.
Do button borders and icons also need 4.5:1?
No. Non-text UI components and meaningful graphics need 3:1 (WCAG 2.1 success criterion 1.4.11), which the tool reports alongside the text results.
Does passing mean it reads well?
Not necessarily. The WCAG 2 formula is lenient on light-on-dark and ignores typeface weight and display. It is a floor, not the whole of a design review.
Is my input uploaded?
No. Everything is computed in your browser; no sign-in and no quota.