Color & Contrast

Use of color

Color must not be the only way to convey information. Always provide an additional visual cue, like icon, text label, underline, shape, or pattern (e.g. striped, solid).

Additional resources:

• Color blindness simulator:
  • Sim Daltonism (mac, iOS)
  • Color Blind (Figma plugin)

Text contrast

The contrast of text against its background must be at least:

• Normal text - 4.5:1
• Large text (over 24px, or bold and over 19px) - 3:1

Additional resources:

• WebAIM Contrast Checker
• EightShapes Contrast Grid
• Checking color contrast in Figma (YouTube, 1:28min)

Non-text contrast

Interactive controls (e.g. buttons, form fields) and graphics that convey meaning (e.g. icons, charts, graph lines) must have a contrast ratio of at least 3:1 against adjacent colors.

Additional resources:

• WebAIM Contrast Checker