Skip to Content

Digital Accessibility

Color Usage

Color is more than just a decorative element when it comes to creating accessible content—the way you handle color can be the difference between someone being able to understand what you're trying to convey and not being able to interact with your content at all.

Using Color and Text

Once you understand the accessibility guidelines for using color in a digital context, it's easy to create great-looking content that everyone can engage with.

Don’t rely on color alone to convey information.

Color cannot be the only visual element that conveys information, indicates an action, prompts a response or distinguishes a one piece of content from the rest. Use another graphic element like underline, chevron or icon to also communicate the meaning conveyed by color.

Why isn't color enough?

When color is the only indicator of meaning, information becomes inaccessible to someone who is low vision, colorblind or who has chosen to override screen colors on their monitor.

 

Use clear labels and distinguishable color combinations.

Avoid color combination that can be difficult for people with colorblindness to differentiate, such as red/green, blue/green, and yellow/purple. However, some users can't differentiate any colors or may have their display set to grayscale. You'll still need to provide clear text or labels to explain your color-coded content.

What Not to Do
  • Two lines of text, one saying Green denotes Dean's Office action and the next Red denotes Department Chair action, Green and Red changed to their respective colors.

In the key above that uses green and red as its differentiating colors, people with red-green colorblindness or using screen readers would be unable to tell the difference between actions by the Dean's Office and actions by Department Chairs, greatly impacting their ability to understand the message. 

What to Do
  • Two lines of text, one saying Blue denotes Dean's Office action and the next Orange denotes Department Chair action, Blue and Orange changed to their respective colors. A small blue university building icon is in front of the word Blue, and a small orange icon of a person is in front of the word Orange.
     

The key above uses supplemental icons. People with colorblindness and those using assistive technology would still be able to understand the difference between actions by the Dean's Office and actions by Department Chairs because the key does not rely solely on color to communicate meaning. Screen readers will read the alt text of each icon, alerting users to a change, and those who cannot differentiate the colors can use the icons as well.

 

Ensure there is strong contrast between text and the background color.

By using color contrast that meets digital accessibility standards, you ensure that everyone viewing your content can easily see and digest your information, not just those with disabilities.

Minimum Contrast Ratios

Regular Text: Requires a color contrast ratio of 4.5:1 or stronger.

Larger Text: Because larger text (at least 18 point or 14 point bold) is easier to read, it requires a color contrast ratio of 3:1.

Checking Contrast Ratio

The WebAIM Contrast Checker makes it easy to test the contrast ratio of any text and background color in seconds.

What Not To Do
  • hard-to-read garnet text underlined on a black background reading Ensuring Trust in Science: Challenges and Responses in Nutrition
     

The University's signature garnet set on a black background provides a contrast ratio of only 1.73:1, which makes even large text hard to read.

What To Do
  • White text on a garnet background that says Ensuring Trust in Science: Challenges and Responses in Nutrition.
     

White text on a garnet background preserves brand identity and has a high contrast ratio of 12.11:1, which passes the requirement and ease of reading with flying colors. 

Adding Text on Top of Images

It can be difficult to assess the contrast ratio of text on top of a busy image or background pattern. If possible, add a solid background behind the text. You can also darken/lighten the image that is behind the text so that it has a strong overall contrast.

Challenge the conventional. Create the exceptional. No Limits.

©