Skip to main content
snaptools
Categories json csv text encoding hash formatters converters generators
Guides Pricing Sign in
chain
◐
Color Contrast Checker

nearest AAA-passing foreground
// about this tool

Color Contrast Checker Online

Updated 2026-08-19

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. 1 Pick a foreground (text) colour and a background colour with the swatches or hex fields.
  2. 2 Read the contrast ratio and the live text preview on those colours.
  3. 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

Is anything uploaded to a server?
No. The contrast ratio is calculated entirely in your browser from the two colours, so nothing you enter leaves your machine.
What is a WCAG contrast ratio?
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.
What ratios do AA and AAA require?
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.
What counts as large text?
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.
How is the ratio calculated?
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.

// works with your data

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