Color Contrast Checker Online Free (WCAG)

◐

Color Contrast Checker — WCAG 2.1 AA & AAA checked in your browser

FOREGROUND

BACKGROUND

nearest AAA-passing foreground

Color Contrast Checker Online

Updated 2026-07-09

Check colour contrast online for free. Enter a foreground and background colour and SnapTools shows the WCAG contrast ratio, a live preview of real text on those colours, and clear pass/fail badges for AA and AAA at both normal and large sizes. Everything runs in your browser, so nothing is uploaded.

Low-contrast text is one of the most common accessibility failures, and it is easy to miss by eye. This checker uses the exact WCAG 2.1 relative-luminance formula to tell you whether a pairing is readable — and the live preview lets you nudge the colours until they comfortably pass, so your buttons, links, and body text work for everyone.

// how to use

1 Pick a foreground (text) colour and a background colour with the swatches or hex fields.
2 Read the contrast ratio and the live text preview on those colours.
3 Check the WCAG AA and AAA pass/fail badges, then adjust the colours until they pass.

// examples

Passing pair

Input

foreground #4B5563 on background #FFFFFF

Output

7.56:1 — passes AA and AAA for normal text

Failing pair

Input

foreground #9CA3AF on background #FFFFFF

Output

2.54:1 — fails AA for normal text

// common uses

Checking text colours meet accessibility standards Auditing a design system's colour pairings Choosing readable button and link colours Fixing low-contrast text flagged in an audit

// faq

No. The contrast ratio is calculated entirely in your browser from the two colours, so nothing you enter leaves your machine.

It is a number from 1 to 21 that measures the difference in relative luminance between text and its background. Higher is easier to read; the ratio is written like 4.5 to 1 and drives the accessibility pass/fail thresholds.

WCAG AA needs 4.5 for normal text and 3 for large text (about 18pt, or 14pt bold). AAA is stricter, needing 7 for normal text and 4.5 for large text. UI components and graphics need at least 3.

Large text is roughly 18pt and up, or 14pt and up when bold. It is allowed a lower ratio because bigger, heavier shapes stay legible at less contrast.

Each colour is converted to its WCAG relative luminance, then the ratio is the lighter luminance plus 0.05 divided by the darker luminance plus 0.05 — the exact formula from the WCAG 2.1 specification.

// related

Color Converter Color Palette Generator CSS Gradient Generator Box Shadow Generator PX to REM Converter