Readable colored text

Short answer

What makes colored text readable isn't its hue, it's the lightness difference between the text and the background; hue difference alone doesn't carry the shape of the letters. Blue text on a red background tires the eye, because the lightness of the two colors is close, the eye focuses red and blue at different distances, and the edges seem to vibrate, hovering in midair. In thin typefaces and at small sizes, color fades away even faster; that's why with colored text you need to think about value first, then weight and size, and hue last.

Value first, then hue

In DT-01, we saw that every color has a hue, a saturation, and a value. In text, one of these three dimensions matters far more than the others. The shape of letters — the difference between an "a" and an "o" — is resolved by the eye's system for tracking lightness differences. Color information is secondary in this task.

There's a practical test for this: convert the text to grayscale. If the text is still comfortably readable in grayscale, color is just a decorative layer, and the value difference that carries readability is in place. If the text blends into the background once it turns gray, the text will struggle in real use no matter how striking the hue difference is. The numerical measurement of this difference — how the contrast ratio is calculated — is the subject of UX-06.

In normal vision, once the lightness difference is sufficient, color's effect on reading speed is small. In 1986, Legge and Rubin ran an experiment with blue, green, red, and gray text whose lightness values were equalized, and found that normal-sighted participants' reading speed was independent of color, with the exception of small letters near the limit of visual acuity. In some participants with low vision, though, color made a clear difference, and red or blue text was generally read more slowly.

Red background, blue text

The question on the lesson card asks about one of the best-known traps in colored text: why does blue text on a red background tire the eye?

The first reason is value. The contrast ratio between the screen's pure red and pure blue, calculated with UX-06's formula, is only 2.15:1; it doesn't even reach the 3:1 required for large headings. The eye can't find the lightness difference it needs to resolve the shape of the letters.

The second reason is the optics of the eye. Like a prism splitting white light, the cornea and lens in the eye also bend light by wavelength and focus it differently: blue comes to a focus at a shorter distance than red, slightly in front of the retina. This difference is called chromatic aberration, and it amounts to roughly two diopters between the two ends of the visible spectrum. When our eye focuses on the red background, the blue letters stay slightly blurred; when it focuses on the letters, the background blurs. Because the eye can't see both sharply at once, it keeps switching focus, and that's tiring.

The third reason is a depth illusion. The color stereopsis we saw in DT-05 arises from this same optical difference: to many people, red seems to jump forward and blue to recede. Blue letters are perceived as embedded inside the red background or floating behind it. Combined with the vibration at the boundary of two saturated colors with close lightness values, this produces the unsettled look DT-08 calls "vibrating boundaries."

Color loss in thin type and small sizes

Color fades quickly in small, thin forms. An orange that looks vivid in a heading turns into a faded, uncertain brown when the same color is used in thin body text. There are two reasons for this.

First, a very thin stroke visually blends with the background next to it; if the letter's body isn't wide enough, every point the eye samples picks up both the letter's color and the background's color at once, and the color thins out. Second, there are very few short-wavelength-sensitive cones in the exact center of the retina, the tiny region where we see most sharply. In 1981, Williams, MacLeod, and Hayhoe showed that with very small stimuli, this region can barely see the differences between blue and yellow. This effect is called foveal tritanopia.

The practical conclusion is clear: color is hard to carry in thin, small type, especially the differences between blue and yellow or blue and white. If you're going to use colored text, choosing a heavier font weight and a larger size helps color stay visible. For body text, a neutral, dark color — leaving color for headings and emphasis — is generally the safer choice.

White text on a colored background

White text on a colored background is common, especially in buttons, labels, and posters. White looks like a safe choice because it sits "neutral" over any hue. But white text's readability depends on the background's lightness, not its hue.

