← All Tools
Color Contrast Validator🔒 100% local
WCAG contrast checker. Privacy-first, no server uploads, no tracking.
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.
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.
Worked example
#FFFFFF, #000000becomesContrast: #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, #FFFFFFbecomesContrast: #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.
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.
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.