Which WCAG levels does the Contrast Checker test?

All five at once: AA for normal text (4.5:1), AA for large text (3:1), AAA for normal text (7:1), AAA for large text (4.5:1), and the 3:1 threshold for non-text UI components and graphics under success criterion 1.4.11. The compliance list shows a pass or fail for each.

How does the contrast ratio get calculated?

It uses the WCAG relative-luminance formula, which weights the linearised red, green, and blue channels and compares the lighter and darker color as (L1 + 0.05) / (L2 + 0.05). The result ranges from 1:1 (identical) up to 21:1 (black on white).

What counts as "large text" for WCAG?

Large text is 18pt (about 24px) or larger at normal weight, or 14pt (about 18.66px) and larger when bold. Large text only needs 3:1 for AA and 4.5:1 for AAA, which is why a pair can pass for headings but fail for body copy.

How do the accessible-color suggestions work?

When the pair fails AA for normal text, the tool keeps your background fixed and adjusts the text color until it crosses the AA (4.5:1) and AAA (7:1) thresholds, offering each as a clickable card. Applying one updates the foreground so you keep your intended background.

Can I sample a color directly from my screen?

Yes, in browsers that support the EyeDropper API (such as Chrome and Edge) each color field shows a pipette button that lets you click anywhere on screen to grab a color. You can also use the native swatch picker or type a HEX, RGB, or HSL value.

Does the checker work for dark mode and inverted text?

Contrast ratio is order-independent, so it works for light-on-dark just as well as dark-on-light. Use the swap button to flip foreground and background, and the Inverted preset gives you a typical dark-mode starting pair.

Contrast Checker

Check foreground/background contrast against every WCAG 2.1 level live — with a realistic preview, named colors, and one-click accessible-color fixes.

About this ToolHow it works, benefits & use cases

Enter a foreground (text) color and a background color and the Contrast Checker computes their WCAG contrast ratio live, then grades the pair against every WCAG 2.1 level at once: AA normal text (4.5:1), AA large text (3:1), AAA normal (7:1), AAA large (4.5:1), and non-text UI components (3:1). A realistic preview renders headings, body copy at 16px, small print, and a link in your chosen colors so you can see the result, not just a number. A pass/fail checklist shows exactly which criteria you meet, and when the pair fails AA the tool suggests an accessible foreground color that keeps your background and just nudges the text until it reaches AA or AAA — click to apply it. Set colors with the picker, type HEX/RGB/HSL, swap foreground and background, sample with the screen Eyedropper, or load presets. Each color is labelled with its nearest CSS name, and the exact pair is captured in a shareable URL.

How to Use

1Enter your text color in the Foreground field and your background in the Background field — use the swatch picker, type any HEX/RGB/HSL value, or use the Eyedropper to sample from screen.
2Read the large contrast ratio and the pass/fail badge at the top, with a live preview of real text in those colors.
3Check the WCAG 2.1 compliance list to see which of the five levels pass or fail.
4Use the swap button to flip foreground and background, or click a preset (Body text, Inverted, Brand button, and more) to start from a common pairing.
5If the pair fails AA, click a suggested accessible foreground to reach AA (4.5:1) or AAA (7:1) without changing the background.
6Copy the ratio, or copy the page URL to share the exact color pair.

Key Benefits

Live WCAG contrast ratio as you type, with an AA/AAA/Fail grade
Checks all five WCAG 2.1 levels at once, including non-text UI (1.4.11)
Realistic preview of headings, body, small print, and a link in your colors
One-click accessible-foreground suggestions that keep your background
Swap, presets, screen Eyedropper, and per-field color pickers
Each color labelled with its nearest CSS color name
Shareable URL captures the exact pair; everything runs in-browser

Common Use Cases

Verifying body text and button labels meet WCAG AA before shipping
Fixing a failing color pair by applying a suggested accessible text color
Checking link, caption, and small-print legibility against a background
Confirming icon and form-border colors hit the 3:1 non-text threshold
Documenting an accessible color pair and sharing it with the team via URL

The quick brown fox

Body copy at 16px — the size most paragraph text is read at on the web.

Small print and captions need the highest contrast to stay legible.

A sample link

14.68:1

Passes AAA

Foreground (text)

~ darkslategray

Background

white

WCAG 2.1 compliance

5 / 5 checks pass

AA — Normal text≥ 4.5:1
AA — Large text (18pt+/14pt+ bold)≥ 3:1
AAA — Normal text≥ 7:1
AAA — Large text≥ 4.5:1
UI components & graphics≥ 3:1

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on