Colour Contrast Checker

How to use the colour contrast checker

1. Enter or pick the text colour and the background colour.
2. Read the ratio and the pass or fail result for each level.
3. Adjust lightness until the combination passes at the size you are using.

About this tool

WCAG expresses legibility as a contrast ratio between the relative luminance of two colours, from 1:1 (identical) to 21:1 (black on white). Normal body text needs at least 4.5:1 to meet AA and 7:1 to meet AAA. Large text — 24px, or 18.66px bold — needs 3:1 and 4.5:1. Interface components and meaningful graphics need 3:1.

The ratio is computed from luminance, not from how different the colours look, which is why two mid-tone colours can feel distinct and still fail. It is a floor rather than a target: passing AA means the text is readable, not that it is comfortable.

Common uses

• Checking a brand palette before it is used for body text.
• Verifying that placeholder and disabled states remain legible.
• Fixing an accessibility audit finding about low contrast.

Frequently asked questions

What counts as large text?

At least 18.66px bold or 24px regular. Below that, the 4.5:1 requirement for normal text applies.

Does the check apply to logos?

No. Logotypes are exempt from the contrast requirement, though a low-contrast logo is still hard to see.

Is passing AA enough?

It is the level most policies require. AAA is stricter and worth aiming at for long-form reading, but it is not expected for entire interfaces.