Follow

Color and accessibility

People who are blind cannot see any color at all. People with low vision may be able to see some or most colors but certain shades may be difficult to distinguish. And people with color blindness may be able to see colors just fine, but may not be able to distinguish certain combinations of colors, to include red and green, or red and black.

If you are only editing web content using the CMS and you are not employing extra styling, you are all set with color contrast. Currently, the default colors and style generated when using the CMS's editor will be compliant with our accessibility requirements. 

If coding your own colors or performing design for a University organization, you will need to be concerned about color contrast for accessibility.

Color contrast

Ensure sufficient color contrast between text and background.

  • Color contrast must be at least 4.5:1 for small text or 3:1 for large text, even if text is part of an image.
  • Large text has been defined in the requirements as 18pt or 14pt bold.

Bad Color Contrast Example

Good Color Contrast Example

Color contrast analysis tools

More about color blindness

An example color-blind test



In the above image, moving clockwise from the top: The number 16; The number 9; the number 12; the number 74. Colorblind people may see different numbers within these circles, or just a bunch of dots.

The point here is to be aware of how colors can or cannot be perceived. It is critical that color is not used as the only way to communicate or distinguish information. Be sure to include textual information that convey what the colors also indicate.

Bad Example

In the following image, which is the square?

  • Red
  • Green
  • Yellow
  • Blue
  • Orange

Good Example

In the following image, which is the square?

Was this article helpful? 0 out of 0 found this helpful

Have more questions? Submit a Support Ticket