Color is an inherent part of design. Even with the best digital design tools at their fingertips, designers have been known to agonize over choosing a hue or hexcode in the hopes of conveying a specific mood or message in a design. Maybe you can relate. But when you start to look at color through the lens of accessibility, a potential palette becomes a bit more refined and intentional, making color choices that much easier.
Web accessibility in America is a legislative grey area, but color contrast doesn’t have to be.
Web accessibility has never been a sexy topic, but it’s not supposed to be. At its most foundational level, designing for accessibility is about creating experiences that can be enjoyed by the widest range of people possible, and this includes choosing colors that are visible to the widest range of users.
How do you know if your color choices are accessible? It all comes down to color contrast and the ratio between your background and foreground colors.
WCAG Color contrast guidelines: The perfect ratio
Making web designs fully accessible might sound like an overwhelming task, but color contrast compliance is an easy win. It’s also something you can start doing right away.
The first step is to run your color choices through one of the many color contrast accessibility evaluation tools out there, such as the WebAIM Contrast Checker Tool. Unless you’ve paid specific attention to color contrast, there’s a good chance your product will get flagged for color contrast issues. Many common modern UX and UI design practices, such as using light grey to indicate inactive fields, do not pass the Web Content Accessibility Guidelines (WCAG) when it comes to color contrast standards.
WCAG 2.0 Level AA guidelines are considered the gold standard of web accessibility compliance in America and beyond. In some parts of the world, organizations of a certain size are legally required to be in compliance of these guidelines. When it comes to color contrast, the guidelines state that text and images of text must have a contrast ratio of at least 4.5:1.
There are some exceptions to this rule, including:
- Large text (defined as 14 point and bold or larger, or 18 point or larger) must have a contrast ratio of at least 3:1.
- Incidental text, or images of text, that are pure decoration and serve no user purpose do not have to meet color contrast requirements.
- Brand logos do not have to meet color contrast requirements.
When color contrast makes for better design
Many organizations are already looking at the WCAG guidelines as not just good design practices, but as catalysts for making better design decisions and designs that are more usable and robust.
Slack, one of the widest-used workplace team messenger platforms in America, questioned its entire approach to color a few years back. In an article entitled Accessibility, a Powerful Design Tool, Hubert Florin, a UX designer at Slack, explored the company’s decision to refine the color palette to include only colors that meet accessibility standards. In doing so, Slack reduced a palette of 130 colors (of which 32 were different shades of blue) to just 18 total colors.
“The way we approach color contrast at Slack is, if it doesn’t meet color contrast guidelines, why is it there in the first place?” Florin explained.
“Let’s say you have some grey text somewhere that doesn’t match the requirement. That means that some people will not see it,” he added. This may include people who have visual disabilities such as color blindness, but it also includes people that are “using their laptop outside in the sun and they won’t see your text at all. That goes back to, then why are we doing it?”
Florin’s philosophy is that,
If it’s okay for some people to not see a part of your site or your design, then why is that design element there in the first place?
This framework helped him to completely rethink his approach to design and what aspects of design are truly essential to an experience, or are simply nice to have for those who can see them.
Thinking of color contrast this way allows Florin and his team to make logical decisions about which colors to use, when to use them, and why. When Slack rolls out updates, it’s not uncommon for a user to call out a certain new feature or a change to a feature. However, the team is able to easily explain and justify the design decision through the framework of web accessibility.
Initially, abiding by color contrast guidelines can seem like a curveball for companies and designers alike. These guidelines force companies to question and adapt their usage of popular palettes and unique brand colors. The designers at these companies are simultaneously forced to work creatively within these new constraints. Ultimately what this leads to, however, is better designs for all and a clear direction of which colors to use.
Color contrast tools
There are a number of paid and free tools out there that can help UX designers analyze the color palettes you’re currently using to determine if they meet the color contrast guidelines set forth by WCAG.
The following free tools are a great place to start:
Depending on how a user interprets color, they may not be able to see aspects of your design.Is meeting color contrast guidelines mandatory?
Often, people wonder if it’s a legal requirement to comply with WCAG guidelines. The answer depends where you live and who you work for.
American federal agencies and their contractors are required to comply with WCAG Level 2.0 web accessibility standards under section 508 of the Rehabilitation Act. For most private companies, however, it is not technically a legal requirement to be in compliance with these specific accessibility standards. However, the answer here gets a bit tricky.
This is because the Americans With Disabilities Act (ADA) legally requires that “places of public accommodation” must be accessible. However, websites are not explicitly named under the Act, as the legislation was created 30 years ago before websites became commonplace.
That said, many regions in the United States now consider websites to be extensions of business entities under ADA, and thus websites are considered a “place of public accommodation.” Places of public accommodation must meet accessibility standards, which from a web perspective means that these websites should technically meet WCAG standards. Since it’s not explicitly spelled out in legislation, it remains a bit of a grey area.
However, web accessibility compliance is increasingly becoming a legal issue. In 2019, more than 10,000 lawsuits were filed against businesses for discriminating against people with disabilities by not removing barriers. Of these lawsuits, 20% pertain specifically to barriers that prevent website and mobile apps from being accessible. These lawsuits are filed under ADA, specifically what is known as ADA Title III. Web accessibility lawsuits pertain to screen reader incompatibilities, keyboard navigation, color contrast, and a host of other problems.
Almost all of these lawsuits could be prevented if the companies in question followed the Web Content Accessibility Guidelines (WCAG) 2.0.
Dominos Pizza Ltd. learned first hand how important this is back in October. A blind man named Guillermo Robles successfully sued the company after he was unable to order a pizza on Dominos’ website and app using screen reader technology. Since then, more companies have been taking web accessibility compliance seriously in America, including the smaller wins such as color contrast.
In other parts of the world, meeting WCAG guidelines is a government mandate. Just north of the border in the province of Ontario, Canada, home of Toronto, all companies with more than 50 employees must meet WCAG 2.0 Level AA compliance by 2021, including color contrast. You’ll notice that most Canadian government websites and company websites for more regulated industries such as banking and finance are already abiding by these rules.
While web accessibility legislation remains a grey area in the U.S., UX designers can start removing their own grey areas by upping the contrast in their designs and meeting the color contrast guidelines set forth by WCAG. If we continue to see such a high number of legal cases, it is reasonable to assume eventually all websites, not just Federal websites, will be required to meet these standards. Why not put these practices into place now and create a better experience for your users?
Photoshop can soft-proof for color blindness
If you’re new to color contrast compliance, there are tools you can use to get a better idea of how your designs would look to a colorblind user. This can help you clearly see why it is so important.
If you’re familiar with Adobe products, there is a quick way you can check this out in Photoshop using what’s known as soft-proofing. Soft-proofing allows you to get a better idea of what colors might look like in different environments.
Color Universal Design (CUD) is a design system used by some designers as a guideline to display the best colors to as many users as possible. It is very much in line with WCAG guidelines. Some colorblind users have a reduced sensitivity to reds (called protanopia) while others have a reduced sensitivity to greens (called deuteranopia). There are other types of colorblindness as well, not to mention different levels of sensitivities to each color.
This example of soft-proofing shows an original image (A), a color-blind proof (B), and an example of a more optimized design ©.To determine whether a design is CUD-compliant, Adobe recommends the following:
- Convert the document to RGB color mode, which provides the most accurate soft-proofs for color blindness.
- (Optional) To simultaneously view the original document and a soft-proof, choose Window > New Window (Illustrator) or Window > Arrange > New Window (Photoshop).
- Choose View > Proof Setup > Color Blindness, and then choose either Protanopia-type or Deuteranopia-type. (To comply with CUD, check your document in both views.)
This is just one way to explore how different users see colors. This color blind web page filter created by a company called Toptal allows you to enter your url and get an idea of what your web property looks like to users with different types of colorblindness.
Color contrast conclusions
While we ended up getting pretty technical here, the important guideline to remember is that most colors need to meet a color contrast ratio of 4.5:1.
If you can get into the habit of choosing background and foreground colors that meet this minimum ratio, you will automatically be creating designs that are more visible to a wider range of users. Sounds like a win to us.