Contrast Checker

Read the ratio, and whether it passes AA and AAA.

FREE - NO SIGN-UP - RUNS ON YOUR DEVICE

Runs in your browser tab

  • 2colors in
  • 1ratio out
  • AAand AAA
  • 0uploads
Specification

Contrast Checker at a glance

Input
Two colors: text and background
Output
A ratio, and AA or AAA at two sizes
Method
WCAG relative luminance and ratio
What it does not cover
Contrast of one pair, nothing else
Price
Free
Account required
None
Where processing happens
On your device
How to

How to use Contrast Checker

  1. 1

    Set the two colors

    Set both colors.

  2. 2

    Read the ratio

    Read the ratio.

  3. 3

    Adjust until it passes

    Adjust until it passes.

Questions

Frequently asked questions

Does passing the ratio make my page accessible?

No. It means one pair of colors is legible enough. Focus states, labels, reading order and alternatives are all still yours to check.

Why is large text judged separately?

Bigger letterforms stay readable at a lower ratio, so the standard sets an easier bar for them. The panel marks both, so you see which one you meet.

Which colors should I put in?

The color the text is actually painted in, and the color directly behind it. A gradient or an image behind text has no single value to test.

Is anything sent anywhere?

No. The two colors are compared in this browser tab, and nothing is uploaded or kept in an account.

Background

Reading the result honestly

Set the two colors. The ratio appears with pass or fail against AA and AAA, marked separately for normal and large text, over a live sample of the pair.

  • If text sits on a translucent layer, work out the color that actually results and test that.
  • Placeholder text, disabled states and icons carry meaning too, so test them as pairs of their own.
  • A pair that only passes at large sizes will fail the moment someone reuses it for body text.
  • Contrast is one requirement among many, and a passing ratio is not a conformance claim.

Full specification

Specification of the Contrast Checker tool
InputA foreground color and a background color.
OutputThe contrast ratio, plus AA and AAA marked for normal and large text.
MethodWCAG relative luminance, then the standard contrast ratio between the two.
What it does not coverEverything else in an accessibility review: focus, order, labels and alternatives.
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