Colour Contrast Checker
Check whether text and background colours meet WCAG accessibility contrast requirements.
About this tool
WCAG 2 (the standard behind UK and EU accessibility law, including the Public Sector Bodies Accessibility Regulations) asks for a contrast ratio of at least 4.5:1 for normal text at level AA, or 3:1 for large text (24px, or about 18.66px bold). Level AAA raises those to 7:1 and 4.5:1. Icons, input borders and other user-interface parts need 3:1 against what’s next to them. The ratio isn’t rounded up, so 4.49:1 fails even though it’s close.
Enter colours in any CSS format: hex, rgb(), hsl(), oklch() or a name such as navy. If the text colour is see-through, it’s flattened onto the background first, as a browser would draw it. When a pair fails, the tool suggests the nearest text or background colours that pass, keeping the same hue. You’ll also see the APCA score, the newer method proposed for WCAG 3 that better reflects how dark mode and thin fonts read; it’s for guidance only, as WCAG 2 is still the standard that applies.