My step-father is red-green color blind, and growing up, I always found it fascinating to be able to learn from him about how he perceives and interacts with the world around him.
I remember one day he wore a beautiful lilac shirt with a corresponding lilac and gray tie. I had never seen that shirt before, but one thing was for sure: He looked sharp!
When I complimented him, I noticed he was super uncomfortable. It was then I learned that the reason he never wears it is because to him, it appears hot pink.
Hot pink happened to be a color he despised.
When we were traveling full time around the US, I was frequently looking for cool tee shirts to send to him – always sure to avoid red and green clothes. Sometimes, I even had to call my mom to ask about certain colors/shades, because I want him to be comfortable in what he wears.
And, as I have embarked on my Just Marketing® journey as an entrepreneur in recent years, I realize how much of that history has stuck with me, and how much I have been able to apply those valuable lessons to my business.
The gist: Color contrast is the difference in brightness between your text and its background, and WCAG recommends a ratio of at least 4.5:1 for regular text (3:1 for large text). Check your brand colors with a free tool like the WebAIM Contrast Checker, and pair color with text or icons so your meaning comes through even without color.
How Common are Vision Impairments?
According to the World Health Organization (WHO), 2.2 Billion people across the globe have a vision impairment.
One in 12 men (including my stepdad) are color blind. The number is one in 200 for women.
Why You Need to Take it Into Consideration in Your Marketing Efforts
Marketing for everyone has to be just that…for EVERYONE.
So, if you consider yourself a just marketer, which means that all of your marketing is produced through an ethical, equitable, and accessible lens, it only makes sense to keep this huge portion of the population in mind.
Color-blind folks aside, grayscale is also a preferable option for people who want to reduce stress on their eyes while browsing online.
For those who fall within the color-blind population, folks with low-vision, or those who are interested in taking advantage of that grayscale option, using proper color contrast is like a breath of fresh air.
The right color contrast makes your content readable.
The wrong color contrast, on the other hand, makes your content relatively inaccessible depending on who is reading it.
What Color Contrast Ratio Should You Use?
As is our custom here, we always try to proffer ideas as to how we can achieve the change we seek in marketing. So, here are some basic recommendations to get your wheels turning, as well as some additional information that falls more on the techy side of things in the realm of color contrasts.
Use any colors you love, and avoid relying on red/green or blue/yellow combinations to convey meaning
For your visual content, the ideal contrast between the background and the accompanying text color should be at the ratio of 4.5:1. This is as recommended by WCAG. Large text (about 18-point, or 14-point bold) needs a ratio of at least 3:1.
Now, I know it can get overwhelming trying to do the math, especially if you are not a numbers person. But when you feel overwhelmed, remember, that overcoming these challenges means that your online content will be truly accessible, and thus, read by a much wider audience.
And, thankfully, there is a tool called WebAIM Contrast Checker available that makes the process pretty simple!
How Do You Check Your Brand Colors for Accessibility?
I recommend checking your brand colors to ensure there is enough contrast between your primary foreground colors and your primary background colors.
If not, you should consider adjusting your branding colors to make it easier for people to consume your content. This information should be clearly articulated in your business's branding guide.
Practical Tips
- Don't rely on color coding alone on graphs/infographics and charts. Rather, combine with patterns/textures and consider using an icon on your buttons so that identifying their presence isn't solely tied to color.
- Visualize links with an underline (i.e., don't rely on a different color text alone).
- Simple, clear fonts are easiest to read – and many people prefer Sans Serif typefaces over Serif or Script fonts.
- Text can be difficult to read on images, so consider using a solid background or opaque overlay.
- All information that is conveyed by color, such as using red and green to indicate yes and no, should also be conveyed in another format, such as pattern or through text.
- Test your designs and your website in grayscale to see if you still have a positive user experience.
- Ensure that all of your buttons stand out clearly. Your copy too. If they are not, make them more accessible.
The idea is to use color to enhance communication, but to avoid relying on it completely to convey an idea.
The Just Marketing® Podcast: For Equity-Centered Marketers & Entrepreneurs
If you found this content helpful, then you’d probably love the Just Marketing® Podcast!
With a focus on inclusion and accessibility for marketers on social media and beyond, we dive deep into how to market your business through an equity-centered lens.
Why? Because the more people talking about this the better. There is so much work to be done in the realm of equity-centered marketing and we want to build a community that will advance this shift in marketing as we know it.
To make marketing more inclusive and accessible.
Watch/Listen & Subscribe
FAQs
WCAG recommends a contrast ratio of at least 4.5:1 for regular text and 3:1 for large text, which is roughly 18-point regular or 14-point bold. Buttons, icons, and other interface elements should reach at least 3:1. For an extra-accessible experience, the stricter AAA level calls for 7:1 on regular text.
Enter your text color and background color (as hex codes) into a free tool like the WebAIM Contrast Checker, and it will tell you whether the pairing passes. Testing every main color combination in your brand palette, then noting the ones that pass in your brand guide, makes future design decisions much easier.
Red and green are the hardest combination for the most people, and blue and yellow can be difficult for some. The bigger fix is pairing color with another cue, like a label, icon, or pattern, so everyone can understand your message.
Strong contrast helps a lot of people, including those with low vision, older adults, people reading on a phone in bright sunlight, and anyone using a dim screen. It makes your content easier for everyone to read.
You don’t have to give up the colors you love. Try slightly darker or lighter shades, use bright colors for backgrounds or large accents paired with dark text, and save lighter colors for decorative elements. Documenting your accessible color pairings in your brand guide keeps everything consistent.
Place text over a solid color block or a semi-transparent overlay so it stands out from busy backgrounds, then check the contrast between the text and its backdrop. Keeping important information in your caption or alt text as well helps screen reader users. Learn more ways to format text for accessibility.
