Colour contrast for text and icons: practical tips

Short answer: Text and icons need sufficient contrast against their immediate background—light grey on white fails for many users and for WCAG expectations.

Test real components, not only hex values in isolation.

Practical tips

• Check gradients and images behind text—worst spot governs.
• Icon + label pairs—do not rely on colour alone for state.
• Disabled styles still need discernible text where possible.

Tools

Browser inspectors and dedicated contrast checkers; involve designers early in token choices.

Brand palettes

Pick accessible neutrals for body text; use bold brand colours for accents, not long paragraphs.

Frequently asked questions