Skip to content
TextArray
100% local

Contrast checker

Check WCAG contrast ratios of color pairs, with AA and AAA verdicts and fix suggestions.

Input
Output
Related tools
Color converterDeveloper tools
Random color generatorRandom generators
CSS unit converterDeveloper tools
Contrast checker
Paste foreground and background pairs, one per line — #7a1f2b on #ffffff, #333, #eee or rgb(0, 0, 0) #fff — and the WCAG 2 contrast ratio of each pair comes back instantly, with a pass or fail verdict for every conformance level. The ratio runs from 1 : 1 (no contrast at all) to 21 : 1 (black on white) and is computed from relative luminance exactly as the guidelines define it, so the numbers agree with browser inspectors and audit tools.
WCAG names two levels. AA, the one most laws and contracts reference, requires 4.5 : 1 for normal text and 3 : 1 for large text. AAA, the stricter target, asks for 7 : 1 and 4.5 : 1. Text counts as large from 18 pt (about 24 px) in regular weight, or from 14 pt (about 18.7 px) in bold — that is why a heading can pass at a ratio a paragraph fails. The report spells out all four checks per pair; switch the output to Compact for one line per pair, which is the quicker read when you are sweeping a whole palette.
When a pair misses AA for normal text, turn on "Suggest fix" and the tool darkens or lightens the foreground in small lightness steps, keeping its hue, until it reaches 4.5 : 1 — then prints the nearest passing hex ready to paste back into your stylesheet.
Everything runs in your browser; unreleased brand palettes never leave your device. Colors can be 3- or 6-digit hex with or without the hash, rgb() or rgba(), or a common CSS name — the basic 16 plus the popular extended ones. The full 148-name CSS list is deliberately not carried, so write exotic names as hex. A line that isn't a color pair is noted calmly and the rest keeps processing.
FAQ
What do AA and AAA mean?
They are WCAG conformance levels. AA requires a contrast ratio of at least 4.5 : 1 for normal text and 3 : 1 for large text; AAA raises that to 7 : 1 and 4.5 : 1. AA is the level most accessibility regulations reference.
When do the large-text thresholds apply?
From 18 pt (about 24 px) in regular weight, or from 14 pt (about 18.7 px) in bold. Large text only needs 3 : 1 for AA and 4.5 : 1 for AAA, which is why headings pass more easily than body copy.
Which color formats can I paste?
Hex with 3 or 6 digits, with or without the leading hash; rgb() and rgba() in comma or space notation; and common CSS color names — the basic 16 plus popular ones like orange, pink or rebeccapurple. The full 148-name list is not included; write rare names as hex. Alpha is read but ignored, because contrast is defined between opaque colors.
How does "Suggest fix" work?
When a pair fails AA for normal text, the tool shifts the foreground's lightness step by step — keeping its hue and saturation — until the ratio reaches 4.5 : 1, and prints the nearest passing hex. It darkens or lightens, whichever gets there sooner.
Is my text uploaded anywhere?
No. The check runs entirely in your browser and nothing you paste leaves your device.