4 easy ways to check the accessibility in the contrast of the colors of your website
*You can read this article in Spanish: 4 sencillas maneras de comprobar la accesibilidad en el contraste de los colores de tu web.
Many companies don’t seem to care about the accessibility of their digital products. You only have to take a look around the internet to see for yourself.
And the cause of this may be the false perception that what is accessible cannot be beautiful. Also to make a accessible site requires a greater effort. And we hear things like “That is not my potential customer, I am not interested”.
But fortunately for some time now it seems that things are changing. And both government agencies and businesses are beginning to realize how important accessibility is.
Benefits of accessibility
The bottom line is to empathize with the user, and having a non-accessible website means leaving aside almost four million people (only in Spain).
With a non-accessible website, the message of the company is: “I don’t care about you”. And this will mean paying a very high price.
On the other hand, if your website is accessible (alts in the images, hypertexts of meaningful links, content optimized for screen readers …), Google will treat you with “more affection” and will position you better.
Accessibility also helps improve efficiency and response time, reducing site development and maintenance costs. Faster and more usable websites.
And there is also legislation in force regarding accessibility to websites and mobile device applications, which must be complied with. And although this mainly affects the administration, public bodies, state-funded companies and other service providers such as water, electricity, gas, banking, insurance, etc., all companies should follow it as far as possible.
There are many aspects to keep in mind to have an accessible website. But in this article we will focus only on color. That’s enough already.
It is known the case of the orange bank, which had to slightly modify the color tone of its brand to meet the AA level of the WCAG 2.1, required by Spanish law.
If you are interested in knowing more about how the accessibility law affects websites in Spain, you can read Legislation on web accessibility in Spain, Europe and other countries, by one of the people who knows more about accessibility in Spain, Olga Carreras.
4 easy ways to check the accessibility in the contrast of the colors of your website
After a brief intro, I bring you four simple ways (all free), to check the level of accessibility of the contrast of the colors of your website.
One is an online tool that you can use from any browser. Another is a very simple and intuitive app, only for Mac. The third is a plugin that you can use with Sketch and Adobe XD. And the fourth is a Chrome’s extension.
1. Contrast ratio
Contrast Ratio is a simple online tool that allows you to check the level of accessibility that has the contrast between two colors.
The tool have two fields in which you must add the hexadecimal code of the colors (or color name css: aqua, lime, red, white …) whose contrast you want to measure.
In the central circle between the two fields, shows you an index and a color code, the level of accessibility of the contrast between the two colors:
- Red: not accessible.
- Orange: accessible with specifications.
- Green: completely accessible.
Also, if you move the cursor over the circle, you can see more information about the level of contrast and type of accessibility it meets.
In the same screen you can also see how different sizes, styles and text fonts are displayed with the chosen combination of colours.
If the chosen colours have a very low contrast ratio, try modifying them by pressing the up or down arrows on the keyboard, with the selection cursor within the field of one of the colours. If you also do so with the capital key selected, the hexadecimal number increment will be ten by ten.
2. Contraste
Contraste is an application, very simple to use. It works on any element that appears on your computer screen (macOS High Sierra 10.13, or higher). So it works inside the browser as well as inside any other application.
Its use is as simple as opening the application and clicking on the dropper of its “mini” interface window, select a color you want to measure, and then repeat the same thing to select the other color. Information about the contrast will appear next.
The application allows you to open several windows to check different contrasts.
If you click on the settings icon, you can adjust the color on a chromatic wheel.
3. Stark
Stark is a free plugin that you can install in Sketch and Adobe Xd, and that allows you to check the contrast of color that exists between two layers and the level of accessibility.
Just open the plugin, click on the Contrast tab and select within the document the two layers whose contrast you want to check.
In addition, Stark allows you to simulate different types of visual impairments, in order to adjust your designs and make them as accessible as possible for as many people as possible.
The good thing about this plugin is that you can check the level of accessibility while you are designing, without having to leave the application.
Here you can see some samples of how Strak’s visual defects simulation works, for the same image:
4. Funkify
Funkify is an extension for the Chrome browser, which simulates how a selected web page is viewed through the eyes of a person with some kind of disability (not just visual). From dyslexia, blurred vision or partial blindness, to cognitive disability or trembling hands.
The extension has a very nice and human interface, in which characters have been created for each type of disability. And so we can better empathize with the problems of these users.
Funkify is created by developers and designers with this type of disability, in collaboration with several organizations that fight for accessibility.
The example below shows how the El Confidencial website is viewed by people with a type of color vision impairment that alters reds and greens. This deficiency affects 1% of men and 0.33% of women. A percentage of users to take into account, don’t you think?
Conclusion
Well, as you have seen, checking the accessibility of the contrast of the colors of your web or app, is a fairly simple task that only takes a couple of minutes. And believe it or not, not all interface designers do it.
Implement this task within your work process and many users will thank you, and of course, the quality of your projects will have an important plus added, they will be more accessible.
