Colour Contrast Checker
Enter a text and background colour — you get the contrast ratio and a live sample.
How to use
Colours can be written any usual way: #1a1a1a, rgb(20, 20, 20) or a name like teal. The swap button flips them, which is handy for checking a light and a dark theme. Below you can see whether the pair passes AA and AAA.
AA is the level accessibility law and most company standards ask for: a ratio of at least 4.5 for normal text and 3 for large text. Large means 24px, or 19px in bold — the threshold is gentler there because thicker letters are easier to read.
FAQ
What does the contrast ratio mean?
It is the ratio between the lighter and darker colour's luminance. The minimum is 1 (identical colours) and the maximum 21 (black on white). It follows the WCAG formula, which accounts for the eye perceiving brightness non-linearly.
How is AAA different from AA?
AA is the practical minimum required by legislation and most corporate standards: 4.5 for normal text. AAA is stricter at 7, and is mainly applied to body text in products where accessibility is a priority. Demanding AAA across an entire interface is usually unrealistic.
What counts as large text?
24px at normal weight, or 18.66px bold. Those sizes get lower thresholds: 3 for AA and 4.5 for AAA.
Should I check icons and borders too?
Yes — WCAG asks for at least 3 for interface elements and graphics. Enter the icon colour and the background the same way as for text and read the large-text row.