Accessibility and color
Web accessibility has always been a requirement for UMaine websites, and Digital Communications has been increasing efforts to improve the accessibility of web content on umaine.edu. The term “accessibility” refers to our efforts to remove barriers that prevent access to websites by people who have a disability. This month, we discuss how the use of color can impact accessibility.
Considering color blindness
Using color photographs in UMaine web pages is encouraged as a way to create visual interest and break up a text-heavy page. The overwhelming majority of site visitors will experience color in a consistant, predictable way. A number of these visitors (about 4.5%) will have some kind of color insensitivity or “color blindness.” Consideration must be given toward how the use of color could impact their experience.
Color contrast
The most common consideration in regards to color on your website is in regards to features such as our image content block, which allows for a text overlay on the image. In general darker, simple images provide better contrast for the white text. Such text does not read well when superimposed on busy, lighter images. If an image does not work well with a text overlay, an option is available to display that text underneath the image— this is always a good, accessible option to use.
If you are using color elsewhere on your web pages (such as shaded backgrounds to table cells), ensure that the colors have a contrast ratio of at least 4.5:1. This ensures that the text is still readable to those who may have color blindness. There are online tools to check color contrast ratio such as this one provided by WebAIM.
Color should not convey meaning by itself
Because color blindness affects how some visitors experience color, you should not rely on it to convey meaning without additional visual cues. A common example is the use of red text to indicate important information; if there is no indication aside from a color, you will not get the attention of a colorblind person. In web forms we indicate required fields with a red *; the red color combined with the special character ensures that everyone can see that the form field is required.
If you have used color as an attention-grabbing tactic, consider also making the text bold, italic, or include additional characters or formatting to set the message apart. An underline treatment should be reserved for links in the text.
Special note: If you are using multiple colors on a page to convey different meanings, each color should be accompanied by a unique treatment to reduce confusion. For example:
* indicates a required class
† indicates a prerequisite is required
° indicates a class that is offered online
If you have any questions about web accessibility, or want to see us cover an accessibility topic in a future newsletter, please get in touch with us at um.weboffice@maine.edu.