If you are designing, or re-designing your web site, it is time well spent running your website through the color accessibility tools below to ensure that your site can be seen correctly by as many people as possible. Most of these tools use WC3 guidelines to perform their various operations. If you can actually read and understand them, the Web Content Accessibility Guidelines (WCAG) 2.0 requires, amongst other things, that there is sufficient contrast between text and background color. For a person with a color disability, the colors used on a web site can mean the difference between being able to read text and images or not. 1 in 12 people have some sort of color deficiency.
Vischeck allows you to see your website or an image, as a person with color disabilities would see it.
The Gray Bit web site comes with the tagline, “Experience Color, Wearing Shades of Gray”. That’s exactly what this tool does. You submit your URL on the homepage and Gray Bit converts you colorful web-page into a grayscale version so that you can test the contrast on the page.
Colour Scheme Designer. In the image below, the blocks of color in the bottom right show how red looks to people with Deuteranomaly, which is the most common form of color blindness affecting 5% of men and about 0.4% of women. You can choose a vision simulation which shows you how
The Check My Colors web site provides a simple form on which to submit your URL. It then checks all of the elements on your page against the W3C’s guidelines on color brightness and luminosity on web sites.
And finally, there’s Hue Vue, which is not so much a tool for web designers, as a tool for color blind people. This is an iPhone application and color tool designed to help people with color vision deficiencies to identify, match and coordinate colors. Necessity is the mother of invention as they say, and this app was created by a color blind person who needed a tool to help him discern which color he was looking at. He once had the problem of buying a pink phone for his son by accident, when it should have been grey!
These are just five of many color accessibility tools available. Which tools are you using for testing colors?
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Your First Year in Code