Web Design & Dev
Colour Contrast Checker
Check whether a text and background colour pair is readable and passes WCAG accessibility guidelines.
Runs entirely in your browser — nothing you enter is sent or stored.
How it works
Contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L is the relative luminance of the lighter and darker colour (WCAG 2.2). AA needs 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold) and UI components; AAA needs 7:1 and 4.5:1.
Frequently asked questions
Is contrast a legal requirement?
In many countries public-sector and larger commercial sites must meet WCAG AA. It is good practice for everyone — low contrast hurts every reader in bright sunlight.
Does brand colour have to pass?
Only where it carries text or meaning. Use a darker shade of the brand colour for text if the original fails.