Colour Contrast Checker (WCAG)

Enter a text colour and a background colour to get the WCAG contrast ratio and whether it passes AA / AAA for normal and large text. A live preview shows the actual combination.

Text colour

Background colour

The quick brown fox jumps over the lazy dog.

Large heading sample — 24px bold

Contrast ratio

14.68 : 1

Normal text

AA ✓AAA ✓

Large text (18.66px bold / 24px)

AA ✓AAA ✓

WCAG 2.1 requires 4.5:1 for normal text (AA), 3:1 for large text, and 3:1 for UI components and graphics. AAA asks for 7:1 / 4.5:1.

Related tools

Colour Converter (HEX, RGB, HSL)Convert a colour between HEX, RGB and HSL, with a picker.
Colour Palette GeneratorShades, complementary, analogous, triadic and tetradic sets.
CSS Gradient GeneratorBuild a linear or radial gradient and copy the CSS.

Free to use, no sign-up. Calculations run in your browser — nothing you type is sent to a server. These tools are for general information only, not professional advice. See the full tool list.