ETEvoraTools
Color Tools

WCAG Contrast Checker

Compare a text color with a background color and calculate their luminance contrast ratio. The result reports common WCAG AA and AAA thresholds for normal and large text. Color values stay in the browser; the checker evaluates this pair only and is not a complete accessibility audit.

Runs locally — files stay on your device
#wcag#contrast#accessibility
Quick answer

What contrast does normal text need for WCAG AA?

Normal text needs a contrast ratio of at least 4.5:1 under the relevant WCAG contrast criterion.

Contrast ratio compares relative luminance

WCAG contrast is based on the relative luminance of the lighter and darker colors using (L1 + 0.05) / (L2 + 0.05). A ratio ranges from 1:1 for identical luminance to 21:1 for black and white.

How it works

HEX colors are converted to linearized sRGB luminance values. The tool orders lighter and darker luminance, computes the ratio, and compares it with 3:1, 4.5:1, and 7:1 thresholds.

When to use it

  • Check body text against a solid background.
  • Evaluate button labels before implementation.
  • Compare candidate brand colors for readable copy.

When not to use it

  • Do not treat one passing pair as a complete accessibility audit.
  • Do not ignore gradients, images, opacity, or interaction states.
  • Do not assume large-text thresholds apply to ordinary body text.

Worked examples

Black on white

Input
#000000 on #ffffff
Expected output
21:1

This is the maximum sRGB contrast.

Same colors

Input
#16794b on #16794b
Expected output
1:1

Identical luminance has no contrast.

Muted gray

Input
#777777 on #ffffff
Expected output
About 4.48:1

This sits around the normal-text AA boundary and rounding should not be used to claim a pass.

Common mistakes

Rounding a failing ratio upward

Threshold comparisons use the unrounded ratio. Correction: Do not treat 4.49 as 4.5.

Checking only default state

Hover, disabled, focus, and visited colors can differ. Correction: Test every meaningful state.

Ignoring text size

Normal and large text use different thresholds. Correction: Apply the threshold matching rendered size and weight.

Best practices

  • Test real rendered colors including opacity and backgrounds.
  • Keep a margin above the minimum threshold.
  • Combine contrast checks with keyboard, semantic, and zoom testing.

Related operations and differences

Complementary Color Generator

It proposes a hue relationship; this checker determines whether an exact foreground/background pair is readable.

HEX to RGB

It changes color notation without assessing accessibility.

Limitations and privacy

  • It evaluates solid sRGB colors, not gradients or image regions.
  • WCAG conformance includes many requirements beyond contrast.

Processing uses browser APIs on this device; the entered content is not sent to the Toolbox server.

Frequently asked questions

What ratio does normal text need for WCAG AA?

At least 4.5:1 under the relevant WCAG contrast criterion.

What is the maximum contrast ratio?

Black and white produce 21:1.

Can I round 4.49 to a passing 4.5?

No. Threshold evaluation should use the unrounded value.

Does a passing ratio make the page accessible?

No. It addresses one visual criterion only.

References