Contrast Checker

v1.0.1

Check WCAG colour contrast ratios between foreground and background colours.

Calculates the WCAG 2.1 luminance contrast ratio between a foreground and background colour, showing whether you pass AA (4.5:1) and AAA (7:1) for normal text, large text, and UI components.

How to use

→Enter foreground and background colours as HEX, RGB, or HSL.
→Green badges show WCAG AA/AAA pass; red badges show which levels fail.
→Adjust colours using the pickers until all required levels pass.

Foreground Colour

Background Colour

Large Text Sample

Normal text sample — the quick brown fox.

Contrast Ratio

17.06:1

AA Normal

< 18pt / 14pt bold · 4.5:1

Pass

AAA Normal

< 18pt / 14pt bold · 7:1

Pass

AA Large

≥ 18pt / 14pt bold · 3:1

Pass

AAA Large

≥ 18pt / 14pt bold · 4.5:1

Pass