Contrast checker
Test any text and background pair against WCAG 2.2, see color-blind previews and get the nearest passing color.
Normal body text that people actually need to read on your website.
Button labelHow it looks with color blindness
Tip: the page link updates as you type, so you can share a color pair with your team.
How contrast requirements work
WCAG 2.2 level AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (about 24px, or 18.5px bold) and for meaningful UI parts like input borders and icons. Level AAA raises normal text to 7:1.
The ratio compares the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). Hue doesn't matter much, lightness does, which is why bright orange and yellow brand colors often fail with white text.
Learn more
Want experts to fix it for you?
Bad Design designs and builds B2B websites that turn visitors into leads.