Importance for Accessibility

Color contrast is the difference between text (or elements) and their background. It must be strong enough to read easily.

Color Contrast Standards

Success Criterion 1.4.3 (minimum)

Meeting the Standard

  • Text and images of text have a contrast ratio of at least 4.5:1.
  • Large text - at least 18 point (typically 24px) or 14 point (typically 18.66px) and bold - has a contrast ratio of at least 3:1.

Non-text Contrast

Success Criterion 1.4.11

Meeting the Standard

  • Non-text contrast of user interface components and graphical objects has a minimum contrast ratio of at least 3:1 against adjacent colors.

Color Reliance

WCAG Level A Success Criterion 1.4.1: Use of Color:
Color is not used as the only visual means of conveying information, indicating an action, prompting a response or distinguishing a visual element.

Meeting the Standard

  • Ensure your data conveyed by color is also available in text
  • Text cues should be included for colored form labels
  • If using color to convey link text, make sure it meets contrast standards and also has additional visual cues to capture a users attention