Web Accessibility Design Principles | 3 Color Contrast Checkers (Chrome & Firefox plugin)

It is not easy to build a web-accessible website from the ground up, so having good gadgets can help us a lot.

In the Web Accessibility Principle, the criterion of color contrast is related to not only the background color and text color, but also the text size. For example, when the text size is larger, the contrast is higher. For detailed explanation, please refer to this article on w3.org.

This article will introduce:

• Web accessibility checker tool: WAVE, Axe DevTools
• Color contrast checker tool: Geenes 

Web accessibility checker tool

If your website has already been established, using a checker will help you understand what needs to be improved.

WAVE by WebAIM

WAVE is a simple and intuitive tool. There are many ways to check the accessibility on your website. You can paste your URL directly, install the Chrome plugin, or install the Firefox plugin.

The evaluation result shows on the left-hand side of the webpage. The corresponding location of erros will be marked on your web page, which is really convenient. You can intuitively click to see the problematic elements.

The color contrast test result is in the "Contrast Errors" field in the picture. For example, 48 color contrast errors were detected here.

Axe DevTools

Axe DevTools is suitable for website development engineers, because this tool does more than marking the location on the web page. It also shows the location and details of the code, and how the code should be improved.

The free version of Axe DevTools is to download the Chrome plugin. It only shows under the tab of Chrome inspection tool. After running the test, the color contrast will be displayed as "Elements must have sufficient color contrast" in the result.

Color contrast checker tool

After testing the color components that need to be improved on the website, how can we build a color system that fits the accessibility principle?

Geenes

What Geenes can provide is to allow you to design a color design system that meets the standards of accessible websites. After choosing your main color, a total of 10 different tones will be generated based on this main color, and to show which tones match the color contrast standard.

Of course, other colors can be added to the color palette as well. And the number of tones and colors can be adjusted freely. For the two circles in the upper left corner, you can click to change the color combination you want to compare, and the most commonly used colors, black and white, are default colors to choose.

There is a "Normal Vision" drop-down button in the lower left corner of the screen. You can click to switch to different color blindness modes to see the effect, which is also a very convenient function.

In addition, the main menu "Design" in the upper left corner will let you preview how the current color design system looks like in lo-fi wireframes on the mobile app or website.

There are many other color contrast tools. For now, this is a tool that I think it provides intuitive experience and powerful functionality. Hope this article is helpful to you!