What ratio do I need?

WCAG AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 for normal and 4.5:1 for large text.

What counts as large text?

Text that is at least 24px, or 18.66px if bold. Large text is allowed a lower contrast ratio.

How is the ratio calculated?

It uses the WCAG relative luminance formula for each colour, then compares the lighter and darker values as (L1 + 0.05) / (L2 + 0.05).

Developer Tools

WCAG Color Contrast Checker

Check colour contrast ratio against WCAG AA and AAA accessibility levels.

Free browser toolRuns in your browserNo sign-up

WCAG accessibility diagnostics

Measure text contrast against AA and AAA thresholds

Preview a foreground/background pair, calculate its WCAG contrast ratio and see the exact normal- and large-text outcomes.

7.58:1

ratio

Pass

AA normal

Pass

AAA normal

Colour pair

Hex RGB

Text colour

Background colour

Almost before we knew it

we had left the ground. The quick brown fox jumps over the lazy dog.

Contrast ratio

7.58:1

AA normalPass

AA largePass

AAA normalPass

AAA largePass

WCAG requires 4.5:1 for normal text (AA) and 7:1 for AAA. Large text (18.66px bold or 24px) needs 3:1 for AA and 4.5:1 for AAA.

Private by design. Input is processed inside this browser tab and is not sent to ToolsOnDuty.

About the WCAG Color Contrast Checker

Readable text needs enough contrast between the text and its background. The WCAG accessibility guidelines set minimum contrast ratios.

This checker computes the contrast ratio between two colours and shows whether it passes AA and AAA for normal and large text, with a live preview.

It helps you design interfaces that are readable for everyone, including people with low vision.

Key features

Live contrast ratio and preview
AA and AAA pass/fail for normal and large text
Colour pickers and hex input
Runs entirely in your browser

How to use

1Pick or enter the text and background colours.
2Read the contrast ratio and the AA/AAA results.
3Adjust the colours until they pass the level you need.

Examples

Grey on white

Input: #475569 on #FFFFFF

Output: About 7.5:1 - passes AA and AAA

A high ratio means the text is easy to read for most people.

Frequently asked questions

What ratio do I need?: WCAG AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1 for normal and 4.5:1 for large text.
What counts as large text?: Text that is at least 24px, or 18.66px if bold. Large text is allowed a lower contrast ratio.
How is the ratio calculated?: It uses the WCAG relative luminance formula for each colour, then compares the lighter and darker values as (L1 + 0.05) / (L2 + 0.05).

Open a related tool to prepare your files or refine the finished result.