You’re probably not doing it wrong — you’re just not doing enough.
Color accessibility is the practice of designing with color in mind to ensure that users, regardless of their visual ability, can perceive and understand your content. For designers, it usually begins by making sure you are choosing colors that pass contrast checks — but it shouldn’t stop there. Most contrast checkers only provide you with the knowledge of PASS or FAIL for text on backgrounds. Well, I’ve got some breaking news for you: that’s not enough, and sometimes, you need to break the rules*.
Let’s explore some key considerations for color accessibility and practical tips for implementing them in your design thinking process.
What do the Numbers Even Mean?
It is considered common knowledge that Contrast Checkers are there to help evaluate color combinations to attempt to meet the minimum requirement procedure presented by the Web Content Accessibility Guidelines (WCAG). Without going into the science, the formula which produces your ratio number essentially compares the distance between the luminance value of two colors (usually a foreground text and a background space).
These are the numbers you need to know (for now):
WCAG Level A — The minimum contrast ratio required for normal text is 4.5:1, while the minimum ratio for large text and user interface components is 3:1
WCAG Level AA — The minimum contrast ratio for normal text is the same as Level A (4.5:1), but the minimum ratio for large text and user interface components is raised to 4.5:1
WCAG Level AAA — The minimum contrast ratio required for normal text is 7:1, while for large text and user interface components, it’s 4.5:1
The Worst Ratio — 1:1 (the luminosity between two colors is the same)
The “Pure” Ratio — 21:1 (the contrast ratio for true White and true Black)
It’s crucial to recognize that achieving Level AAA compliance can be extremely challenging, and is oftentimes at great odds with your branding and design objectives/limitations. However, it’s essential to encourage your teams to strive for at least Level AA compliance, and push for as much AAA compliance when possible.
For further reading on this topic, I recommend checking out these two sources: here and here. (PS: “a11y” is shorthand for “accessibility” — the “11” refers to the 11 letters between “a” and “y”!)
Contrast Against Context
Inactive Button States —
Achieving good color contrast is not always about contrasting with the background, but rather with the context in which a component appears. While there are some color contrast rules to follow, there are cases where it may be necessary to break them intentionally. For example, when designing an inactive/deactivated button, you‘ll likely need to use a color that does not meet the preferred contrast ratio, and that’s OK.
What we see here is that the color combination for the Disabled Button FAILS the contrast check. If we try to adjust to PASS that check (the Active Button), what we find instead is a button that doesn’t actually look disabled. It looks active. When we’re faced with a disabled element (such as reaching the end of a slideshow carousel), we don’t want the user to waste cognitive load trying to engage it — it’s inactive! You’re not contrasting against the background — you’re contrasting it against its active state.
It isn’t only for inactive/disabled buttons, either. Decorative accents (line-work or patterns) that are not essential for user understanding also fall into this category. For visually impaired users, decorative pieces risk distracting, or conflicting with, the goals of the user. Another great example is the text link’s characteristic blue: the link’s color choice is less focused on contrast against the background, but against the text copy around it.
Using the Silhouette Method —
As designers, we are at times faced with the unfortunate “brand aesthetics over everything” mindset from some of our clients. Let’s pretend you are unable to convince your stakeholders to sacrifice brand for accessibility — what can you do? The easy answer is looking beyond color to convey meaning.
We can use iconography, context, text, functionality, and other myriad of components to encourage understanding. One way I often approach colors for graphic elements is inspired by the Silhouette Drawing techniques I was taught in studio art classes. The goal is to test how well you’ve drawn an object by removing the “details” and leaving only the shadowed silhouette. Ideally, you’re still able to decipher the image despite lacking some crucial pieces of information.
We can also use the silhouette mindset to help marry the dynamics between brand management and a11y needs. If find yourself in a position where you are unable to adjust the colors used, think about the shape. When building out elements like a pie chart, where many colors sit against each other at once, allowing contrast could be further out of reach. If we remove the colors (“the details”) — can we decipher it?
As Graph A shows us, not without the context (ie. labels or introduction content). But Graph B shows us that we can utilize the white background to “separate” the data and create additional shapes to help assist the user’s understanding of that data. Ultimately, the key is to strike a balance between following guidelines and adapting to specific design contexts to achieve optimal outcomes. On its own, it’s not the answer, but the idea itself asks the designer to engage in experimentation — to learn from other disciplines and view projects through interdisciplinary lenses — on behalf of accessibility.
Be Wary of Easy
The 21:1 Debate —
If the highest possible contrast is 21:1, why is that not optimal? You may have heard before that you should never use true black (but an off-black like #333333) or true white (but an off-white like #F2F2F2) — while sometimes debated, it’s a commonly-held view for designers in the community.
For some Color Vision Deficiency (or CVD) populations, 21:1 can cause causes an issue known as halation. Halation reduces the readability and can cause physical responses like headaches. But this is only true when our 21:1 refers to when white text is used on a black background. When we are using the reverse, we find the opposite effect to be true: black text on white backgrounds are optimal for use. Why is this important? This practice highlights one of the limitations of easy online checkers — your ratio score is a guide, and at times a legal minimum, but your color combination and visual accessibility knowledge matters.
Test your Users
People with Color Vision Deficiencies have varying symptoms depending on which type of CVD they experience. Although WCAG is industry-standard, I’ve seen ongoing discussion about the accuracy of its methods for certain groups. To address these discrepancies and improve the framework further, a new version of WCAG, WCAG 3, is currently under development. The new guidelines will incorporate more nuanced and flexible criteria to better account for the diverse needs of users. However, as with any scientific endeavor, we need to approach any guideline with a critical eye and test them with real users to ensure their effectiveness.
Understanding the diverse and unique accessibility needs of your users is crucial. While striving for the perfect interface that benefits everyone everywhere, we acknowledge that there is still a long road ahead. Since there is currently no known “one-size-fits-all solution”, it’s essential to gather diverse user feedback and make necessary adjustments accordingly.
It’s important to trust your users and address their pain points proactively. By doing so, you can ensure that your design is optimized for the best possible user experience, providing a valuable and inclusive product to all users. So, listen to your users and lean into their feedback to create a design that meets their needs.
WCAG provides a valuable starting point, but we need to consider the unique circumstances and context of our accessible users outside of the checklist in order to ensure that our designs are truly inclusive. Doing this involves staying up-to-date with new developments in accessibility guidelines, reading discussion around the community, and conducting thorough user testing to identify and address any limitations in our designs.
WebAIM (those guys who brought you WCAG) have a great repository of surveys and resources — take advantage of these guides. Also, I would highly encourage you to sign up for newsletters to stay up-to-date on the industry.
Background on the Series
This is the first article in the Advanced Web Accessibility Design | Critical and Intentional Approaches series.
Ever since my introduction to the design industry, I’ve been passionate about accessibility in design. My first job was with a healthcare solutions start-up where our clients were not the end-users of our products. This meant that we had very little interaction with the people who would ultimately be using our products, leading to poor outcomes for both our reputation and the end-users themselves. After leaving that company, I made a commitment to never overlook accessible populations again.
Drawing on my years of experience in digital design and problem-solving, I’ve created this series to help elevate the importance of accessibility beyond being a mere buzzword. As a designer, I’ve noticed that the conversation around accessibility often focuses on the basics, leaving out the nuances and complexities of the topic. I believe that this oversimplification does a disservice to both designers and the people they design for. My goal is to encourage and empower other designers to go beyond surface-level compliance and instead strive for genuine impact.
Disclosure
While I am not a certified accessible designer, researcher, or color science specialist, I am sharing some tips that have helped me make better decisions in my own work as a digital designer. If you notice any issues or have anything to discuss regarding the article, please do not hesitate to contact me via email.
I highly encourage you to seek advice and guidance from professionals in the field, as they possess the necessary knowledge and expertise to address specific concerns. It is important to note that while my suggestions may be helpful, they may not always be perfect, so it’s essential to rely on professional guidance when needed.
*Breaking the rules of WCAG AA standards should be avoided as much as possible, if not entirely, as doing so may result in legal repercussions in some states or countries. For instance, when dealing with an inactive button state, it’s crucial for your developer to ensure that the backend appropriately labels the button as inactive, according to the WCAG guidelines.
This article was originally posted on Medium by me on April 4, 2023.
Comentários