Design · Utilities
WCAG color contrast: how to pick accessible colors
Color contrast is the single biggest accessibility issue on the web. WCAG 2.x defines minimum contrast ratios: 4.5:1 for normal text, 3:1 for large text, 3:1 for UI components. If your text does not meet these ratios, low-vision users cannot read it. The /random-color/ tool measures the contrast against white, black, and cyan and tells you whether each pairing is AA-compliant.
TL;DR
WCAG 2.x requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. Here is the math, the tool, and how to design accessible palettes.
How contrast ratio is calculated
Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the two colors. Relative luminance is a measure of how bright a color appears to the human visual system, weighted by the eye's sensitivity to red, green, and blue. White has luminance 1.0, black has luminance 0.0. The ratio between pure white and pure black is 21:1 — the maximum possible.
What the WCAG levels mean
AA is the standard target. AA-normal: 4.5:1 for body text (under 18pt or 14pt bold). AA-large: 3:1 for large text (18pt+ or 14pt+ bold). AAA is stricter. AAA-normal: 7:1. AAA-large: 4.5:1. UI components and graphical objects need 3:1 against adjacent colors. The /random-color/ tool flags AA violations and shows the actual ratio.
Designing accessible palettes
Three rules: (1) Use dark text on light backgrounds or light text on dark backgrounds — never mid-gray on mid-gray. (2) Don't rely on color alone to convey meaning (use icons, patterns, or text labels). (3) Test with a contrast tool, not your eyes — what looks fine to you can be unreadable for users with cataracts, color blindness, or low vision.
Why random color is useful here
When designing, picking a starting color is often the hardest part. A random color generator produces colors you would not have chosen, and the contrast meter tells you immediately whether it works against white, black, and your brand color. The result is often a palette you would not have reached through deliberate choice but that meets accessibility standards.
Try it →
Run the Random color tool on sitetrace.it.com — paste a value and get an instant answer.
Open Random color