Color in typography: how typeface color and palette work together

Typography color is often treated as an afterthought — text is black, links are blue. But the color decisions in a type system have a larger effect on how a palette reads than almost any other choice. A palette that looks elegant in a color swatch can look chaotic or flat when applied to text at scale.

UI/UX Typography

Highlights

Text color is not just about contrast — it is about the visual weight and warmth of the reading experience. Pure black (#000000) on white creates the highest contrast but also the harshest reading experience for long text. Ink colors at lightness 12–18% — slightly warm or slightly cool — read as authoritative without the eye fatigue of pure black. Most editorial and literary brands use near-black text for this reason.

Use color in type to establish hierarchy before using size or weight. A warm dark neutral for body text, a cooler mid-tone for secondary text, and a single accent color for interactive or featured text creates a three-level hierarchy that works without increasing font size. This approach keeps the typographic system visually quiet while still communicating structure.

Link color must satisfy two requirements simultaneously: it must be distinguishable from body text (a visual cue that it is interactive) and it must remain part of the palette (it should not feel like a foreign intrusion). The most versatile link color approach is to use your palette's primary mid-saturation color at full saturation — typically a cobalt, teal, or violet that has enough contrast against both light and dark backgrounds.

Why text color affects palette perception more than any swatch does

When a palette is applied to an interface, the largest single area of color is usually not a background or a button — it is the body text field. Thousands of words of near-black text on an off-white background is the dominant color relationship in most content-heavy interfaces. The warmth, coolness, or slight tint of the text color shifts the perceived temperature of the entire page. A design using warm near-black text (HSL: 30, 8%, 14%) reads as warmer than the same design with cool near-black text (HSL: 220, 8%, 14%), even if the visible palette swatches are identical. This means your text color is a palette decision, not a readability default.

Building a typographic color system

A functional typographic color system has four roles: primary text, secondary text, disabled or placeholder text, and accent/interactive text. Primary text should be your darkest non-pure-black neutral — a near-black at lightness 10–16% with a slight warm or cool lean matching your palette's temperature. Secondary text should be lighter — typically lightness 40–52%, enough to signal hierarchy but still readable at body sizes. Placeholder and disabled text should fall in the lightness 60–70% range, where it reads as clearly subordinate but remains legible for accessibility. Accent/interactive text — links, labels, active states — should use one of your palette's mid-saturation accent colors at a lightness that satisfies 4.5:1 contrast against the background.

When colored headings work and when they fail

Colored headings — headlines using your accent color rather than a dark neutral — are effective in two contexts: short-form content where the heading is read independently (marketing pages, landing pages, editorial layouts), and hierarchically simple documents where the heading color replaces structural indentation. They fail in long-form content with multiple heading levels, because the color creates hierarchy only between colored and uncolored elements — it cannot differentiate H2 from H3 without adding size or weight. Colored headings also fail when the accent color is warm and the page is cold (or vice versa), because the temperature mismatch makes the heading read as a design error rather than a deliberate choice. The test: if covering the heading makes the page look more cohesive, the heading color is fighting the palette rather than supporting it.

Newer issue

Color for presentations: slides, decks, and pitch materials

2027-03-11

Older issue

Color naming for design systems: tokens that communicate intent

2027-03-25