Skip to content
ColorArchive
Typography Guide
Search intent: color in typography design guide legibility

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

Typography color is the most technically constrained area of color design — it must simultaneously meet accessibility requirements, serve hierarchy and emphasis functions, maintain brand coherence, and work across every screen and print context. Most designers learn body text color (very dark) and link color (blue by convention) but do not develop a systematic approach to the full typographic color spectrum. A well-designed typographic color system is one of the highest-leverage investments in design system quality.

TypographyLegibilityColor Systems
Key points
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).

Building a complete typographic color system

A complete typographic color system for light mode contains five tiers. (1) Primary text: L10–15%, warm near-black — for headings, body text, and all primary content. (2) Secondary text: L40–50%, medium gray — for metadata, captions, supporting information. (3) Tertiary/disabled text: L65–70%, light gray — for placeholder text, disabled states, and de-emphasized UI strings (note: this fails WCAG for meaningful content and should only be used for truly non-essential text). (4) Inverse text: near-white, L92–97% — for text on dark backgrounds, banners, dark UI elements. (5) Link/interactive text: brand primary or blue-family, L30–45% on white — for links, with an underline or other non-color indicator. Each tier needs a defined hex value, a documented contrast ratio against its intended background, and a specified use case. Without this specification, designers will make inconsistent tier choices, eroding visual hierarchy across the product.

Text on colored backgrounds: the hardest legibility problem

Text on colored backgrounds is the most technically difficult legibility situation in typographic color design. The challenges: (1) Most brand colors at medium saturation and lightness (the range most useful for UI components) do not provide 4.5:1 contrast against either white or black text — they fall in a no-man's land where both fail. (2) Colored backgrounds reduce the apparent contrast of text against the background due to simultaneous contrast effects — text that measures 4.5:1 on a saturated red background may appear to have lower contrast than the same ratio on a neutral gray. (3) Brand color backgrounds create strong visual noise that competes with the typographic content. Solutions: use background tints (8–15% opacity version of the brand color on white) rather than full-saturation color blocks for large text-containing areas; use very dark (L10–20%) or very light (L90–97%) text depending on background lightness; test colored text backgrounds at multiple size points since the legibility threshold is larger for small text.

Color hierarchy in headings and display type

Heading color is an opportunity to add visual richness and brand expression without compromising legibility, because headings are set at large sizes where contrast requirements are lower (3:1 rather than 4.5:1) and reading duration is shorter. The most effective use of color in headings: use the brand primary or a closely related color for one level of heading (typically H1 or the most prominent headline style), keeping all other heading levels in primary text color (near-black). This creates a single, visually striking color entry point into text content without creating the visual noise of multi-color heading hierarchies. Alternatively, use color to highlight a single key phrase within an otherwise near-black heading — a technique common in editorial design that draws attention to the conceptual center of the heading.

Typographic color in dark mode

Dark mode typographic color systems mirror the structure of light mode systems but require different values at each tier. Primary text on dark: L88–94%, warm near-white — maintaining slight warmth prevents the harsh optical effect of pure white (#FFFFFF) on near-black backgrounds. Secondary text on dark: L55–65%, medium light gray — providing sufficient differentiation from primary text while meeting contrast requirements. The common dark mode mistake: using the same hex values from the light mode system inverted, which produces inconsistent contrast relationships and often results in either too little contrast (text too dark against the dark background) or too much (text too bright and harsh). Semantic text colors (error red, success green, warning amber) need separate dark-mode specifications — the same hex that provides sufficient contrast on white may fail on near-black backgrounds.

Practical next step

Move from the guide into a concrete palette lane

Guides explain the use case. Collections prove the taste. Packs handle the export and implementation layer.

Related guides