Color Contrast Checker

A good contrast ratio meets WCAG AA: normal body text needs at least 4.5:1 and large text at least 3:1. For the stricter AAA level, normal text needs 7:1 and large text 4.5:1. A ratio of 1:1 means the colours are identical; the maximum is 21:1 (black on white). This checker shows the exact ratio and whether it passes each level.

The contrast ratio is calculated from relative luminance: each colour's red, green and blue channels are gamma-corrected and weighted by perceived brightness (green counts most, blue least). The ratio is the lighter luminance plus 0.05 divided by the darker luminance plus 0.05, exactly as WCAG defines it. It reflects perceived brightness, so two very different hues can still fail.

Yes — large text gets a lower bar. At 24px and up for regular weight, or 18.66px and up for bold, it only needs 3:1 for AA and 4.5:1 for AAA, versus 4.5:1 and 7:1 for normal text. This checker reports both so you can see which combinations pass.

Nothing is uploaded or saved. The checker runs entirely in your browser. The colours you enter never leave your device, and nothing is stored. There is no sign-up, and it works offline once loaded. Use the pickers or type hex values, and swap the two colours with one button.