DESIGN TOOLS

Colour Contrast Checker

Check text and background contrast against WCAG 2.2 AA and AAA thresholds.

4.45:1 contrast

AA normal text: Fail
AA large text: Pass
AAA normal text: Fail
AAA large text: Fail

Rounded for display; the exact ratio determines pass/fail.

Colour Contrast Checker settings

ColourChoose colourBackground colour

#2169F5
rgb(33, 105, 245)
hsl(220, 91%, 55%)

How to use Colour Contrast Checker

01
Choose a starting point
Use the example settings, enter your values or select an image where supported.
02
Adjust and review
Set foreground and background colours, review the ratio and compare the text-size requirements.
03
Copy or download
Preview the generated result, then copy the displayed values or download the file using the available controls.

This checks opaque sRGB colour pairs, not an entire page’s accessibility. Large text means at least 24 CSS px, or about 18.67 CSS px in bold. Pass/fail uses the unrounded ratio.