When we talk about web accessibility, it’s important to talk about colors. Many aspects and functions of a website are represented through colors. For someone with color perception issues, distinguishing details can be difficult if the colors don’t have the right usage or contrast.
The Web Content Accessibility Guidelines (WCAG) provide comprehensive guidelines for web designers and content creators on making website colors more accessible. There’s a strong emphasis on contrast, but the latest version of WCAG has added even more guidelines covering non-text elements.
What Is Color Accessibility?
Individuals with visual impairments may interpret colors and contrast differently from others. People who are color blind may not be able to distinguish two colors on a website, which may make their use of the website challenging or impossible. In other words, they have difficulty understanding information represented only through colors.
For instance, a person with red and green color blindness may not be able to distinguish red text from a green background.
Color accessibility within web accessibility addresses the use of colors in a way that makes the website accessible to all. As colors play a vital role in website design and navigation, making them more accessible is vital to making the web experience more inclusive and accessible.
Contrast is perhaps the most important element of color accessibility as the right contrast ratio can help the color blind and individuals with low sight make out elements more easily.
Understanding Colors on Web
In web design and user interface (UI), colors may be referred to by their names, but in the code, they are represented in three ways. These include:
Red, Green, Blue (RGB) – This represents the amount of red, green, and blue that make up the color. Each of the three is represented by a value between 0 and 255.
Hexadecimal – This representation of color uses the hexadecimal system where the red, green, and blue color values are presented in a format of six letters and numbers. Each color has a unique hexadecimal value.
Hue, Saturation, and Lightness (hsl) – Another way to present colors is through hue, saturation, and lightness. This system is closer to how humans perceive color, as changes in saturation and lightness can increase or decrease contrast.
In addition to the colors, the opacity level also impacts perception. Alpha indicates the transparency or opacity of a color. It ranges from zero to one, where zero is completely transparent, and one is 100 percent opaque. Of course, the lower the opacity, the less contrast.
Contrast Ratio Requirements
The WCAG uses the term ‘contrast ratio’ instead of the more common one color contrast. The guidelines define contrast ratio as the difference between the brightness of two colors. The contrast ratio is presented as X:Y, where X represents one color and Y represents the second, typically white background.
The ratio ranges from 1:1 (white on white) to 21:1 (black on white).
The latest version of WCAG has three success criteria for contrast:
- Contrast (Minimum)
- Contrast (Enhanced)
- Contrast (Non-Text)
Contrast (Minimum)
This requirement is referred to as the Level AA requirement. Here’s what the WCAG says:
- The visual presentation of normal size text or image of a text should have a contrast ratio of at least 4.5:1.
- Large-scale text and images of text should have a contrast ratio of at least 4.5:1.
- Text or images of text that are inactive, decorative, or part of a picture with other visual elements don’t have a minimum contrast ratio requirement.
- Text that makes up a logo or brand image or part of it also has no contrast requirements.
Here are some examples of a 4.5:1 contrast ratio:
Gray (#767676) on white
Purple (#CC21CC) white
Blue (#000063) on gray (#808080)
Red (#E60000) on yellow (#FFFF47)
Even the 4.5:1 ratio may not be readable for some individuals, which is why it’s considered the minimum. Ideally, you’d want a higher contrast for more text accessibility.
It’s important to note that these requirements also apply to text in images. The text presented as part of images must also meet the minimum contrast requirements for it to be accessible. So designers must ensure that the images they are using meet these requirements.
More elements need appropriate contrast ratio gradients, backgrounds, and color changes on actions (hover, clicks, etc.). However, the WCAG does not have any requirements for those.
Contrast (Enhanced)
This requirement is referred to as the Level AAA requirement and is stricter than Level AA requirements.
- The contrast ratio for normal text should be 7:1.
- The contrast ratio for large text should be 4.5:1.
The Level AAA requirements provide a more enhanced contrast, which is generally good. However, as far as regulations are concerned, the Level AA requirements are usually adhered to, as it serves as the baseline for necessary contrast requirements, not a benchmark.
Non-Text Contrast
The recent version of WCAG has also added contrast ratio requirements for non-text elements of websites. This is also a Level AA requirement. Here’s what it includes:
- A website’s visual presentation of non-text elements should have a contrast ratio of at least 3:1.
- These elements may include UI components, except inactive components or components whose appearance is determined by the user agent.
- It also includes graphics that help perceive and comprehend the content. The exception is when certain colors and their brightness level is necessary to convey information.
There’s one important distinction between the contrast ratio requirements for text and non-text. For text, the ratio contrast is between the text and background, whereas for non-text elements, it’s between the element and adjacent colors. This means that the contrast ratio may be enhanced by different elements.
If you’re wondering which type of UI components and graphics this requirement covers, here are some examples:
- Buttons
- Icons
- Social media icons
- Search bars
- Maps
Use of Colors
Aside from the contrast ratio, the WCAG also provides some guidelines on using colors for functions, states, or contexts. While it doesn’t prohibit any color or color combinations, it does prohibit the use of color only for providing meaningful information.
More precisely, this requirement states that color should be used as the only visual means to convey information, prompt response, distinguish elements, or indicate actions.
For example, a table with items of groceries with categories indicated by color may fail to convey this information to a visually impaired individual. In the following table, red background represents meat, green represents vegetables/fruits, and yellow represents grains.
| Grocery Item |
| Chicken |
| Brocolli |
| Banana |
| Oats |
| Beef |
| Carrots |
Such a representation limits the conveyance of category information to colors only. This problem can be addressed by adding another column for the category.
| Grocery Item | Category |
| Chicken | Meat |
| Brocolli | Vegetable/Fruit |
| Banana | Vegetable/Fruit |
| Oats | Grains |
| Beef | Meat |
| Carrots | Vegetable/Fruit |
This requirement is most relevant to the anchored text in the body text. While it’s easier to identify links in main headers and buttons, visually impaired individuals may find it difficult to distinguish links represented through color only.
There must be another visual cue to distinguish the anchored text from the other text. An underline can help distinguish the linked text. The underline may appear at all times or on action (hover or focus).
You may also like: What is the Purpose of Accessibility for Shopify Stores
How to Improve Color Accessibility?
Color accessibility is an integral component of web accessibility, and implementing WCAG recommendations can be the first step toward fixing color problems on your website. Nevertheless, doing so can be challenging.
Using a web accessibility tool is the best way to identify and resolve color accessibility issues with your website. If you’re looking for a Shopify accessibility tool, Accessibility Spark can provide you with quick, automated solutions for fixing such issues.
Whether your text has low contrast or your links are not visible, with the help of Accessibility Spark and its AI-backed scanning, you can comply with WCAG standards in no time.
Using a tool reduces your work considerably instead to applying the recommendations manually. Some websites, especially ecommerce stores, can have hundreds of web pages. A tool can speed up the work and implement changes automatically.
You’ll need to pay attention to images, graphic elements, headings, and text. The text in images should also follow the contrast ratio requirements from the WCAG. Otherwise, your website’s accessibility would still be low.
Make it a principle to follow the contrast ratio and try to go as high as possible, so more people can easily access the text, images, and graphics on your website.
Conclusion
Web accessibility, especially Shopify accessibility for ecommerce stores, is incredibly important to increase audience, be more inclusive, and avoid legal troubles. Part of that is ensuring that the colors used on the website have ample contrast to be distinguishable by the visually impaired and color blind. Follow the requirements set in WCAG and use Accessibility Spark to improve your website’s accessibility rating. In just a matter of minutes, you can find the websites’ problems and implement changes immediately. Whether you use Shopify or another platform, this tool can help you establish a more accessible online presence.