Apr 2025
Great design serves everyone. When we create digital products with accessible color systems, we open experiences to the full spectrum of human diversity. Color accessibility matters to approximately 300 million people worldwide with color vision deficiencies—our teammates, family members, clients, and users.
Inclusivity stands as a core value that shapes our design decisions, client partnerships, and company culture. The choices we make about color affect how people understand, navigate, and engage with digital products. For millions, thoughtful color choices mean the difference between frustration and delight.
Color vision deficiencies influence how people perceive colors and color combinations:
These variations can create very different user experiences within the same interface. A warning button that relies solely on red might be invisible to someone with protanomaly. A chart distinguishing data through green and red lines might communicate nothing useful to someone with deuteranopia.
We use Figma plugins like Stark to test for color contrast and simulate color blindness.
Contrast forms the foundation of accessible color usage. The Web Content Accessibility Guidelines (WCAG) provide clear standards:
While AA compliance establishes a baseline, striving for AAA provides a better experience for more users, including those with low vision or viewing screens in bright environments. We try to always meet double-A standards, and triple-A when possible.
But numbers only tell part of the story. Testing across devices and lighting conditions reveals contrast issues that calculations miss. Sunlight on a mobile screen changes everything.
Color should never be the only visual means of conveying information. Always pair color with:
We apply this principle systematically. Error states combine red coloring with explicit text and an icon. Charts include patterns in addition to color coding. Selection states use both color shifts and structural changes. This redundancy creates multiple pathways to understanding.
When colors carry specific meanings in your interface (such as red for errors or green for success), use them consistently throughout the product. This consistency helps users with partial color vision build reliable mental models of your interface.
Document these meanings explicitly in your design system. Create a shared vocabulary around color that extends beyond visual attributes to include the information those colors communicate.
Strategic color usage establishes a visual hierarchy that works for everyone. Use color intensity and contrast to guide attention naturally through an interface. This hierarchy should remain clear even when viewed through color vision simulation filters.
Primary actions should stand out through multiple visual attributes, not just color. Secondary and tertiary actions should recede appropriately. This intentional organization makes interfaces more intuitive for all users.
Building accessible color systems requires a thoughtful approach, integrating various tools and methods. Here’s a guide to practical implementation.
Integrate accessibility checks throughout your design process. Consider using a combination of methods:
These methods work best in combination. Automated tools offer efficiency, simulation provides perspective, and direct user feedback offers the deepest insights.
A structured approach helps ensure accessibility from the start:
Effective color systems include not just color values but clear usage guidance. Define the purpose and accessibility requirements for each color to ensure consistent and inclusive implementation.
In mid-2024, Mattel announced an ambitious goal to make 80% of its global games portfolio color-blind accessible by the end of that year, setting a further target of reaching 90% accessibility by the end of 2025.
Launched in 2017, UNO ColorADD marked the start of Mattel’s pioneering work. As the first major card game designed for color-blind players, the deck incorporates the ColorADD system—a universal and inclusive code created to support the estimated 350 million people affected worldwide.
The game incorporates simple graphic symbols representing colors (square for blue, circle for red, diamond for yellow, and triangle for green) placed in the corners of each card, allowing players to identify colors without actually seeing them.
Beyond UNO, Mattel is extending this approach to other popular games like Blokus, which will add patterns to differentiate colored game pieces, DOS, Phase 10, Skip-Bo, and Ker Plunk. Each accessible game displays a special badge on its packaging and includes a dedicated “For Colorblind Players” section in the instruction sheet.
What makes Mattel’s approach remarkable is its commitment to preserving the essence of its games while making them accessible. The symbols add meaning without changing the rules or visual appeal, ensuring that the original experience remains intact while becoming available to more people.
In today’s complex landscape, accessible design clearly expresses core values. Beautiful, functional design should welcome everyone—this guideline guides our approach to every project. We approach accessibility as real people with real stakes in the outcome, giving our work authenticity and purpose beyond technical requirements.
This authenticity strengthens client relationships. We actively seek partnerships with organizations that share our values around inclusivity. This deliberate approach creates stronger collaborations and more meaningful work that serves genuine human needs.
Accessible color design creates thoughtful, usable products that work beautifully for everyone. By incorporating these principles from the earliest stages, you build digital experiences that genuinely embody inclusive design values.
Accessibility thrives as an ongoing practice shaped by both technical expertise and human values. Stay curious, test with diverse users, and continuously elevate your approach as tools, standards, and cultural contexts evolve.
Design and build better apps with practical and inspirational tips! Join the InspiringApps Community to get knowledge, people, and news emails geared to help you succeed in digital product development.
Join the InspiringApps community
