Colour and Type

Typography is experienced as the reading of words, but those words are only available to the reader if the type is legible. Legibility is a function of many factors — typeface selection, measure, leading — but none more foundational than the relationship between text colour and background. Get this wrong and no other typographic decision matters.

Background matters as much as foreground

The common framing of text colour as “choosing the right text colour” misses that text colour only has meaning relative to its surface. colour: #64748b is perfectly readable on a white background (contrast ratio ~5.7:1) but completely unreadable on a dark slate background (less than 1:1 effective contrast). The colour is the same — what changes is the surface.

This is why thinking in contrast ratios rather than absolute colours is essential. Don’t think “I use slate-600 for body text.” Think “I use a colour that achieves at least 4.5:1 against my current background.” When that background changes — in dark mode, in a status banner, on a coloured section header — the text colour must be reassessed against the new surface.

Coloured text on white backgrounds

Using a brand colour for body text is usually a mistake. Vivid colours — especially reds, oranges, and yellows — cause fatigue at paragraph length because the eye must constantly adapt to the hue stimulus while trying to process content. The reading experience becomes effortful. Coloured text works well at small doses: links, labels, annotations, pull quotes. It fails at body scale.

If brand colour must appear in body text, check two things. First, the contrast ratio: many brand colours at their standard saturation fall below 4.5:1 on white (amber-400, medium blue, medium green all fail). Second, readability at extended length — show a paragraph of text in the colour and read it through. Fatigue reveals itself in 30 seconds that a contrast checker cannot.

Reverse type — light on dark

Light text on dark backgrounds is equally readable from a contrast standpoint, but introduces its own considerations. Thin type strokes become harder to render cleanly on dark backgrounds — especially at small sizes and on low-density screens — because anti-aliasing creates dark halos rather than light ones. Increase font weight slightly for body text on dark backgrounds: a regular weight that reads cleanly at 16px on white may need to be medium weight on dark to maintain the same stroke clarity.

Dark backgrounds also affect line length perception — text feels wider on dark surfaces, so your measure may need to be slightly reduced. And avoid pure black backgrounds — a near-black with a slight warm or cool tint (#0f172a rather than #000000) creates a more sophisticated feel and reduces the harshness of the contrast.

Avoiding common failures

Four patterns account for most colour-and-type failures in production. First, grey text on grey backgrounds — a common attempt at visual refinement that often fails contrast requirements. Medium grey on light grey is rarely above 3:1. Second, coloured links that blend into body text — links must be distinguishable from surrounding text by something other than colour alone (underline or contrast). Third, placeholder text that’s too light — placeholders at 30-40% opacity on a white input fail immediately. Fourth, white text on image backgrounds — images vary in brightness, so white text passes in some areas of an image and fails in others. Use a dark overlay at sufficient opacity, or restrict text to consistently dark regions of the image.

When in doubt, run a contrast check. The calculation is fast — the problem is that developers often don’t reach for the tool unless something looks wrong. Most things that fail look visually “fine” until you measure them.

Colour in animation

When colour is animated — a button shifting from default to hover to pressed, a status indicator transitioning from pending to complete — both performance and accessibility considerations apply.

From a performance standpoint, colour transitions (background-color, color, border-color) require per-pixel recalculation on every frame and cannot be promoted to the GPU compositor. They are more expensive than opacity or transform animations. For single-element state changes the cost is negligible. For animating colour across many elements simultaneously, the cost is measurable — test on lower-end devices before committing.

From an accessibility standpoint, colour transitions are the safest animation category under prefers-reduced-motion. The vestibular system responds to spatial motion — translation, rotation, scale, parallax — not to colour changes. A button that changes colour on hover is safe to preserve for reduced-motion users. When stripping spatial animation under reduced motion, colour transitions can remain as the motion-safe feedback layer. See the Motion hub for how colour and blur behave as animated properties.