Color
Contrast Checker
Check a foreground and background pair against WCAG AA and AAA.
Large heading text
Normal body copy at 18 pixels, the size used for most reading.
Small print at 14 pixels, the hardest case to pass.
2.38contrast ratio
AA normal text
needs 4.5:1
AA large text
needs 3:1
AAA normal text
needs 7:1
AAA large text
needs 4.5:1
AA UI components
needs 3:1
Guides that cover this
HEX, RGB, HSL and the newer colour spacesHow HEX, RGB, HSL, LCH and OKLCH relate to each other, why an HSL palette goes muddy in the mid tones, and what gamut clipping and alpha compositing do to the colour you get.Meeting WCAG colour contrast without guessingWhat a contrast ratio measures, the AA and AAA thresholds for text and interface components, and the grey-on-white mistakes that quietly fail every time.