Color contrast checker
Check two colors against WCAG 2.2 (AA and AAA, for normal and large text) and APCA. It all runs in your browser, and nothing is uploaded.
Colors
WCAG 2.2 contrast ratio
4.54:1
AA normal textPass
AA large textPass
AAA normal textFail
AAA large textPass
APCA Lc 71.6
Large text: 24px bold heading
Normal text: the quick brown fox jumps over the lazy dog. Body copy is what most people read.
Small text: 14px captions and footnotes are the first thing to become unreadable.
How this is calculated
- WCAG 2.x contrast ratio: (L1 + 0.05) / (L2 + 0.05) using sRGB relative luminance. We never round a ratio up, so 4.49:1 fails 4.5:1.
- Large text is at least 24px, or at least 18.66px and bold. AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 and 4.5:1.
- APCA Lc uses the APCA-W3 0.0.98G-4g constants. We show it as a guide; WCAG 2.2 uses the ratio above. Roughly, Lc 75 or more suits body text, 60 content text, 45 large headings and 30 non-text elements.
- "Suggest" keeps the hue of the color it changes and moves only its lightness (OKLCH). It picks lighter or darker, whichever is the smaller change.