Test the accessibility of your website: color and contrast
- January 4, 2023
- 3 minutes
As of September 23, 2020, the websites of government and semi-government agencies must comply with the guidelines of the WCAG 2.1. New websites do have to comply with these rules since September 2019. Commercial websites will also have to deal with stricter legislation on accessibility in the coming years. It is quite a job to understand how to interpret all these guidelines and to do something with them. That is why we will share some useful tricks with you in the coming period to test the accessibility of your website. They are a good start to create an accessible website.
How accessible is your website?
It is useful to first test how the accessibility of your website is. You learn a lot from it and it also helps you to take more targeted measures. In this series of blog articles, we are going to share five simple tests with you. The following topics are covered:
- Color and contrast
- Enlarge font size
- Use the keyboard
- Automatic testing
- Use of a screen reader
So we kick off the series with the subject “color and contrast”.
Color contrast for the visually impaired and color blind
Websites become easier to read if there is sufficient contrast between the text color and the background color. This is of course important for the visually challenged, but also for color blind people, for example. In the Netherlands, 8% of men are colorblind and 2% of women. That is a large group. In addition, you help people with healthy eyes, who have put their screen on energy saving or work in circumstances with a lot of backlight or light. The difference in contrast is not only important for text, by the way. You also have to take into account colors in tables or graphs.
Minimum contrast requirements for maximum accessibility
The WCAG describes the minimum requirements for contrast ratios. A good contrast ratio starts at 4.5:1 for plain text. A contrast ratio of 1.0:1 indicates no contrast at all and 21.0:1 is the maximum possible contrast. Large text (from 18pt) and bold text (from 14pt) are easier to read and therefore need less contrast. The minimum contrast ratio for large and bold text is 3.0:1. As mentioned before, minimal contrast ratios also apply to elements in the website without text, such as tables and graphs. A minimum contrast difference of 3.0:1 is sufficient. But there are a few of exceptions. For example, you do not have to adjust your logo to meet the accessibility conditions. Good contrast is important, but do not exaggerate. An extremely high contrast ratio of 21.0:1 (between pure black and white for example) does not read well for many people. Do these numbers mean little to you? Fortunately, there are handy tools with which you can test your color contrast.
Contrast accessibility tools
A number of websites and contrast accessibility tools are available to help you determine the contrast ratio between foreground and background color:
Contrast-ratio.com: website where you can easily fill in the foreground and background color to calculate the color contrast.
Contrast Checker: website of Acard Communication, a Canadian advertising agency, where you can fill in colors and calculate the contrast.
Chrome development tools: Chrome has developed the Color Picker tool, which allows you to determine and improve color contrast.
Firefox development tools: The Firefox development toolkit includes the Firebug component. Here you can determine your colors and compare them with the minimum contrast requirements of WCAG.
Luminosity Color Contrast Ratio Analyzer: This free tool tells you the contrast value of two selected colors. You can also immediately see whether the combination meets the requirements of WCAG 2.1. The Luminosity Color Contrast Ratio Analyzer was developed by Juicy Studio in England.
Want to know more about making your website more accessible? In part 2 of this blog series we will zoom in and out of your website.