Accessible Is Possible: All about Accessible Color
Welcome to “Accessible Is Possible,” a series of tech tips to help you make learning more accessible for your students. Today will be a brief look at accessible color, from the importance of color contrast to best practices in choosing a color palette.
What Is Accessible Color?
Color plays a huge role online. It can indicate mood, branding or aesthetic. This is true for both media creators, who use color in their projects, and users, who can occasionally customize site themes. Blue light filters such as f.lux or viewing options such as dark mode make color intrinsic to the act of using technology.
Color choice can also make resources inaccessible. For example, the color pairing of green and red, used often to indicate pass/fail, is indiscernible to people with red-green colorblindness. Low-contrast text can cause eyestrain, and certain color combinations like blue and orange can make text seem to “vibrate.” Accessible color, then, is a recognition of where color choice can make things uncomfortable (or unusable) and the decision to work with that, rather than against it.
Why Use Accessible Color?
Color choice becomes an accessibility issue when it makes people unable to view a resource or access it as intended. In the case of red-green colorblindness, an indicator light that only changes from green to red to show a depleted resource will be unhelpful to those users. That missed cue might cause them to lose work or miss a chance to save a file before a battery runs low.
Colorblindness doesn’t just apply to red and green. There are all kinds of colorblindness; for example, some people can’t distinguish between yellow and blue. Generally speaking, using color alone as a signifier isn’t a good idea.
Sometimes low-contrast text — that is, text that is too similar in color to the background — can be painful, if not impossible, to read. It can also be difficult for dyslexic readers to parse. Colorblindness might make color changes less obvious or objects invisible due color perception, while jarring color palettes might make a resource unusable. This connects to the “vibrating” text idea mentioned in the previous section.
How to Check Color Contrast and Palettes
If you want to make sure your text and background are high contrast, WebAIM offers a contrast checker where you can input the colors’ hex codes. From there, you’ll get a ratio that aligns with the Web Content Accessibility Guidelines (WCAG 2.0) standard. This standard is good for making things accessible to your students!
Reading up on types of colorblindness can help you better understand what colors not to use. This page on accessibility from Pennsylvania State University gives examples of bad color combinations, from the previously mentioned red-green to red-black. It shows how these combos look with different types of colorblindness. The Color Safe tool can help you generate an accessible palette based on your background color.
Where to Check for Problem Areas
While the resources in the previous section are great for checking web resources — such as color palettes for pages on your learning management system or on a Google site — there might be other color choices that are less obvious. For example, do you use color to indicate pass/fail in your gradebook? Do you use color to denote different types of markings when you grade papers?
Your handouts and presentations might also have inaccessible color choices. For example, your PowerPoint background might be too busy and your font not dark enough. If you make your presentation grayscale, is it still readable? Do you communicate solely through color, or do you use other cues such as font weight, font size, shape or pattern?
It’s easy to fall into the trap of using color as a sole semantic cue. Take an inventory of how you handle color in your classroom. While this series is more about web accessibility, an accessible classroom is just as important for students as an accessible online space.
Further Resources
Want to explore further?
- This article from Smashing Magazine looks at all the ways that color may make things inaccessible, such as on text overlays or buttons.
- If you use Adobe products to create graphics, you can use their built-in color-checking tools.
- Chrome DevTools has a rendering option that will let you view sites through different lenses. (It’s a bit tricky to find, but click the three vertical dots in the upper-right corner of your Chrome window, then choose “More tools” > “Developer tools.” Then click the three dots at the top right of the Developer Tools panel, choosing “More tools” > “Rendering.” Finally, find the option to “Emulate vision deficiencies” toward the bottom of the screen.)
- We Are Colorblind offers a selection of resources on designing for colorblindness.
Jesika Brooks
Jesika Brooks is an editor and bookworm with a Master of Library and Information Science degree. She works in the field of higher education as an educational technology librarian, assisting with everything from setting up Learning Management Systems to teaching students how to use edtech tools. A lifelong learner herself, she has always been fascinated by the intersection of education and technology. She edits the Tech-Based Teaching blog (and always wants to hear from new voices!).
