Image Source: https://pixabay.com/
I had question sent my way by one of my classmates at Post University regarding ADA Compliance and the use of colors in design. This is such a great question, and so easy to overlook. There are quite a few "dos and dont's" when using color in design. I have decided to post my response here on this blog as I feel the content is very in depth and valuable to share.
Question: My question for BJ and Dr. Fells relates back to colors. When using color what care needs to be taken to be ADA compliant?
Hello!
You have asked the right question to the right person because boy do I have resources for you! I have another colleague/mentor at Goodwin besides Dr. Manley – their name is K. Jensen. K. Jensen is our resident ID person at Goodwin, and from day one K. Jensen has been hammering it into my head that color is bad! Well… no. But yes… but no. Let me explain. 😊
When using colors as a reference point in particular, colors can inhibit individuals with sight issues (K. Jensen, personal communication, November 12, 2020). Be it color vision deficiency (CVD), which is known more commonly as color blindness, or persons that are blind and rely on screen readers – and everything in between – the use of color can become an outright barrier to learning (K. Jensen, personal communication, November 12, 2020).
Example: screen readers cannot make sense of color as a reference point, which actually inhibits the learning process entirely for persons with vision disabilities. Or, a person with CVD may not be able to distinguish red colored text used to call attention to details, missing the call to attention; even worse for both screen readers and persons with CVD if the text says ”see the red header”.
As a result of this sage wisdom imparted on me repeatedly by K. Jensen, whenever I do design of any kind, I shy away from colors. This same thought process applies to images as well, but to a lesser degree. When using images, it is important that the image have alt text, so screen readers can describe the image to the learner (K. Jensen, personal communication, November 12, 2020). And don’t even get me going on the book of worms that are PDF “images”! (PDF’s that are a screenshot, not a text output). PDF “images” are a nightmare for ADA compliance as screen readers cannot read the text on PDF’s that are not text outputs.
When colors are going to be used, such as design/branding aesthetics for a particular school at a university for example, K. Jensen provided me with an excellent resource to maintain proper accessibility standards. There is a website named “WebAIM.org” which is operated by a non-profit organization that exists to serve the global community in promoting accessibility standards online. WebAIM is housed at Utah State University and run by an organization named the Center for Persons with Disabilities. K. Jensen (November 12, 2020) refers to WebAIM as the “ADA Design Bible”.
So, when looking to ensure I pay special care to the adherence of ADA compliance with the use of colors, I reference WebAIM for any questions I have. Or I reference K. Jensen. 😊
Additional information you may find useful:
When using colors, WebAIM has a wonderful resource named the Contrast Checker. The Contrast Checker ensures that colors contrast properly, to meet web accessibility standards. To meet appropriate standards, you can input hex codes for the foreground and background colors you wish to use, and the contrast checker will verify if the colors meet the Web Content Accessibility Guidelines (WCAG) standards.
Another design process to shy away from is the use of underlined words in design, as underlined words signify a hyperlink to be clicked on (K. Jensen, personal communication, November 12, 2020). It has been suggested to me from day one by K. Jensen that we use the design principle of scale. Bolds, italicized texts, font sizes, bullet lists and spacing, are among the principles of scale we adhere to at Goodwin. According to WebAIM (n.d.), “links should look like links, and nothing else should”. I have gotten into the habit of italicizing words that I would have once underlined because of this accessibility guideline.
I hope you have found this helpful, and if you have any other questions regarding ADA compliance and web standards, I’m happy to offer my input.
References:
Links and Hypertext. (n.d.). WebAIM. Retrieved November 12, 2020 from https://webaim.org/techniques/hypertext/link_text#
Contrast Checker. (n.d.). WebAIM. Retrieved November 12, 2020 from https://webaim.org/resources/contrastchecker/