WCAG Contrast Checker

WCAG AA and AAA, marked for both text sizes.

FREE - NO SIGN-UP - RUNS ON YOUR DEVICE

Runs in your browser tab

  • AAand AAA
  • 2text sizes
  • WCAGluminance formula
  • 0uploads
Specification

WCAG Contrast Checker at a glance

Input
Text color and background color
Calculation
Relative luminance, then a ratio
Levels reported
AA and AAA at two text sizes
Outside its scope
One criterion, not conformance
Price
Free
Account required
None
Where processing happens
On your device
How to

How to use WCAG Contrast Checker

  1. 1

    Enter the pair

    Enter the color pair.

  2. 2

    Read AA and AAA

    Read AA and AAA.

  3. 3

    Record or revise

    Record it, or revise the color.

Questions

Frequently asked questions

Does a passing ratio mean WCAG conformance?

No. Conformance covers many success criteria. This panel answers the contrast one for a single pair of colors, which is a small part of an audit.

Should I aim for AA or AAA?

AA is the level most policies name. AAA is stricter and is not always achievable across a whole design. The panel marks both, so the choice stays yours.

Does it test icons and borders?

It compares whatever two colors you enter. Non-text contrast has its own requirement with a different threshold, so record that separately.

Where does the calculation happen?

In this browser tab. The two colors are not uploaded, and no account or log holds what you tested.

Background

Using this in an audit

The ratio is worked out with the WCAG relative luminance formula, then marked against AA and AAA at both text sizes, with a sample of the pair to look at.

  • Record the pair, the ratio and the level together, so a later reviewer can repeat the test.
  • Test the state a user actually sees: hover, visited and disabled colors are separate pairs.
  • Text over a photograph has no single background value, so test the worst area behind it.
  • A design token that passes in one theme has to be retested in the other.

Full specification

Specification of the WCAG Contrast Checker tool
InputThe text color and the background color behind it.
CalculationWCAG relative luminance for each color, then the ratio between them.
Levels reportedAA and AAA, each marked for normal text and for large text.
Outside its scopeNon-text contrast, focus visibility, structure, and every other success criterion.
PriceFree. Supported by clearly labelled ads outside the working area.
Account requiredNo.
Where processing happensIn your browser tab. Your input is never uploaded.
Next step

Keep going with the same files

All color tools: Color tools on SPOTTOOLS