Accessibility is hard. There are many facets to it, and many checkpoints to instill into our process. The fact is that it's a part of design that does not come naturally to those without any disabilities (yet!), and it’s not taught as part of our workflow. Like I said in my article about adding new techniques to our processes, these things take time, practice and a strong commitment to understanding options.
In addition to prioritizing accessibility, we must understand different techniques to both implementation and testing. There are many steps toward accessible apps. The standards with which I’m becoming the most familiar with are WCAG 2.0. There are many disabilities to consider when aiming for an accessible experience, and I encourage exploration and empathy-building as an ongoing practice in these areas.
For this article, I’m going to focus on color contrast because it is something I have been deep into lately.
Aesthetics and Accessibility
While the benefits of accessibility eclipse its difficulty to implement, using WCAG 2.0 - approved color contrast ratios can be considered limiting. Many designers feel that there are only so many combinations available. This takes us back to the days of “web safe” colors, and this is an understandable limitation of concern. It feels impossible to create a cohesive and unique experience by using similar color combinations over and over as defined by the threshold ratios of necessary requirements.
While attending An Event Apart, Samantha Warren had an inspiring talk about being creative to use design elements to represent your brand. She covered a lot on color and typography and how small details can not only make you stand out, but enhance your user’s experience. As inspired as I was after it, I couldn’t help but wonder how these principles fit in to a mandatory accessibility requirements for web applications.
I chatted with her briefly on the matter, and one of the things she suggested was to consider the use of other design elements to compliment a more your contrasted color palette, such as typography. As a type fan, I was excited at this prospect. I think that type can play a bigger role in branding and interactive comprehension than it often does. While it’s certainly important and effective, this still feels less than ideal for addressing a delightful experience using color.
One practice I can suggest is to set a limited color palette. In the product I design for, we have lots of white space, a dark color and use brighter color combinations for accents and even non-interactive elements. It’s important to know the difference between readable text, decorative text and other interactive elements and how contrast guidelines differ between them.
It’s also important to know the limitations of some color contrast testing tools such as. For example, when using a browser plugin to test the contrast ratio, these tools do not detect text inside images. Additionally, they are only helpful with built pages, not in the design phase if you’re using a design tool such as Sketch or Photoshop.
With so much user generated content, Facebook’s accessibility team confronts common issues with those of us who work on a publishing platform app. Some of the accessibility efforts they have implemented are:
- Pulling captions from user-generated images into alt tags
- Utilizing more information from user media to read back in screen readers
- Reading back the search suggestions to impaired users as they search
Color-wise, they have stuck with a limited color palette which allows focus, contrast and some hierarchy.
They have also put efforts into testing and enhancing High Contrast mode using browser extensions. But, function is certainly above form/aesthetics in this scenario.
Design is about embracing limitations. Without them we are merely decorating and guessing. Any good designer will tell you that they feel lost without some sort of guidelines and that sometime we just need to get used to working inside them (i.e. changing our workflow).
The reason contrast matters in digital world is because sometimes that’s the only cue a user has to be able to interact with. This is a key point when designing that can help bridge the gap between pure high-contrast and aethetics with branding considerations.
Having it all
Personally, I think the best way to have both is to design visual branding with accessibility in mind from the very beginning. It’s hard to “bolt on” a color scheme that is accessible and still matches your brand, though often the need arises after a product is built. This is just a reality, but understanding the principles behind best practices increase chances of a successful accessibility effort no matter when it’s implemented.
Don’t rely on color alone. Even traffic lights don’t rely on color alone; they also use positioning to communicate meaning. Think of ways to communicate meaning with color as a secondary meaning. Here are some really helpful tips when planning out a color system with accessibility in mind.
While browser extensions exist for high-contrast versions of all websites, it’s important not to completely rely on a user initiating these. Remember that ultimately, an accessible experience can be a better experience for all users.
As I research further, I plan to share more examples of applications that implement beautifully branded experiences that are also accessible.
Tools and Further Reading
There are many contrast tools to check our work as we design.