Accessible Colors
Use of color in digital content is valuable for conveying information and enhancing engagement for many users; but there are considerations when using color so that all users can access the content.
Video Distinguishable Contrast
What in the world is WCAG: Distinguishable
Choose your text and background colors wisely. They need to stand out from each other like black text on a white background.
[Image of a black and white contrast ratio with a black cat]
That one is a 21 to 1 ratio, by the way.
There are plenty of other combinations that will fulfill the WCAG requirements. It may be easiest to just aim for at least 4.5 to 1 universally. WCAG does allow for 3 to 1 ratios if the text is above 18 points or is 14 point and bold. But really the more contrast the better.
And when it comes to shoving text on top of an image, consider using a scrim. That's the fancy word for the layer underneath the text. These can be semi-transparent, but the point is to make the text easier to read by ensuring the contrast is decent no matter what part of the image the text happens to sit on, as this can change.
Color contrast
86.4% of home pages have low contrast text — making this the most common website accessibility failure.
Low color contrast makes your content hard to read. This means the colors or brightness of the text and its background are too similar.
Aim for a contrast ratio of at least:
- 4.5:1 for normal body text (paragraphs)
- 3:1 for larger text (headings).
(Body text should be 16px and larger text 24px and bold.)
If Twingenuity created your branding, you’ll find accessible color combos in your Brand Guide booklet.
Free color contrast checker tool
Use the free WebAim’s Color Contrast Checker to check the contrast between two colors.
Example of good contrast using the WebAim Contrast Checker.
Example of bad contrast using the WebAim Contrast Checker.
Color as information
Avoid using color alone to convey meaning. When using color to convey information, such as assigning meaning to different colors, be sure to convey the same information in an alternate way (e.g., labels, icons with alt text) for users who have difficulty perceiving color.
Watch your color combinations
If someone is color blind, colors can blend together making them indistinguishable. This makes using your site, understanding content, and performing tasks becomes more challenging.
Common color combinations to avoid:
- Red and green (most common)
- Blue and yellow (second most common)
- Green and brown
- Purple and blue
- Red and black
In Summary: Color is a powerful tool for engagement but must be used thoughtfully to ensure accessibility. Maintain sufficient contrast ratios for readability, avoid relying solely on color to convey meaning, and steer clear of problematic color combinations to accommodate color-blind users.