- Updated: August 16, 2022
Introduction
In this post, I’m sharing some tips for accessible use of color—including some you won’t find in the current accessibility guidelines.
We’ll look at why we need to think about the ways we use color, what the accessibility standards say about the use of color, what the guidelines are lacking, and some takeaways for using color effectively when designing inclusive learning experiences.
Why We Need to Think About Color
Here are four reasons it’s important for us to consider use of color in our designs:
- Accessibility. First, poor use of color can keep a learner from being able to access their professional development or can interfere with their ability to perceive it correctly. If the color contrast is insufficient, text might blend into the background. Or if we tell a learner to press the green button to continue, they might not be able to see which one is green.
- Potential for Harmful Effects. Second, the wrong color choices can cause physical harm. Yes, you read that right. More on that in a bit.
- Psychology. Third, color can affect learners’ moods and emotions. Pale shades of blue and green are calming, while bright red and yellow are stimulating. Orange is said to be a happy color, while black is authoritative.
- Connotations. Fourth, color can affect our perceptions and choices. Because of traffic lights and road signs, we associate red with “stop,” yellow with “caution,” and green with “go” or “good.” Think about how you use those colors in your designs. When I was first getting used to working with Microsoft Teams, I kept hanging up on colleagues when they called. Looking at the interface, it’s easy to see why. The “answer” button is the same color as the video button and doesn’t stand out. That big (not so) threatening button is just begging to be clicked. If they’d made the “answer” button green, that would have helped me press the right button.
Web Content Accessibility Guidelines (WCAG)
The Guidelines You're Probably Familiar With
When thinking about accessible use of color, there are a few WCAG 2.1 (Levels A and AA) standards that probably come to mind for most learning experience designers:
- Don’t use color alone to convey meaning.
- Ensure a minimum contrast ratio of 4.5:1 for regular text or 3:1 for large text, with a few exceptions.
- Ensure a minimum contrast ratio of 3:1 against adjacent colors for interface components and graphics that convey meaning.
These guidelines exist to help people with limited color vision so they’re able to perceive your content. About eight percent of the population has some type of color vision deficiency (also known as color blindness).
However, not everyone who doesn’t see color has color blindness. With loss of vision often comes the inability to see colors. Consider how your vision is different at night. For example, the first time I visited a friend at her house, I had trouble finding it because she told me to look for “the yellow house.” But since I was arriving after dark, I couldn’t tell what color the houses were. Many people with low vision experience near-darkness all the time.
The Guidelines You Might Not Know
The Level AAA guidelines contain additional requirements, including higher contrast ratios (7:1 for regular text and 4.5:1 for large text) and the ability for the user to select colors.
WCAG 3.0, still in draft form, will consider contrast in terms of “perception of light intensity” rather than color. Myth #1 in the article The Myths of Color Contrast Accessibility explains the problems with the current contrast guidelines, with examples showing how luminance affects our perception of color. We need to consider perceptual contrast, as calculated by the APCA Contrast Calculator (still in Beta).
What WCAG Fails to Mention
What many designers don’t realize about use of color is that their choices can cause distress, pain, or even more serious consequences for some users. Saturated colors and ultra-high contrast can trigger migraines or even seizures for some users, particularly when viewing on a screen.
Recently, I posted a “random tip nobody asked for” to LinkedIn, and I was surprised at how much traction it got. It didn’t exactly go viral, but more people reacted and commented on it than usual. In the post, I urged people not to use the bright red available in Microsoft’s standard colors, because it can trigger migraines for me. If you must use red text, go with a darker red that’s easier on the eyes.
Bright red isn’t the only problem. I once had to have a document remediated for me before I could review it because someone “helpfully” color-coded their comments using the built-in highlight colors. I couldn’t look at the bright pink, green, and yellow blocks of text. Not only do bright colors trigger migraines for me, but they also make my vision go wonky, an effect that can last for hours.
Sorry, that’s the most scientific way I have of putting it. I have photophobia (extreme light sensitivity), convergence insufficiency (my eyes don’t play nice together), and astigmatism—and possibly Irlen Syndrome.
In addition to these kinds of vision issues, bright colors can be problematic for many neurodivergent individuals. For these individuals, bright colors are overstimulating and cause stress. For example, autistic people perceive colors more intensely than neurotypical people. Because many autistic people often have synesthesia, they may also perceive certain colors as “loud,” and this can contribute to cognitive overload. For an autistic person, viewing text on a screen with a neon green background (for example) can feel like someone shining a high-powered flashlight directly into their eyes
Design Strategies
So, what does all this mean for your design decisions? Here are some color usage tips for inclusive learning experience design:
- When you want to use color to convey meaning, combine it with something else. The most common example of this is using a green checkmark for correct and a red X for incorrect. Another example is using pattern fills for charts, or adding text labels to them rather than relying solely on the color-coded legend.
- Consider how color psychology will affect your learners’ experience and interpretation of the content. For example, don’t use a bright yellow background in a course on meditation.
- Always check for sufficient color contrast. Do this early, when you’re creating your initial design templates, so you don’t have to redesign your color scheme later in development.
- Whenever possible, give users choices, such as a Light Mode and a Dark Mode.
- Never put red and blue on top of or next to each other. Ditto for red and green.
- If a color choice makes you squint, make another choice. For someone else, the effect may be much worse.
- Rather than using the highly saturated colors that Microsoft includes as “standard colors” (shown in the image), darken the colors and/or use more muted tones. For my vision issues, the dark red, dark blue, and purple colors all work well, and all the ones in the middle lead to Migraine City. But I can’t speak for everyone.
Summary
I hope this post helps you make inclusive design choices when it comes to use of color, thinking beyond just color contrast.
Feel free to comment below with other tips or questions.
Tools to Help Get It Right
Here are some tools you can use to inform your use of color:
Comments
HI Kayleen,
Really good article, you cover a number of often overlooked topics such as overstim (as you mention with red), and the importance of providing both a light and dark modes.
In this regard we are currently evaluating a provisional “max contrast” for dark modes, as too much “point” lightness can cause halation for many users. We are also introducing “The Paper Reading Experience” for light mode, a set of design guidelines intended to reduce visual fatigue.
Thank you for reading,
Andy
Andrew Somers
Director of Research
Inclusive Reading Technologies
Thank you for commenting, Andrew—and teaching me a new word. I hadn’t heard halation before, but that is one of the issues I experience with ultra-high contrast. I love your focus on reducing visual fatigue!