myWPI Accessibility Series: Color and Contrast

How often do you think about the use of color in your myWPI course site content? Selecting colors with accessibility in mind will not only improve the experience for users with vision deficiencies like color blindness, but for all students using your course site. In today’s post, we’ll discuss a few ways you can modify the accessibility and presentation of your course content using color and contrast.

Color Coding

Color should not be the sole means of conveying important information to your students. An alternative mechanism for portraying distinguishing characteristics to text is to add the words for the color.

Shape in addition to color (+ or -, for example) is an acceptable alternative as well. Using text symbols with a key is also more accessible to screen reader users than color-coding alone.

Highlighting of text is also not accessible. An alternative for selecting important passages of text is to create several bulleted lists to separate like pieces of information.

Accessibility at Penn State is a resource that provides detailed examples on alternatives for color coding.

Color Contrast

Create color contrast between foreground and background colors. Ensure that if you’re using a background design or image, that it does not overpower your text. Selecting colors with accessibility in mind will help users with vision deficiencies like color blindness, and improve the experience for all users.

Foreground and background color combinations should be tested to ensure high readability. The WebAIM contrast checker is a good resource if you are unsure about color combinations you’re utilizing on your myWPI site.

myWPI’s High Contrast Setting

Blackboard has a high contrast setting to change the colors of Blackboard. This can be useful if you are having difficulty reading pages as it increases the contrast between the text and background.

Log into myWPI.
Click on your Name in the upper right corner of the screen.
In the drop down menu, click on Settings.
Click on High Contrast Settings.
In the pop-up window, select the option for “Yes, I will use Operating System style to overwrite Blackboard styles.”
Click Submit.

WCAG 2.0 Guideline 1.4.3

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

For more information on Accessibility at WPI, please visit the website for the Office of Disability Services.