In past editions of the Design to Dollars newsletter, we’ve talked about the importance of web accessibility.
Striving to keep accessibility top of mind for all designs I create is a constant work in progress. Although I am far from perfect (it’s actually impossible to be 100% accessible), it’s a topic that should not just be totally ignored.
One of the easiest, low-hanging fruits to abide by accessibility standards is color contrast.
Color contrast is vital to consider so that all users are able to view your website content properly. With poor contrast, you are disallowing a large population of your audience that find it difficult to read.
Let’s understand more about the contrast ratios for web accessibility.
The AA and AAA criteria
According to the WCAG (Web Content Accessibility Guidelines) 2.0, your text must pass certain contrast ratios to be sufficient to read for those with certain disabilities.
For the WCAG AA (the least difficult contrast ratio to abide by), your text needs to meet a contrast ratio of 3:1 for large text and 4:1 for normal text.
But for the WCAG AAA guidelines, which are much more strict, your text should meet a minimum 4.5: for large text, and 7:1 for normal text.
For reference, large text is considered 19px and above, whereas normal text is anything below 24px.
How to test your color ratios
So now that we’ve learned about the ratios that you need to pass, let’s talk about how you can test for them.
One of my favorite websites I use to test my color ratios is by Learn UI Design. This simple tool allows you to enter the foreground color, the background color, and gives you a grade.
If it doesn’t pass, it automatically will adjust the color to the closest variation possible for it to be passable.
Then, it has a quick and easy click to copy the Hex code to utilize.
Now, if you’re looking to build out an entire palette to abide by web accessibility guidelines, then this Color Palette Builder on github is the perfect solution.
Contrary to the first tool, this one allows you to input all hex codes of your palette, and show you which combinations pass and which ones fail.
As you can see in the screenshot, the boxes in which there’s a color and “Aa” text on it, shows the combo works and passes the AA guidelines.
The grayed out boxes with the slash through them are indicating this is a combination that will not pass and should not be used.
Design with accessibility in mind
As you can see here, designing with color ratios in mind is not difficult to do. In fact, once you make it a habit, it’s easy to follow and becomes part of your process.
At the end of the day, making your website more inclusive and striving to keep accessibility in mind helps you and your brand remain forward-thinking — which will never hurt your bottom line.
Until next time — thanks for reading!
