Color Contrast Validator🔒 100% local

WCAG contrast checker. Privacy-first, no server uploads, no tracking.

Input

Color Contrast Validator: related tools

Credit Card Validator Cron Visualizer Csr Certificate Decoder

Computes the WCAG 2.1 contrast ratio between two colours from their relative luminance and checks the pair against four thresholds: 4.5:1 for normal text, 3:1 for large text, 3:1 for UI components, and 7:1 for AAA. It states plainly which of those the pair clears and what that means for use, and prints the ready-made CSS declaration. The ratio is symmetric, so swapping the two colours gives the same number.

Color Contrast: how to use it

Enter the foreground colour and the background colour as six-digit hex, comma-separated.
Press Process.
Read the four pass/fail lines, then the plain-language verdict and the CSS pair.

Color Contrast: worked example

#FFFFFF, #000000becomes

Contrast: #FFFFFF on #000000

WCAG ratio: 21.00:1

WCAG 2.1 compliance:
  Normal text (4.5:1):   ✓ PASS 21.00:1
  Large text (3:1):      ✓ PASS 21.00:1
  UI components (3:1):   ✓ PASS 21.00:1
  AAA normal (7:1):      ✓ PASS 21.00:1

Suitable for body text at any size.

CSS: color: #FFFFFF; background-color: #000000;

The maximum possible ratio, 21.00:1, clears every threshold.

#777777, #FFFFFFbecomes

Contrast: #777777 on #FFFFFF

WCAG ratio: 4.48:1

WCAG 2.1 compliance:
  Normal text (4.5:1):   ✗ FAIL 4.48:1
  Large text (3:1):      ✓ PASS 4.48:1
  UI components (3:1):   ✓ PASS 4.48:1
  AAA normal (7:1):      ✗ FAIL 4.48:1

Only suitable for large/bold text (≥18pt or ≥14pt bold) and UI components — not body text.

CSS: color: #777777; background-color: #FFFFFF;

4.48:1 misses normal text by a hair and clears large text. This is the pair people reach for when they want "grey text" and do not realise it fails AA.

Color Contrast: when to use it

Checking a text/background pair from a mockup before it goes into the build.
Auditing a dark theme after a palette change.
Deciding whether a coloured button label needs a different shade to be readable.

Color Contrast: what it does not do

It judges colour only: font size and weight decide whether a 3:1 pair is permitted, and the page cannot see how the colours are actually used.
Opaque six-digit hex is the only accepted input, so alpha, layered backgrounds and gradients are out of scope.
It implements WCAG 2.1 relative luminance; the newer APCA model reports different numbers and most audits still measure the WCAG ratio.
Two colours at a time, so a full palette is checked pair by pair.

✅Color Contrast Validator🔒 100% local