Color in Typography and Text: Readable, Accessible, Beautiful
Most color advice is about pictures; this is about words. Text color has a stricter job than any swatch on a wall - it has to be read, comfortably, for minutes at a time, by everyone. That makes typography the most demanding place color works: too little contrast and it strains; colored body text often backfires; links must be findable without color; and code needs a palette that holds together. This is the interactive guide to coloring text.
The hardest job for color
A logo is glanced at; a paragraph is read, line after line, by a tired eye on a bright screen at midnight. Text color therefore answers to a tougher master than decoration: legibility first, comfort second, beauty third - and accessibility woven through all of them. The same vivid color that sings as a hero background fails instantly as body text.
Three rules carry most of the weight. Contrast between text and background must be high enough (the WCAG article gives the math). Color should rarely be the only carrier of meaning in text - links and states need a second cue. And the most colorful decisions - headings, links, code - must still hold together as a system. Everything below is a working-out of those three.
The readability lab
Start with the foundation: text and background. Maximum contrast is pure black on pure white, but many designers soften it - a near-black on an off-white - to cut harsh glare without dropping below the line. Tune both colors and watch the contrast ratio and a comfort verdict update.
Text on background, measured
Pick a text and background color; the live paragraph shows the result, and the verdict gives the WCAG contrast ratio plus a comfort note. Aim well above the 4.5:1 body-text minimum - but notice that literal pure-black on pure-white can feel harsh, so a very dark gray on a soft white is a common, comfortable choice.
The quick brown fox
Good typography is invisible: you notice the idea, not the ink. Color sets the comfort of a long read - high enough in contrast to stay crisp, soft enough not to glare. Read this sentence twice and trust your eyes.The risk of colored text
Colored body text is a trap. To meet contrast on a light background, a color must be pushed dark and somewhat desaturated - by which point it is barely "colored" anyway. A bright or pale colored text fails contrast and tires the eye within a paragraph. Compare neutral body text with a colored version and watch the contrast struggle.
Why color usually loses to near-black
The same paragraph in a high-contrast neutral and in your chosen color. Push the color's lightness: keep it light and saturated and the contrast fails; force it dark enough to pass and it stops looking colorful. This is why color belongs on headings and links, not long body copy.
Neutral body text reads effortlessly across a whole paragraph, line after line, without asking the eye to work.
Colored body text looks tempting, but to clear the contrast bar it has to go dark and dull - and if it doesn't, it strains.
Links: color is not enough
Inside a block of text, a link is usually marked by color alone - and that fails for color-blind readers and anyone in glare. WCAG requires a second cue, and within body text the safest is the humble underline. Toggle a color-blindness simulation and see color-only links disappear while underlined links stay obvious.
Underline survives what color cannot
Two copies of a paragraph: the top marks links by color only, the bottom adds an underline. Switch on the deuteranopia simulation - the color-only links blend into the text, while the underlined links remain unmistakable. This is why in-text links default to underlined.
COLOR ONLY
Read the documentation and then open the settings panel to begin.
COLOR + UNDERLINE
Read the documentation and then open the settings panel to begin.
Coloring code
Syntax highlighting is a tiny color system with a hard constraint: every token color must be legible against the editor background, and the set must be distinguishable from each other while staying calm enough to read for hours. Build a theme and watch each token's contrast.
A legible little palette
Set a light or dark editor and choose hues for each token type. The code preview updates live, and each token's contrast against the background is checked - keep them all above the line and distinct from one another for a theme that reads well all day.
Text-color practice
Pitfalls and gotchas
Test your understanding
Six questions on text contrast, colored text, links, and code themes. Instant feedback, no scores recorded - a wrong answer comes with a short explanation.
Quick check
Continue your journey
Text color sits on top of contrast rules, semantic states, the system, and the themes it lives in.
Accessible Color Design and WCAG Contrast
The contrast math every text color must satisfy.
Design · 55Semantic Color: Status, States, and Feedback
The not-color-alone rule, applied to UI states and links.
Design · 31Dark Mode and Adaptive Color
Re-checking text and link contrast on a dark theme.
Design · 36Building a Color System: Scales, Tokens, Themes
Where text and link colors become reusable tokens.
Design · 25Color in Data Visualization
Labels and legends - text color in charts.
Foundations · 49The Vocabulary of Color
Lightness and value - the axis text contrast really rides on.