Design is not only for paintings. Every sign, poster, app and web page asks one practical color question: can people read the text? The answer depends mostly on value contrast between the letters and the background, not on how different the hues are.
Key idea
Readable text needs enough value contrast. The web's accessibility guidelines (WCAG) ask for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text.
Why it works
The ratio compares how much light each color gives off, its relative luminance $L$, from 0 for black to 1 for white. With $L_1$ the lighter color and $L_2$ the darker one: $$\text{ratio} = \frac{L_1 + 0.05}{L_2 + 0.05}$$ It runs from 1 to 1 (no contrast) up to 21 to 1 (black on white). "Large text" means about 18 point, or 14 point bold.
Worked example: Does gray text pass?
White has $L = 1$. The gray #767676 has $L \approx 0.181$. Does gray text on white pass the 4.5 to 1 guideline for normal text?
- $L_1 = 1$ (white, the lighter one); $L_2 = 0.181$.
- Ratio $= \frac{1 + 0.05}{0.181 + 0.05} = \frac{1.05}{0.231} \approx 4.5$, about 4.54 to 1.
- 4.54 is at least 4.5, so it passes, just barely.
Answer: Yes, at about 4.54 to 1.
Common mistake
Pairing colors that differ in hue but are close in value, like red text on green. The painter's red and green here are about 1.5 to 1: hard for anyone to read, and harder still for the roughly 1 in 12 men who have red-green color blindness. Check the ratio with a contrast tool, or view the design in gray: if the text fades, so will readers' patience.