The Experts Knowledge Base is retired as of December 18, 2020. Check out the new Help Desk Service Portal. for the new Knowledge Base. Private team spaces remain available.
Page tree
Skip to end of metadata
Go to start of metadata

Contrast and color are important for accessibility. Users, including users with visual impairments, must be able to perceive content on the page.

Testing color contrast

WebAIM offers an online contrast checker that will present the contrast difference between two colors, and it will help you find a color that meets contrast standards.

Make sure the ratio is 4.5:1 or greater.

Enter Hex color values in the Foreground Color and Background Color fields. You can also select the color box next to each field to select a color using the color option window. The tool will display the contrast ratio and show if you "Pass" or "Fail" the requirements for all types of text.

If your text color fails, use the Lightness sliders to identify an acceptable color scheme. Adjust the body text or background until you pass.

Don't use color alone to convey meaning

As we have discussed previously, the purpose of screen readers is to read content aloud to users with visual impairments. It is important to know screen readers do not read aloud visual information. Therefore, the screen reader does not read color information.

Non-visual and visual users who cannot access color must be taken into account when using color to emphasize elements. Information conveyed with color must also be communicated textually to be effective. This can include plain text, identifiers or patterns and textures with color.

Using text with color

When color is used to instruct a user to take an action, a textual alternative must be provided. For instance, "Select the green button to advance to the next chapter," is not accessible because not every user can see the color green. Rather, the instructions should read, "Select the green Start button to advance to the next chapter."

Below is an example of accessible buttons including color and text.

Campus color recommendations

When choosing colors, use the branding recommendations provided by the university experts.

To learn more about accessible color recommendations, visit our blogs about color contrast and not using color alone to convey content.

For questions or comments, contact the Computer Services Help Desk