Designing for Color Accessibility: A Journey Through Auditing and Updating Our Design System
There's much talk about accessible design, but have you ever considered color accessibility? This question recently became my focal point when a client introduced a project with a particular, complex implementation of an accessible color system. It was an eye-opener, not just to the importance of the subject, but to the depth of learning it entails.
Let's dive into how to make our designs' colors accessible using principles many of us are already familiar with.
The Importance of Accessibility
Accessibility in digital product design means creating experiences for everyone, including those with visual, auditory, physical, or cognitive disabilities. As tech professionals, we're uniquely positioned to build an inclusive web, something we can all be proud of. And let's be honest: not considering accessibility to our products is simply rude.
Color accessibility is crucial for individuals with visual impairments or color vision deficiencies, enabling them to interact with digital experiences as effectively as anyone else.
Why Audit Colors in Your Design System?
When we decided to update our colors for better accessibility, we knew it would be a challenge. Color is subjective, and achieving the proper contrast for legibility without compromising aesthetics was daunting. Yet, it was necessary to make our products more inclusive and keep up with legal and ethical standards.
Here's how we approached auditing and updating our color system:
Recognizing the Need for Change
Our journey began with an audit that revealed none of our default text colors (except black) met the necessary contrast thresholds for small text. This realization was our call to action. Designing accessible color systems means ensuring that color combinations have enough contrast to be easily readable by everyone, including those with vision impairments.
Using Tools and Techniques
To tackle this, we used tools like contrast checker in Figma. This approach allowed us to experiment with hues, saturation, and brightness to find combinations that met accessibility standards without compromising visual appeal.
Rethinking Our Approach
The audit and initial adjustments made it clear that our existing color palette needed a complete overhaul. We wanted our new system to offer predictable accessibility, clear and vibrant hues, and consistent visual weight across all colors. This required moving beyond simple trial and error and adopting a more systematic approach.
Embracing Perceptual Color Models
Our breakthrough came when we started using perceptual color models, which account for how human vision perceives color. This approach allowed us to adjust our colors based on their perceptual contrast, ensuring our palette was accessible and aesthetically pleasing.
The Results
After numerous iterations, we landed on a palette that met our goals: accessible, vibrant, and visually balanced. Our new default colors for text and icons now pass the WCAG 2.0 accessibility contrast threshold, and we've established clear guidelines for ensuring sufficient contrast across all our product elements.
Key Takeaways
Accessibility Doesn't Mean Sacrificing Vibrancy: It's possible to have a color system that is accessible and visually engaging. The key is to use perceptually uniform color models to ensure colors appear consistent to the human eye.
Tools Are Your Friends: Whether it's existing tools or ones you create, having the right resources can make the process of auditing and updating colors much more efficient and effective.
Education and Advocacy Matter: Sharing our journey and the importance of color accessibility is crucial. By documenting our process and making our tools and findings available, we hope to inspire and empower others to prioritize accessibility in their designs.
This journey taught us a lot about the complexities of color accessibility and the importance of thoughtful design. By sharing our experiences, we hope to encourage more designers to consider accessibility from the start, ensuring their products are inclusive and enjoyable for everyone.
Remember, designing for accessibility isn't just a professional responsibility; it's a moral one. Let's all do our part to create a more inclusive digital world.