UI Designer’s Guide to Checking Color Contrast
What colors make you cringe? Traffic Cone Orange? Puke Green? For me, it’s Neon Tie Dye. The combination of bright colors is often too optimistic and loud for my typically stressed self, clashing with my mood.
Colors are used to influence emotions in design. In fact, according to Cameron Chapman, a designer who published two books about web design, “While color is sometimes thought of as a purely aesthetic choice by some designers, it is, in fact, a key component of the psychological impact of a design on users, and as such, its UX.” Color quite literally affects our psychology!
This makes colors so fun to choose in the beginning of interface design, but really hard to decide on. Additionally, the contrast between a background and text can make it harder to find the perfect color combination.
However, accessibility in terms of color contrast does more than establish contrast rules. These rules have profound effects on users with low vision, and they define parameters to ensure that any consumers of your web design are comfortable reading the text.
Color Contrast Isn’t Only for Low Vision Users
We all benefit from meeting Web Content Accessibility Guidelines (WCAG) color contrast standards. Take this website footer for example:
This was the footer for the website of a company at which I was a UX Design Intern. While going through the website, I began testing the footer links to see if the pages they linked to were designed consistently. However, I quickly realized that there was a more obvious problem with the footer: I could barely read it. Even with glasses, I found myself having to lean closer to the screen and squint to make out the words. This left my eyes feeling unnecessarily strained afterwards.
There was clearly a problem with the text contrast. But my personal experience of low readability wasn’t enough evidence — I needed proof that others would face the same issue. To gather this data, I tested color contrast between the text and the background and saw that the ratio did not meet WCAG.
WCAG 2.1 standards say to have a minimum of 4.5:1 text to background contrast. Unsure how to measure the text-to-background contrast, I found myself avoiding implementing this color scheme into my interface designs. However, my mentor recently shared with me an amazing tool that not only measures the contrast of anything on your computer, but also includes details on which WCAG standards it is (or isn’t) passing.
Using the CCA
The Colour Contrast Analyser (CCA) is a free and quick tool to use in checking color contrast. It takes seconds to use — perfect for designers prioritizing quality and efficiency at the same time.
Step 1: Download the program
You can download CCA from The Paciello Group. The Paciello Group is a leader in accessibility, and has great resources!
Step 2: Open CCA on your computer
Once you open CCA, you’ll see a screen like this. The top two sections are for selecting colors to compare, and the bottom section, “WCAG 2.1 results,” will show whether the contrast passed the WCAG standard — you can see that there is a minimum, enhanced, and non-text contrast standard. The little arrows in the headings for these standards will reveal more details when clicked.
For the footer example above, the light blue text on light grey background does not pass.
Step 3: Put in Your Foreground Color
The “Foreground Color” will be the color of your text. You can type in words, HEX codes…
… or use the eyedropper tool, which enables you to choose any color right off your screen!
Step 4: Put in Your Background Color
The background color will be the color your text sits on. Use the same process as in step 3 to find this color. Once you have selected the color, CCA will measure the contrast and display your results.
All Done!
That’s it! 4 quick steps to testing color contrast. If you want more details on the contrast of your chosen colors, you can extend the results for more details.
After going through this process myself with the web footer example, I re-designed a condensed example of what the footer might look like within the color palette of the company. You can see that the “After” version is more readable, with a contrast of 14.1 (based on the CCA), and it does pass WCAG.
After finding that your text-to-background ratio might not meet the 4.5:1 standard, you need to try changing things around for a solution. This is the challenge of finding color combinations that will meet the color contrast ratio from within your palette. But don’t be discouraged — constraints incite creativity, and your final product will be not only more readable, but also accessible for everyone.
Resources to Check Out
Looking for more details on WCAG color contrast standards? Check out WebAIM.
Want to check out other awesome color contrast tools? Check out Stephanie Walter’s article.
