lilContrast
WCAG color contrast checker: test a text and background pair, see a live sample, and get the nearest passing shade
Text color
Background color
Quick pairs
Nearest passing text color
WCAG measures the luminance ratio between text and background, from 1:1 (invisible) to 21:1 (black on white). AA needs 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt bold). AAA raises those to 7:1 and 4.5:1.
4.61
contrast ratio
Large heading text
Normal body text looks like this. If you squint to read it, your visitors with low vision simply cannot.
Button labelNeed the colors first?
Build a palette with lilPalette, lock in a set of shades that work together, then bring the pairs back here to make sure every one of them is readable.
Build a palette
