While accessibility is a vast subject and can get incredibly complex, knowing color accessibility is one of the essentials that will make you a better designer.
Poor color contrast can negatively impact how millions of people understand, perceive, and use your product.
The standard for accessibility is called WCAG, short for Web Content Accessibility Guidelines. WCAG provides a set of best practices and guidelines that will enable almost everyone to use digital products.
Perceivable: Can users actually see the content?
Operable: Is the content navigable and usable to users?
Understandable: Does the content and use of the interface make sense?
Robust: Can the content be used on all web browsers and assistive technology?
For color accessibility, the first principle is what matters: “Is the content perceivable by users?”
With that in mind, let’s talk about color contrast standards. WCAG’s guidelines are useful to know if your color contrast is high enough for your users to perceive it.
It’s the visual distinction between a foreground and background color. Basically, it’s the ability to distinguish one color when it’s layered on top of another.
If the contrast between foreground and background colors is too low, some users will have a hard time understanding and using the interface because there isn’t enough contrast to allow them to distinguish certain elements on screen.
Contrast ratios range from 1:1 to 21:1.
1:1 means that there is absolutely no contrast between the foreground and background color. For example, white text on a white background. This is a super effective way to pass secret messages.
At the other end of the spectrum, 21:1 provides the highest amount of contrast possible: black text on a white background or vice versa. If you’re trying to be sneaky, this won’t do it.
To meet minimum standards, normal text must have a contrast ratio of at least 4.5:1, while large text and graphical objects only require a minimum of 3:1.
There are two useful tools to test the color contrast, WebAIM.org and the Stark plugin for Sketch and Figma.
Making colors accessible requires some careful attention, but it’s worth it. It benefits everyone and it makes you a stronger designer. Ensuring accessibility is all about having empathy for all types of people. It’s about being inclusive.
