TopTool
Audit

WCAG Contrast Checker

WCAG Contrast Checker is a free online audit that helps you check WCAG 2.1 contrast ratio for any foreground/background pair; AA & AAA, normal & large text. WCAG Contrast Checker uses 2 input fields, returns 7 output values, and runs in your browser on the device.

Key facts

Inputs
2 fields: Foreground color and Background color
Outputs
7 values: Contrast ratio, AA Normal (≥4.5:1), AA Large (≥3:1), AAA Normal (≥7:1), AAA Large (≥4.5:1), Relative luminance (fg / bg), and Sample
Runtime
your browser on the device
Mode
Audit
Privacy
Files and text stay in the browser session.
Cost
$0, no account required

How to use WCAG Contrast Checker

  1. 1

    Paste or fill in the input

    Enter your text or values into the input fields on the page.

  2. 2

    Run the utility

    Click Compute to run the utility in your browser and review the result.

  3. 3

    Copy the output

    Copy the output value you need from the result panel.

WCAG Contrast Checker details

First, enter Foreground color in WCAG Contrast Checker. Next, review Contrast ratio, AA Normal (≥4.5:1), AA Large (≥3:1), AAA Normal (≥7:1), AAA Large (≥4.5:1), Relative luminance (fg / bg), and Sample. Additionally, WCAG Contrast Checker uses 2 input fields and 7 output blocks so the result is easy to scan and copy.

Calculate the contrast ratio between a foreground and a background color using the official WCAG 2.1 luminance formula. The tool reports the ratio (e.g. "4.52:1") and pass/fail status for all four conformance levels: AA Normal (≥4.5:1), AA Large (≥3:1), AAA Normal (≥7:1), and AAA Large (≥4.5:1). Use this to verify body text, headings, button labels, and link colors meet accessibility minimums. Algorithm: linearize each sRGB channel via the gamma curve, weight as 0.2126·R + 0.7152·G + 0.0722·B for relative luminance, then compute (Llight + 0.05) / (Ldark + 0.05). All math runs in your browser.

Common searches

  • wcag contrast checker
  • wcag contrast ratio
  • wcag contrast
  • accessibility contrast
  • color contrast checker
  • a11y contrast tool

Related tools

Tools that work with the same formats — most users open one of these next.

ColorPalette

Complementary Color Generator

Find the complementary (opposite) color for any hex / rgb / hsl input — instant, free, no upload.

Try it →
ColorSimulator

Color Blindness Simulator

Simulate how any color looks to people with color blindness — protanopia, deuteranopia and tritanopia.

Try it →
ColorConverter

Color Converter

Convert any color (hex, rgb, hsl, hsv, named) to every common format at once — runs locally in your browser.

Try it →
ColorPalette

Triadic Colors Generator

Generate a balanced 3-color triadic palette from any base color — runs locally, free.

Try it →
ColorPalette

Analogous Colors Generator

Generate an analogous 3-color palette (±30° hue) from any base color — instant, local.

Try it →
ColorPalette

Shade & Tint Generator

Generate N evenly-spaced shades (darker) and tints (lighter) of any base color — runs locally.

Try it →

Frequently asked

What is WCAG Contrast Checker?

WCAG Contrast Checker is a free online audit that helps you check WCAG 2.1 contrast ratio for any foreground/background pair; AA & AAA, normal & large text. WCAG Contrast Checker uses 2 input fields, returns 7 output values, and runs in your browser on the device.

What inputs and outputs does WCAG Contrast Checker use?

WCAG Contrast Checker uses 2 input fields: Foreground color and Background color. WCAG Contrast Checker returns 7 output values: Contrast ratio, AA Normal (≥4.5:1), AA Large (≥3:1), AAA Normal (≥7:1), AAA Large (≥4.5:1), Relative luminance (fg / bg), and Sample.

Do my files and data stay private?

Yes. WCAG Contrast Checker runs entirely in your browser using your device's CPU. Files and text are never uploaded to our servers, so your data stays private.

How do I use WCAG Contrast Checker?

Open WCAG Contrast Checker, paste or fill in the input fields, and the result updates instantly. WCAG Contrast Checker runs in your browser with no upload and no waiting.

Which browsers does WCAG Contrast Checker support?

Any modern browser works in Chrome, Firefox, Safari, and Edge on desktop and mobile. WCAG Contrast Checker uses standard web APIs and does not require any plugin, extension, or sign-up.