WCAG Color Contrast Checker
Check the contrast ratio of two colors against the WCAG AA and AAA levels.
🔒 Client · OfflineEach field accepts HEX, RGB, HSL, and OKLCH. The picker sets the opaque color and keeps the alpha of the field. The ratio uses the opaque color, because WCAG needs the color that the user sees.
14px regular — the quick brown fox jumps over the lazy dog.
18.66px bold — the quick brown fox jumps over the lazy dog.
24px regular — the quick brown fox jumps over the lazy dog.
Button label5.70:1
| Text size | AA | AAA |
|---|---|---|
Normal text Below 24px | Pass | Fail |
Large text 24px, or 18.66px bold | Pass | Pass |
Lightness fix
- For AAA, set the background to #6f26dd. The ratio becomes 7.01:1.
About contrast
Contrast ratio helps people read text on a background.
WCAG AA for normal text needs a ratio of at least 4.5:1. AAA needs 7:1.
Large text has a lower bar. Text of 24px, or 18.66px in bold, needs 3:1 for AA and 4.5:1 for AAA. The table shows both results, so you can see where a color pair is usable.
The tool calculates the ratio while you type. Use Swap to exchange the text color and the background, which is the quickest test of a dark theme.
The preview shows the pair at 14px regular, 18.66px bold, and 24px regular. It also shows a button. Use it to see the pair at the sizes that the table reports.
Share puts the pair in the link. The link opens the tool with both colors, and it shows the ratio. The tool sends no color to a server.
APCA is the Accessible Perceptual Contrast Algorithm. It is a draft candidate for WCAG 3, and it is not a W3C recommendation. It reports a lightness contrast score, Lc, from about -108 to 106. A negative score is light text on a dark background. The tool shows the score and the draft font size thresholds when you turn the row on.
When a pair fails, the tool suggests the smallest lightness change that makes it pass. The change keeps the hue and the chroma of the color, so the color stays near the original. The tool changes the text color or the background, and picks the one that needs the smaller change.