RunTheTests

Contrast Checker (WCAG)

Check colour contrast against WCAG AA and AAA — the exact ratio, not an estimate.

System verdict

PASS

4.54:1 — passes AA

Fine for AA, which is what most standards require. It does not reach AAA for normal text — worth aiming for on body copy where you can.

Diagnostic telemetry
Contrast ratio
4.54:1
Foreground
#767676
Background
#ffffff
AA — normal textNeeds 4.5:1
Pass
AA — large text≥18pt, or ≥14pt bold. Needs 3:1
Pass
AAA — normal textNeeds 7:1
Fail
AAA — large textNeeds 4.5:1
Pass

What this cannot tell you

  • The ratio follows the WCAG formula exactly, but contrast is only one part of legibility. Font size, weight, spacing and the surrounding design all matter and none are measured here.
  • WCAG thresholds are minimums, not guarantees that text is comfortable — meeting AA is a floor, not a target.
  • It checks two solid colours. Text over an image or gradient has a contrast that varies pixel by pixel, which this cannot assess.

How this calculation works

The tool computes each colour’s relative luminance using the WCAG sRGB formula, then takes the ratio of the lighter to the darker. That ratio is compared against the four WCAG thresholds — AA and AAA, for normal and large text — and each is reported separately, because a ratio can pass one and fail another.

What the results mean

Contrast ratio
From 1:1 (identical) to 21:1 (black on white). Higher is more legible.
AA normal text
Needs 4.5:1. This is the level most accessibility standards and laws require for body text.
AA large text
Needs 3:1. Large means 18pt, or 14pt bold — headings usually qualify.
AAA
The stricter level: 7:1 for normal text, 4.5:1 for large. Worth aiming for on body copy where the design allows.

Common problems and fixes

My grey text just barely fails AA
Darken it slightly. #767676 on white is exactly 4.54:1 and passes; #777777 is 4.48:1 and fails. Tiny changes cross the threshold.
It passes AA but I want AAA
AAA needs 7:1 for normal text — a noticeably stronger contrast. That often means near-black text on white, which not every design wants. AA is a defensible target for most sites.

Frequently asked questions

What contrast ratio do I actually need?

For most purposes, WCAG AA: 4.5:1 for normal text and 3:1 for large text. That is the level referenced by most accessibility laws and procurement standards. AAA (7:1) is stricter and worth reaching on body copy, but AA is the practical baseline.

Why does the exact formula matter?

Because a pass/fail near the threshold hinges on the second decimal place, and the WCAG formula linearises sRGB before weighting the channels. A tool that eyeballs it or skips the linearisation can flip a genuine pass to a fail, or the reverse — which defeats the point of checking.

More in Colour