On dark backgrounds — navy, maroon, dark green — white text reads comfortably. On bright backgrounds — yellow, orange, cyan — white text blends into the background; we saw in UX-06 that white on pure orange has a contrast ratio of only 2.33:1. The fix is usually not to change the background but to choose a darker version of it, or to make the text dark. On a yellow label, dark brown or black text is far more readable than white text.

Example — captions over different skin tones

A video team writes the captions for its interviews directly over the footage, with no colored background. The caption often falls over the speaker's neck, shoulder, or hand.

A plain white caption nearly disappears over the neck of a light-skinned person in front of a bright wall behind them; over a dark-skinned person, it reads comfortably. A plain black caption does the opposite. A single color gives different readability against different skin tones. In UX-06, we saw placing a dark band behind a headline; for captions there's also a lighter solution: giving the letters a thin, dark outline or a light drop shadow.

With a white letter and a dark outline, two extremes of lightness sit side by side at every edge of the letter. That way, the letter's shape is preserved whether the background is a light skin tone, a dark skin tone, or a bright sky. Instead of tuning the caption to one person's skin, this solution gives the same readability to everyone on screen.

Common misconception

Summary

1. Value contrast determines the readability of colored text; the grayscale test shows whether the text reads independently of hue.
2. Blue text on a red background tires the eye, because their lightness values are close, the eye focuses the two colors at different distances, and color stereopsis makes the edges vibrate.
3. Color fades in thin and small type; white text on a colored background only works if the background is dark, and for text over different skin tones, an outline or shadow gives everyone the same readability.

Test yourself

1. (Easy) Which dimension most determines the readability of colored text?
2. (Easy) What is chromatic aberration?
3. (Medium) Why does blue text on a red background tire the eye?
4. (Medium) On a yellow label, which text color reads better than white, and why?
5. (Hard) Why does color fade in thin and small type?
6. (Hard) Why isn't a single flat color enough for captions falling over people with different skin tones, and how does an outline solve this problem?

Answers

1. Value — the lightness difference between the text and the background ("Value first, then hue").
2. A lens bending different wavelengths with different power and focusing different colors at different distances; in the human eye it creates a focus difference of roughly two diopters between the two ends of the visible spectrum ("Red background, blue text").
3. Red and blue have close lightness values, and their contrast ratio is only 2.15:1; because the eye focuses blue and red at different distances, it can't see both sharply at once and keeps switching focus, and color stereopsis also makes the edges look like they're vibrating ("Red background, blue text").
4. Dark brown or black; yellow is a bright background with very little lightness difference from white, while dark text creates strong value contrast ("White text on a colored background").
5. In a thin letter body, every point the eye samples picks up the colors of both the letter and the background together, and the color thins out; also, because there are very few short-wavelength cones at the center of the retina, the differences between blue and yellow can't be seen in small stimuli ("Color loss in thin type and small sizes").
6. A single flat color gives one lightness difference against a light skin tone and a different one against a dark skin tone; it disappears against some backgrounds. A white letter with a dark outline brings two extremes of lightness together at every edge of the letter and preserves the letter's shape no matter the background ("Example — captions over different skin tones").

Sources

• Legge, G. E., and Rubin, G. S., "Psychophysics of reading. IV. Wavelength effects in normal and low vision," Journal of the Optical Society of America A 3(1): 40–51, 1986.
• Thibos, L. N., Ye, M., Zhang, X., and Bradley, A., "The chromatic eye: a new reduced-eye model of ocular chromatic aberration in humans," Applied Optics 31(19): 3594, 1992.
• Williams, D. R., MacLeod, D. I. A., and Hayhoe, M. M., "Foveal tritanopia," Vision Research 21(9): 1341–1356, 1981.

Next step

GT-03 moves from individual letters to the whole page: it covers how color determines which element gets read first in a layout, why keeping most of the page calm strengthens emphasis, and the method of deliberately blurring a layout to see what pops out. GT-04 then takes color choice to the scale of a brand: competitor analysis, matching or departing from industry codes, and making a palette work both on screen and in print.