What contrast ratio is needed for WCAG AA?

WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text.

What counts as large text for contrast rules?

Large text is 18pt (about 24px) or larger, or 14pt (about 18.66px) bold or larger. Large text has a lower contrast requirement because bigger letters are easier to read at lower contrast.

Why does color contrast matter?

Sufficient contrast makes text readable for people with low vision or colour-blindness, and in bright sunlight on mobile. It's also a legal accessibility requirement (WCAG) for many websites and improves usability for everyone.

Color Contrast Checker

Check colour contrast against WCAG AA and AAA accessibility standards

Runs locally in your browser🆓Free — no sign-up🔒100% Private

Insufficient colour contrast between text and its background is one of the most common web accessibility failures. A designer's beautiful light-grey text on a white background might look fine on their monitor but becomes unreadable on mobile in sunlight, and it fails WCAG accessibility standards that carry legal weight. Choosing a colour pair without checking contrast ratios is a common source of costly accessibility rework late in a project. A contrast checker tool lets designers test combinations instantly and confirm they meet WCAG AA or AAA thresholds before committing to the design. Developers implementing a design often discover that the hex codes supplied don't actually meet accessibility standards when tested — using a contrast checker during development prevents this from reaching staging or production. QA engineers auditing a site for accessibility issues need a fast way to verify every colour combination meets standards. Content creators adding coloured text overlays to images also benefit from instant feedback. This tool shows the exact contrast ratio between foreground and background colours, displays WCAG AA and AAA pass/fail status for both normal and large text, and renders a live preview so you can see the combination in context before using it. All calculation happens locally in your browser, and the tool supports any colour format you have handy.

Almost before we knew it

we had left the ground. This is how your text looks on this background.

5.70 : 1

Contrast ratio (WCAG 2.1)

Text colour

Background colour

Normal text

WCAG AA (4.5:1)Pass

WCAG AAA (7:1)Fail

Large text (18pt+/14pt bold)

WCAG AA (3:1)Pass

WCAG AAA (4.5:1)Pass

How to use Color Contrast Checker

1.Pick a text colour by clicking the colour picker or entering a HEX code in the text colour field.
2.Pick a background colour using the colour picker or by typing a HEX code.
3.See the contrast ratio calculated instantly, shown as a decimal (e.g., 4.5:1).
4.Check whether the combination passes WCAG AA or AAA for normal text and large text — pass indicators show green.
5.Use the live preview text area to see exactly how your chosen colours look together in context.

Key Features

✓

WCAG AA & AAA standards — Automatically checks whether your colour pair meets WCAG 2.1 AA (4.5:1 normal, 3:1 large) and AAA (7:1 normal, 4.5:1 large) thresholds.

✓

Live text preview — See exactly how your foreground and background colours look together in a full text sample before using them.

✓

Exact contrast ratio — The tool shows the precise contrast ratio (e.g., 7.2:1) so you understand how much margin above the minimum you have.

✓

Separate normal & large text assessment — Different contrast thresholds apply to large text (18pt+), and the tool shows pass/fail for both separately.

Frequently Asked Questions about Color Contrast Checker

Enter your text colour and background colour above. The tool calculates the WCAG contrast ratio and shows whether it passes AA and AAA for both normal and large text, with a live preview so you can see the combination in context.