Color and Contrast

Color

Not all people can see certain colors and some people can’t distinguish clearly between colors. Assistive devices such as screen readers will not read changes in color, therefore information could be missed by many users. When color is being used to convey information, make sure text is also provided to explain the information.

Best Practice

  • Avoid the use of red and green in graphics.
  • Always provide text as an alternative to color information.

Contrast

The contrast between text and background colors needs to be high enough to be easily read. WCAG 2.0 requires specific contrast ratios for text and background colors. Contrasts can be checked quickly using the WebAIM Color Contrast Checker.

Best Practice

  • UC Red (#E00122) text on white background is acceptable for large fonts, at 14 point (approximately 18.66 px) and above.
  • White text on UC red (#E00122) background is acceptable for large fonts, at 14 point (approximately 18.66 px) and above.
  • UC Red (#E00122) text on black background is never acceptable.
  • Black text on UC red (#E00122) background is never acceptable.