Color accessibility is an important part of visual accessibility. People with various types of visual impairments, such as color blindness and low vision, perceive colors in different ways. As a result, the meaning of colors becomes less significant or is completely lost for users with visual disabilities.
Although most articles on color accessibility give design tips like how to pick an accessible color scheme, we will follow a different approach here. Specifically, we will look into a couple of CSS tips you can use to improve color and contrast accessibility. However, if you are interested in the design angle, have a look at our tutorial about how to design for visual impairments by Graeme Fulton, too.
To understand how people affected by visual impairments perceive colors, you can test any color with ColorHexa’s color blindness simulator. For instance, here is how the color red (#ff0000) is seen by people with monochromacy, dichromacy, and trichromacy:
1. Check for Text Readability
Although using high-contrasting colors is an overall goal of accessible design, it’s especially important to check text readability. This means that the text (foreground) and the background behind it need to have a contrast ratio of:
- at least
4.5:1for normal text and3:1for large text to meet WCAG 2.1 Level AA compliance, - at least
7:1for normal text and4.5:1for large text to meet WCAG 2.1 Level AAA compliance.
To learn more about WCAG 2.1 compliance levels, check out W3C’s Web Content Accessibility Guidelines. For a standard website, you should aim for at least Level AA compliance. If your website is specifically for a vulnerable audience such as the elderly or persons with disabilities, try to achieve Level AAA compliance at least for continuous text blocks.
To ensure text readability, you can use an online contrast checker tool such as the WebAIM Contrast Checker. However, such tools usually require you to enter color values manually into the app. As an alternative, you can also use a browser extension such as the WCAG Color Contrast Checker for Chrome that lets you quickly check the color contrast for every element on your page. For instance, this is the color contrast audit it returns for one of our TutsPlus articles:
With Lighthouse, you can also run an accessibility audit that returns all the failing HTML elements that don’t have a sufficient color contrast ratio.
Although you don’t need to have a high color contrast everywhere on the page, you should make headlines, text blocks, hyperlinks, and controls such as buttons and input fields meet at least Level AA compliance for proper text readability.
2. Increase Font Size or Weight
In CSS, there are two quick solutions to fix low color contrast:
- You can increase
font-sizeorfont-weight. - You can adjust the color lightness of either the foreground or the background (see in the next section).
First, let’s see how increasing the value of the font-size or font-weight properties improves contrast accessibility. If you look at the WCAG 2.1’s color contrast requirements above, you will see that for larger text, it’s sufficient to use less contrast. The reason for this is self-explanatory; it’s easier to read larger letters on the screen.
According to WCAG 2.1, large-scale text means:
“at least 18 point or 14 point bold font size that would yield equivalent size for Chinese, Japanese and Korean (CJK) fonts”.
As the WebAIM’s docs mention it, this typically means at least 18.66px for bold text, and 24px for normal-weight text. On the other hand, the WCAG 2.1 docs recommend using relative units rather than pixels so that users can use the Zoom Text Only functionality in their web browser. In numbers, this means at least 1.2em for bold text and 1.5em for normal-weight text.
So, if your design allows it, you can simply increase the value of the font-size and/or font-weight properties, for instance:
h3 {
font-weight: bold;
font-size: 1.4em;
}
3. Use HSL Colors to Improve Color Contrast
If you can’t increase font-size and/or font-weight, you can also adjust the lightness of the foreground color to the background color. In the case of a dark background, you need to make the fonts a bit lighter, while in the case of a light background, you need to make the fonts a bit darker.
There are different ways to do so, but I will show you the best one, respectively how to use the HSL color model to quickly adjust color lightness. HSL stands for Hue, Saturation, Lightness. It’s a less widely used color model than RGB (Red, Green, Blue) and hexadecimal notations, but it’s much more intuitive. CSS-Tricks also recommends it for programmatic color control and browser support is also relatively good (currently, 93.42% of browsers support it globally).
So, let’s see a quick example of how to adjust color lightness using the HSL color model. The aforementioned WCAG Color Contrast Checker extension has found that the blue hyperlinks on our article pages have slightly less contrast than the recommended minimum (4.14 instead of 4.5). If you open up WCAG Color Contrast Checker on the left side of the browser window and DevTools on the right, this is what you will see:
Although the color is defined in hexadecimal notation (#0085b6), you can quickly convert it to an HSL value using ColorHexa:
In the code below, the two CSS declarations lead to the same result. Besides, the hex notation can also be used as a fallback method for the hsl() function:
a {
color: #0085b6;
color: hsl(196.2, 100%, 35.7%);
}
Now, in the Styles tab of Chrome DevTools, you can simply replace the hexadecimal value with the HSL one by double-clicking and overwriting it:
As HSL is a human-readable format, you only need to change the Lightness value (35.7%) to improve the color contrast. In this case, you need to decrease it because on a white background, you will need slightly darker type. You can experiment with it until the WCAG Color Contrast Checker on the left returns a value higher than 4.5 (don’t forget to hit the refresh results button).
On the screenshot below, you can see that it was enough to reduce the Lightness value from 35.7% to 33.7% to meet Level AA Compliance with a color contrast ratio of 4.6. This is such a small difference that it’s barely visible and doesn’t change the aesthetics of the design:
If you want to add the hex value as a fallback to your CSS, you can quickly convert the new HSL value back using ColorHexa’s converter in the same way as before:
a {
color: #007dac;
color: hsl(196.2,100%,33.7%);
}
4. Add a Semi-Transparent Overlay to Background Images
If you use text on top of background images, it’s also worth considering adding an overlay with properly adjusted opacity to improve color accessibility. Have a look, for instance, at the following background image behind the “Explore the World” text string:
In fact, the color contrast ratio is not horrible but it can be certainly improved. You can do so by adding a dark overlay to the HTML element that holds the background image.
The HTML is pretty simple:
<div class="overlay">
<p>Explore the World</p>
</div>
The CSS uses absolute positioning and the ::after pseudo-element to place the overlay right on top of the background image:
.overlay {
position: relative;
}
.overlay::after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.3;
}
p {
color: white;
opacity: 1;
z-index: 999;
}
As you need to darken the background, use a black overlay with an opacity value of around 0.3. In this way, the color contrast between the foreground (white text) and the background will be a bit higher:
To see the code in its entirety, check out the following CodePen demo:
5. Test Colors With the Grayscale Filter
To see how your website looks to someone who doesn’t see colors, you can apply the filter CSS property with the grayscale() value to the body tag of the page:
body {
filter: grayscale(100%);
}
For instance, this is how the TutsPlus Web Design tutorial page looks like without colors:
Even though total color blindness is rare and most people with visual impairments do see different (limited) color spectrums, this technique can still give you an insight into how color loses its meaning and what needs to be adjusted.
Wrapping Up
You can use a couple of easy-to-implement CSS techniques to improve color accessibility. The most important thing is to ensure high color contrast for text blocks, especially when the font size is small. Besides, you can also make use of the HSL color model, image overlays, and the opacity and filter properties to achieve a better contrast ratio between foreground and background elements.
Learn More About Accessibility
If you are interested in more hands-on CSS tips for better accessibility, check out my similar articles on keyboard accessibility and animation accessibility, too.
AccessibilityKeyboard Accessibility Tips Using HTML and CSS
AccessibilityA Guide to Creating Accessible Animations
No comments:
Post a Comment