Color Guidelines for Digital Accessibility

Color is a great way to enhance the look and feel of digital content. The use of color alone to convey meaning creates problems for people with low vision, color perception deficiencies and color blindness. Using color with accessibility guidelines in mind is an easy and effective way to create digital content that is both appealing and accessible to all. 

Use of Color

Never rely solely on color to convey information. For instance, stating in a form that, "required fields are in red" poses a problem to screen reader and color blind users. They will not be able to see which fields are required. Adding an asterisk to those same form fields and updating the notation to read, "required fields have an asterisk" helps not only screen reader and color blind users, but all users. This same rule applies to information within graphs, charts, infographics, and other images. For instance, if you were to share the following graph about screen reader software choices, do not use the statement, "NVDA users are listed in blue, JAWS users in orange and VoiceOver users in purple." Instead, convey the information within the text or have an alternative method of conveying the same information, like an accessible data table. 

Graph showing screen reading software choices with an alternative, accessible table below it

What is Color Contrast and why does it matter? 

Color contrast is the difference in light between font (or anything in the foreground) and its background. In digital accessibility, how well one color stands out from another color determines whether or not most people will be able to read the information. The Web Content Accessibility Guidelines state that, "the visual representation of text and images of text has a contrast ratio of at least 4.5:1 expect for the following: Large Text (with at least 18 point or 14 point bold), Incidental (text or images of text that are pure decoration or are part of a picture that contains significant other visual content), and Logotypes (text that is part of a logo or brand name)." To check contrast ratios, you will need to know the hex color codes of the colors being used and enter them into the WebAIM Color Contrast Checker

Color contrast examples, light blue button with white text and dark blue button with white text

Another good example of why color contrast and design choices matter is color blindness. Red/green color blindness is the most common form of color blindness. In the image below you can see a red and green colored graph where the green equates to 25% and red is 75%. The first graph does not have defining lines between the sections. When the graph is converted to greyscale there is no way to differentiate the sections. The second graph does have defining lines between the sections and when converted to greyscale a user who is colorblind is still able to tell which section is which. 

example of red and green graphs to show the effects of color choices with color blindness

Recommended training from BuckeyeLearn:

Contact Us

Phone: (614) 688-2828

Email: etshelp@osu.edu

Virtual Helpdesk: ets.osu.edu/vhd (opens Zoom)

Service Desk Locations:

Business Hours:
M-F 8:00 A.M.-5:00 P.M.

View My Tickets & Requests:
https://go.osu.edu/etsportal

Not seeing what you want on this page?
Try our I Want To... list.