WCAG contrast checker
Contrast between text and background isn’t an aesthetic choice - it’s an accessibility requirement. If a color pair fails the WCAG threshold, some visitors physically won’t be able to read the text on the site.
Open the contrast checker tool
How it works
As soon as you pick a palette direction or change any color by hand, the service recalculates contrast for every meaningful pair: text on background, text on surface, text on a button. The result is a number from 1 to 21 and a pass/fail mark for the AA or AAA level.
What the levels mean
AA— minimum 4.5:1 for regular text, 3:1 for large textAAA— minimum 7:1 for regular text, 4.5:1 for large text
If a pair fails the check
The panel at the bottom of the screen highlights unreadable pairs and suggests the closest color from the same palette that passes the threshold, without breaking the overall mood of the direction.