Color is beautiful! It’s fun to use color to add meaning to your text and images. Your visual styling can add bold drama or soft emotion. Just pay attention when you are combining colors to ensure that everyone experiences the full emotional impact of your design. It’s easy and I’ll show you how!
Strong contrast in your visual design is important so that all users experience your design the way it’s meant to be enjoyed. Soft contrast is lovely, but if it’s too subtle than it might be totally inaccessible to a substantial portion of your audience. I’ve written previously about the importance of smart use of color and contrast in elearning, and I’m a big fan of following the CRAP principles as well, which feature Contrast as one of the four most important things to consider in design. GCFLearnFree has a lovely free graphic design tutorial that cover these principles.
If you are designing for a government-funded agency or institution, it’s essential to include legally acceptable contrast in your projects. The legal requirement for contrast is a ratio of 4.5 to 1 (see Contrast Checker, below)!
That’s the difference between this, which has insufficient contrast for accessibility purposes even though it may be perfectly readable to you:
And this, which has perfectly sufficient contrast and would meet accessibility standards:
WebAIM Contrast Checker
If you have no idea what a “ration of 4.5 to 1” means, don’t worry. There’s a tool for that! WebAIM has a fantastic Contrast Checker that will verify your color combinations for you. Simply input the hex codes for your colors, or pick a color from the chooser. The Contrast Ratio appears below, updating instantly depending on your choices:
The best way to avoid color contrast issues is to pick out a color palette for an entire project and run the colors through the Contrast Checker in advance before using them. Pick out colors for your fonts as well. The Contrast Checker will let you know if the chosen colors work for fonts of different sizes (the smaller font you use, the stronger the contrast needs to be).
Generally you will need your colors to pass at level WCAG AA (AAA is a higher standard).
Additionally, color should not be the only way that you are conveying meaning. For instance, using a red font to emphasize text does not meet accessibility standards. But bolding that font in addition to turning it red will add an additional layer of meaning and visibility for all users.
With a color palette picked out in advance, you can rest assured that your project will have no accessibility problems when it comes to contrast.
Other Color and Contrast Problems
There are a few other pitfalls to avoid when it comes to ensuring that your color combos pass accessibility standards. Take color blindness into account when layering text over color. There are two classic color combos to avoid so that users with color blindness may access your content.
Red-Green color blindness is most common. That means that you should avoid color combos like this one, which would be unreadable to those with red-green color blindness:
Blue-Yellow is another combo to avoid!
Next, avoid color combos that seem to vibrate. Here’s an example:
Oof, red on purple hurts my eyes! It’s hard to read, and the red seems to want to vibrate away from the purple background.
When in doubt, keep it simple when it comes to text on a background color. Light on dark provides a strong contrast and is the best way to ensure accessibility for all:
If you are not sure whether a color vibrates, ask a friend, and then use the WebAIM Contrast Checker to ensure that your colors are good to go!