Making Color Contrast Checks a Part of Your Web Workflow

So you have a great looking website and your checklist has you covered. But does your checklist include a color contrast check? Are you wondering what that is?

No, we are not just talking about great looking colors here. More than 7 to 15 percent of males are color blind. Also, as people keep growing older, they have difficulty reading low contrast text. In addition, many of the websites today are viewed on smaller devices, such as mobile phones, and when out in the sun, color appear different. Small screens also make it difficult to read text that does not stand out from its background color. That constitutes a significant number of people with a need for high contrast text.

That’s the reason why a color contrast check is mandatory if you want your website to be accessible to most people. The color contrast used in your website needs to take into account the needs of people who are on the spectrum for color blindness, those using smaller devices (and different light conditions), and of course, the elderly.

Compliance to WCAG 2.0 (Web Content Accessibility Guidelines) norms ensures the accessibility of a website to color challenged people. If you did not do the color contrast check before designing your website, you might have to discard some of the vibrant colors or shades you have chosen.While it’s not a great position to be in, it’s nothing to panic about either! Checkmycolors.com’s color contrast tool can help you quickly find out which of your colors may not be WCAG 2.0 compliant.

That said, making your website accessible to color blind people does not mean you need to go for a bland and colorless website. Far from it! In fact, paying such close attention to your colors will enable you to develop greater sensitivity to design your website with colors that are even more vibrant ie visually accessible and give your website even greater appeal. Let’s first walk through the basics of color contrast and then we’ll move on to some tools and techniques you can use to make color contrast a part of your workflow.

Understanding the Spectrum of Color Blindness

The term ‘color blindness’ actually refers to a broad spectrum of color vision impairment. Not all afflicted people are blind to the same colors. The common types of color blindness are:

•  Protanopia: reduced ability to see red colors
•  Deuteranopia: reduced ability to see green light
•  Tritanopia: reduced ability to see blue light
• Achromatopsia: reduced ability to see most colors

Protanopia and deuteranopia are more common while the other two are very rare. That does not mean we cannot use red and green in websites. It just means we need to be sparing in the use of these colors.

WCAG 2.0

While talking about contrasts, it’s not just images we need to look at. Color contrast for text plays an important role as well. WCAG 2.0 (guideline 1.4.3) norms dictate the minimum contrast that we need on webpages when displaying textual content. The color contrast between the foreground or textual color and the background color can range from 1 to 21. The minimum requirement is a ratio of 3:1. That leaves us free to unleash our creativity safely with all the other shades and hues.

Level AA and level AAA are used to differentiate the amount of rigor required in the color contrast.

• Level AA

○     For normal sized text, the minimum color contrast should beat least 4.5:1.

○     For large sized text, the minimum color contrast should beat least 3:1.

• Level AAA

○      For normal sized text, the minimum color contrast should beat least 7:1.

○      For large sized text, the minimum color contrast should beat least 4.5:1.

Integrating checks into your workflow

Instead of waiting until you finished designing your website, it is a good idea to integrate contrast checks into your workflow, so you do not need to re-do or change your color scheme later. Doing the work up front, during your design process, makes sure you have it handy once you start execution. So how do we go about it?

1. Map out your desired color scheme. Jot down a quick list of text and background colors you wish to use on your website. Feel free to refer to other websites using accessible color contrasts. When starting to build your color palette from scratch, Color Palette Accessibility Builder and Color Extractor are good tools to use. As the name suggests, the Color Extractor website extracts the colors from a website of your choice to help you build your own palette. Of course, your example website should have colors that are accessibility compliant. A good rule of thumb is to use cool colors for the background and warmer ones for the foreground text.
2. Check whether chosen colors are accessible. Traditional methods used colored goggles to do a contrast check for color blindness. However, we now have several online simulators that do the job. Checkmycolors.com  can help you check whether your colors and text aer WCAG compatible.Paletton.com, WebAim and color-blindness.com are other online resources to screen out inaccessible colors.  lets you quickly check color contrasts for accessibility. Paciellogroup offers you a free downloadable tool to do the same job.
3. Create a mockup or use placeholders to build content and use the selected colors to build a sample website for further testing.
4. Run a grayscale test. It is easier to judge color contrasts in grayscale compared to viewing website in color. After you are done choosing your color palette, converting all your colors to grayscale can be of help to evaluate the color contrasts used in a website. Gray-bit.com is among online resources available for your grayscale check.
5. Test on color blindness simulators to screen out non accessible colors. Chromatic Vision Simulator and VisionSim are among free mobile apps which help you check your colors for various kinds of color blindness.
6. Double check your buttons and CTAs. Using colors to indicate the functions of buttons is not enough. In some cases, red and green change to some other colors. You then realize the need to also have contrasting text to explain the button function.
7. Adjust your colors, hues and fonts to bring them within accessibility values. Tanaguru Contrast-Finder will suggest other colors if the colors you selected do not offer sufficient contrast.

By following these steps you can make color contrast a de-facto part of your web workflow. The wide range of tools and simulators available today ensures that you don’t waste time, and effort, in figuring out the right contrast and colors.

Are you already including color contrast checks in your workflow? How do you go about it? Share with us in the comments on Facebook or Twitter.