Color in Typography: How to Use Color in Text Without Losing Legibility

Body text color is not black — it is near-black. Pure #000000 text on pure #FFFFFF white creates maximum contrast (21:1) but produces a harsh, optically aggressive reading experience on modern backlit screens. The optimal body text color for extended reading is in the L8–16% range with slight chromatic warmth (2–8% saturation in the direction of the brand primary or a warm neutral). This produces contrast ratios of 14:1 to 18:1 against white — well above the WCAG AAA requirement of 7:1 — while eliminating the optical harshness of pure black. The difference is subtle in isolation but significant in extended reading contexts: a 2,000-word article in near-black text causes less eye fatigue than the same article in pure black.

Secondary text color is one of the most important and most neglected decisions in a typographic color system. Secondary text — metadata, captions, timestamps, form labels, supporting copy — must be visually distinct from primary text but still meet WCAG AA minimum contrast (4.5:1 for normal text). The target range: L35–50% for secondary text on white backgrounds, which produces 4.5:1 to 7:1 contrast and reads clearly as 'less important than primary text' without disappearing. Avoid the common mistake of tertiary text at L60–70% (contrast ~2.5:1) — this fails accessibility requirements and creates content that users cannot read comfortably, particularly in variable ambient light conditions.

Colored text should serve a specific function: link indication, emphasis, category labeling, or decorative headline styling. Colored body text — body copy set in a brand color other than near-black — is almost always a design mistake. It compromises readability, reduces the signal value of the color (if all text is blue, blue no longer signals anything), and creates contrast problems unless the brand color happens to be dark enough for body text use. Reserve colored text for three functional uses: links (blue convention or brand primary, always with a non-color indicator like underline), callout text or pull quotes (one or two sentences at larger size, where a brand color adds visual interest without fatiguing the eye), and categorical labels (small caps or tag-style label text using a semantic or categorical color).