Let’s Talk
Dev Utilities / Tool 33 / FREE TO USE

WCAG Contrast Checker

Calculate WCAG 2.x text and interface contrast from two opaque colors, with exact thresholds and JSON export.

Use the tool ↓Read the field guide ↗
THE WORKBENCH

Two colors. A measurable difference.

IN YOUR BROWSER / PRIVATE INPUT
YOUR PRIVATE WORKSPACE

Measure the visible difference.

Your input is processed in your browser. Nothing is sent to a conversion API.

01 / FROM INPUT TO ACTION

How to use the
WCAG Contrast Checker

  1. 01

    Choose the actual foreground

    Set the opaque text or interface color used in your design.

  2. 02

    Choose the actual background

    Use the surface directly behind it; gradients and images need separate sampling.

  3. 03

    Read the exact ratio and thresholds

    Review AA/AAA normal and large-text checks. Download the numerical evidence; color checks alone do not certify a page.

02THE MATH, EXPLAINED

Relative luminance, then a contrast ratio

ratio = (lighter luminance + 0.05) / (darker luminance + 0.05)

Each six-digit sRGB channel is linearized at the 0.04045 boundary. Relative luminance weights red 0.2126, green 0.7152 and blue 0.0722. The unrounded ratio determines every pass condition.

03A CLOSER LOOK

Which WCAG threshold applies?

Logotypes, inactive controls and incidental content have specific exceptions. Confirm the applicable success criterion instead of applying every row to every element.

UseAAAAA
Normal text4.5:17:1
Large text: 18 pt regular or 14 pt bold3:14.5:1
Relevant non-text interface indicators3:1Not a separate AAA threshold
04IN PRACTICE

Black and white establish the endpoints

THE STARTING POINT
Foreground #000000
Background #ffffff
THE RESULT / NEXT STEP
21:1
AA and AAA normal text pass
Identical foreground/background colors produce 1:1 and fail all displayed thresholds.
05PUT IT TO WORK

Test the rendered states

01

Inspect hover and focus

A passing default color does not validate focus outlines, disabled states or links.

02

Avoid rounded boundary decisions

A displayed 4.50 may be a rounded value below the actual 4.5 threshold. The tool uses the full ratio.

03

Sample image and gradient backgrounds

This tool accepts two opaque colors. Use the worst visible background color behind text when reviewing a variable surface.

THE QUESTIONS THAT COME NEXT

WCAG Contrast Checker:
questions, answered.

Does this WCAG checker certify an accessible website?

No. It calculates two-color contrast. Keyboard use, semantics, focus, alternative text and other success criteria need separate checks.

Can I test transparent text or a gradient here?

The inputs are opaque six-digit colors. First composite transparency against its real background and sample relevant gradient or image areas.

Why does large text use a lower contrast threshold?

WCAG treats text at least 18 pt regular or 14 pt bold as large. Confirm the actual rendered size and weight before using that threshold.

Does rounding affect a WCAG pass?

The calculation compares the full unrounded ratio against each threshold. The shortened display is for readability only.

FURTHER READING

The calculations and checks above describe this tool's implementation. Use these primary references for the underlying formats and publishing guidance.

WCAG contrast minimum ↗ (opens in a new tab)WCAG non-text contrast ↗ (opens in a new tab)
A USEFUL NEXT STEP

Keep the
work moving.

31

QR Code Generator

Choose a high-contrast QR design and scan-test it.

↗01

Schema Markup Generator

Create clean JSON-LD for your organization, article, product or FAQ.

↗02

Robots.txt Generator

Define crawler access with a downloadable robots.txt.

↗
YOUR NEXT MOVE

Put WCAG Contrast Checker to work.

Calculate WCAG 2.x text and interface contrast from two opaque colors, with exact thresholds and JSON export.

Use the WCAG Contrast Checker↑
Explore all 41 free tools ↗