color-and-icon-fontslisted

# Colour and icon fonts Two capabilities the rest of the pack assumes away: type that carries **more than one colour**, and glyphs that carry **non-letter meaning**. Both are font technology, both have sharp accessibility edges, and both are chosen far more often than they should be. ## 1. When to invoke - Type must render in more than one colour, with gradients, or as a 3D/layered effect. - Choosing between an icon font and inline SVG. - Emoji rendering, sizing, or weighting. - A colour font renders as flat black in some browsers. - Icons or emoji are announced wrongly by a screen reader. **Do not** invoke for ordinary text colour (that's CSS `color`) or for choosing a text face (`typeface-selection`). ## 2. Required context - **What the colour is doing** — brand expression, information, or decoration. Only the first two usually justify the cost. - **Which browsers must render it correctly**, and what the acceptable degradation is. - Whether the glyphs are **decorative or meaningful** (drives the a11y treatment). - Whether the text must remain **selectable, searchable, and translatable**. - Icon count, and whether icons change at runtime. ## 3. Invariant principles - **Colour fonts degrade, they don't fail — but the degradation is the design decision.** Plan what the flat-colour fallback looks like, because some readers will only ever see that. - **Never let colour carry meaning alone.** Same rule as everywhere else; a colour font doesn't exempt you from WCAG