Skip to content

Colour contrast checker

Enter two colours to get the WCAG 2.2 ratio and a verdict for text and interface components. When a pair fails, this tells you the nearest colour that passes instead of leaving you to guess. Everything runs in your browser.

Contrast ratio
:1
The preview appears once both colours can be read.

Large text, 24px

Normal body text at 16 pixels. This is the size most of a page is set in, and the size WCAG holds to the stricter 4.5:1 threshold.

Interface component

Results

The verdicts appear once both colours can be read.

Nearest colours that pass

Same hue, adjusted until it clears the threshold. Click one to apply it.

Contrast covers two of the 55 criteria in WCAG 2.2 AA

Conforma scans a whole page against WCAG 2.2 AA and tests 20 of the 55 criteria automatically. It finds the contrast failures an automated check can measure, along with problems such as missing alt text and unlabelled controls, and gives you the fix for each one.

Scanning a page needs no account. The checks run on axe-core.

Common questions

What contrast ratio does WCAG require?

WCAG 2.2 Level AA asks for at least 4.5:1 between text and its background, or 3:1 for large text (18pt / 24px, or 14pt / 18.5px bold). Interface components and meaningful graphics, such as input borders and icons that carry meaning, need 3:1. Level AAA raises text to 7:1, and 4.5:1 for large text.

Does contrast apply to disabled controls and logos?

No. WCAG exempts text in an inactive control, pure decoration, text that is part of a logo or brand name, and text inside a picture that contains other significant content. Everything else on the page has to meet the ratio.

Why does my brand colour fail on white?

Mid-tone colours are the usual culprit. A saturated orange or light blue can look strong and still land near 3:1 on white. Keeping the hue and darkening the shade is normally enough, which is what the suggestions above do.

Is passing contrast enough to be accessible?

No. Contrast accounts for two of the 55 success criteria in WCAG 2.2 AA: 1.4.3 for text and 1.4.11 for interface components. An automated scan tests 20 of the 55, and the rest need a manual review. Contrast is a good place to start because it is objective and it affects every visitor in bright sunlight or with reduced vision.

Does this tool send my colours anywhere?

No. The calculation runs entirely in your browser. Nothing is uploaded, stored or logged.

Related: how to fix colour contrast failures, the European Accessibility Act.