A proposed replacement contrast algorithm that models perception better than the WCAG 2 formula. Not yet the standard.

Colour Accessibility

Colour contrast checker

Text colour Background

Large heading text Body text at a normal size, which is the harder test of the two.

Contrast ratio 8.86:1

✓ AA text✓ AA large✓ AAA text✓ AAA large

Format

Calculated in your browser · nothing is uploaded

Local · luminance, not perceived difference

Calculates the WCAG contrast ratio between two colours and shows which conformance levels the pair passes: 4.5:1 for normal text at AA, 3:1 for large text, 7:1 for AAA.

How to use the colour contrast checker

1 Set your colour, by picker or by typing a hex value.

2 Switch the format if you need RGB, HSL or OKLCH rather than hex.

3 Tap any swatch to copy it, or copy the whole set at once.

The ratio is computed from relative luminance, not from how different the colours look — which is why a mid-grey on white and a mid-blue on white can score identically while looking nothing alike. Large text gets a lower threshold because size compensates for contrast, and "large" has a specific meaning: 18.66px bold or 24px regular, not merely bigger than the body copy. Two things the ratio does not cover: it says nothing about colour-blind users distinguishing two colours from each other, and WCAG 2 contrast is known to under-serve some combinations, which is why APCA exists as a proposed replacement.

Questions

What contrast ratio do I need? −

4.5:1 for normal text at AA, 3:1 for large text, and 7:1 for AAA.

What counts as large text? +

Does passing contrast make it colour-blind safe? +

Do icons and borders need contrast? +

What is APCA? +

Sources

W3C — WCAG 2.2 contrast minimum

Was this tool any good?

INTERNAL SIGNAL ONLY · WE USE IT TO FIND TOOLS WORTH REBUILDING