Color Theory & Typography for Interfaces
UI/UX Design Principles
Chapter 6 · Color Theory & Typography for Interfaces
Chapter 5 covered how grouping, contrast, and alignment create structure. This chapter covers the two specific materials that structure gets built from on screen: color and type.
Color: The Accessibility Numbers That Actually Matter
Beyond aesthetics, color choice on an interface has real, testable, legally-referenced accessibility requirements — this course's own dedicated Web Accessibility course goes far deeper, but the core numbers belong here too, since they directly shape color decisions.
- Normal text: a contrast ratio of at least 4.5:1 against its background
- Large text (18pt/~24px or larger, or 14pt/~18.5px bold): at least 3:1
Color Harmony, Briefly
A few real, standard color-relationship patterns from color theory show up constantly in interface palettes: complementary colors (opposite each other on the color wheel, for strong contrast), analogous colors (next to each other, for a harmonious, low-contrast feel), and triadic colors (evenly spaced, for a balanced but vibrant palette). Screens use additive color (RGB/hex) rather than print's subtractive CMYK — worth knowing if you ever hand a design off to a print vendor.
Typography: A Real Correction to a Common Claim
The real, practical reason sans-serif dominates online isn't necessarily inherent legibility — it's rendering. At small pixel sizes (roughly 9-20px), a serif's own fine details render poorly on lower-resolution displays, which made sans-serif the safer practical default for a long time. Modern high-density screens have significantly reduced that specific constraint, which is exactly why serif body text has become genuinely more common in web design again.
Real Typographic Fundamentals
| Term | What it means | Practical guidance |
|---|---|---|
| Line length (measure) | How many characters fit on one line of text | Roughly 50-75 characters per line for comfortable reading — much longer and the eye loses its place returning to the next line |
| Line height (leading) | Vertical space between lines of text | Roughly 1.4-1.6× the font size for body text is a common, comfortable starting point |
| x-height | The height of a lowercase letter like "x", without ascenders/descenders | A larger x-height generally reads more clearly at small sizes on screen |
Hands-On Exercises
A designer sets normal body text at a contrast ratio of 4.3:1 against its background and argues this is "close enough" to WCAG's requirement. Explain, in your own words, whether this passes Level AA, citing the real, exact standard.
📄 View solutionA dashboard shows server status using only a red or green dot, with no label, icon, or text difference between the two states. Explain, in your own words, why this is a real, measurable accessibility problem, citing this chapter's own prevalence data.
📄 View solutionA colleague insists a design must switch from a serif font to a sans-serif font because "serif fonts simply aren't legible on screens, that's an established fact." Explain, in your own words, what this chapter's own research actually shows, and what the real, more accurate way to phrase the tradeoff would be.
📄 View solutionChapter 6 Quick Reference
- Real WCAG Level AA contrast: 4.5:1 normal text, 3:1 large text (18pt/~24px, or 14pt/~18.5px bold) — not rounded
- Real color blindness prevalence: ~8% of men, ~0.5% of women (red-green, the most common form) — never convey information with color alone
- Complementary / analogous / triadic — standard color-wheel relationship patterns; screens use RGB, print uses CMYK
- Real correction: "sans-serif is always more legible on screens" is overstated — research is mixed, and the real historical driver was low-resolution rendering, not inherent legibility
- Practical type guidance: ~50-75 characters per line, ~1.4-1.6× line height, larger x-height reads better small