color contrast and palettes
← Toolbox

Contrast · accessibility (WCAG)

contrast (1 → 21)
Large textNormal sample text to see the legibility.

Palette from a color

Tints and shades

Complementary

Analogous

Triadic

Contrast and palettes

Contrast. Pick a text and a background color; I tell you the contrast ratio and which WCAG accessibility levels it meets: AA (recommended minimum, ratio ≥ 4.5 for normal text and ≥ 3 for large) and AAA (stricter, ≥ 7 and ≥ 4.5). "Large text" = 18 pt / 14 pt bold.

Palette. From a base color I derive a scale of tints (toward white) and shades (toward black), and the harmonies (complementary, analogous, triadic) by rotating the hue. Click any swatch to copy its code.

All in your browser.