Accessibility isn’t an afterthought—it’s a core element that should be embedded in your design process from the start. A compliant design system lays the foundation for creating inclusive digital experiences that meet the needs of all users, regardless of ability. By prioritizing accessibility early, teams can avoid costly retrofits and ensure products align with international accessibility guidelines.
This article explores key strategies for building an accessible design system, shares real-world success stories, and highlights AI tools that streamline the process.
Why is accessibility so important?
Accessibility ensures that everyone, regardless of their physical or cognitive ability, can effectively interact with a product or service. Inclusive design supports individuals with disabilities while improving the overall user experience for all, fostering greater independence and participation.
Beyond being the right thing to do, designing for accessibility
expands your audience
strengthens brand loyalty
enhances product usability
For the users:
Accessibility features designed for individuals with disabilities often benefit all users. For example:
Video captions, created for those with hearing impairments, are also helpful for users watching videos on mute, such as in a social media feed.
High-contrast text, which aids users with vision impairments, improves readability for everyone, especially in bright outdoor settings.
Keyboard navigation, essential for individuals with motor impairments, is also convenient for power users who prefer shortcuts or for those using devices without a mouse, such as laptops in tight spaces.
For the business:
Designing for accessibility offers significant benefits beyond legal compliance.
Broader Audience Reach: Accessibility makes products usable for the 15-20% of the population in Canada and the U.S. living with disabilities. Inclusive design expands a business’s customer base and enhances its market potential.
Stronger Brand Reputation and Trust: Inclusive design signals social responsibility, fostering customer loyalty and appealing to values-driven consumers. It also enhances perceptions among investors and partners.
Long-Term Cost Savings: Designing with accessibility in mind reduces the need for costly retrofits and ensures compliance from the outset, saving time and resources in the long run.
For the product:
Designing accessible products can be challenging, but it often drives innovation and creativity throughout the design process. Groundbreaking technologies like Siri and Alexa are rooted in accessibility. Speech recognition, originally developed to enable hands-free computer interaction for individuals with disabilities, has become a fundamental feature in today’s most popular tech products.
1. Begin with the design system: how small changes can create major impact
Your design system offers a valuable opportunity to embed accessibility and inclusion directly into your component libraries.
By addressing issues systematically at the core design level, you can streamline processes and save significant time. Start by testing and adjusting your components early on.
Brad Frost's 'Atomic Design' approach emphasizes the importance of making each component in a design system accessible.
For example, adjusting button color contrast ensures compliance across the product with minimal effort. This approach streamlines updates, scales accessibility, and strengthens both product design and overall business strategy.
2. Start with quick wins for better designs
Accessibility compliance can feel overwhelming, especially for teams new to accessibility guidelines. A strong change strategy is crucial, with the key question often being:
“What should we fix first?”
Testing your screens can reveal common issues, but focusing on the most-used components and their accessibility parameters is even more impactful.
Maintain good color contrast ratios
Color contrast plays a crucial role in accessibility and is often overlooked in design systems. Contrast refers to the brightness difference between two colors, and low contrast text is a common issue, making it hard for users to distinguish text from its background.
To meet WCAG guidelines:
Text: Maintain a 4.5:1 ratio (3:1 for large text) for Level AA compliance or 7:1 (4.5:1 for large text) for Level AAA.
Non-text elements: Use a 3:1 ratio for Level AA compliance.
When calculating contrast, consider text size, weight, color, and background color to ensure accessibility.
Check your target sizes
Ever clicked the wrong button because it was too small or too close to another? Clickable elements like buttons, links, and cards are vital to user interaction, and poor design can quickly ruin the experience.
To ensure accessibility, focus on size and spacing:
For Level AAA compliance, targets should be at least 44x44 CSS pixels (with some exceptions).
Level AA allows a smaller minimum size of 24x24 CSS pixels.
These guidelines ensure targets are large enough for users to activate easily, improving both accessibility and overall usability.
Don’t rely on color alone
Color is a powerful design tool for enhancing visuals and drawing attention, but it should never be the sole means of conveying information, actions, or distinctions. Adding text or graphic elements like icons ensures clarity for all users, including those who are colorblind.
Screen readers can’t interpret color, so providing clear labels alongside color-coded content is essential. Even when using a colorblind-friendly palette, always include labels to ensure your designs are accessible and easy to understand.
How can AI support your accessibility work?
Using AI tools can help optimize accessibility workflows and validate compliance more efficiently.
Test your color contrast
AI tools simplify the process of ensuring accessible color contrast by analyzing text, icons, and visual elements against standards like WCAG. These tools provide instant feedback on whether contrast ratios meet accessibility requirements, saving time and reducing errors.
Stark, a popular plugin for design tools like Figma, checks color contrast ratios and simulates color blindness, helping designers create visuals that work for users with diverse visual needs.
Inclusive language
The tone and vocabulary used in a product greatly impact the user experience, with even small details like button labels requiring careful consideration.
AI tools with NLP capabilities, such as Copy AI and Writesonic, can streamline this process by generating context-aware UI copy and microcopy. These tools create variations based on tone and personas, helping designers craft language that resonates with their target audience while saving time.
Real-time accessibility audits
AI-powered accessibility auditing tools, such as Axe or WAVE, can analyze interfaces in real time to detect accessibility issues like missing alt text, improper heading structures, or keyboard navigation problems. These tools provide actionable insights, helping designers and developers address issues early in the design process and ensure compliance with standards like WCAG.
3. Learn from success stories: Atlassian
Atlassian is leading the way in accessibility by addressing critical issues in user journeys and aiming for WCAG 2.2 AA compliance across all products. They are also embedding accessibility into the design and engineering process to ensure inclusive experiences for all users.
Let’s see some accessibility improvements made one of their products: Jira.
Underlined Links
All hyperlinks in Jira are now underlined to improve visibility and accessibility.
Background on Subtle Buttons
A gray background has been added to subtle buttons, typically visible on hover, to enhance their prominence and accessibility.
Patterns on Issue Statuses
Unique patterns have been added to issue statuses, making them easier to distinguish.
Final thoughts
Incorporating accessibility into design is more than a development step—it’s a commitment to inclusivity, usability, and long-term success. As Atlassian’s approach shows, planning a solid strategy and aligning your team around accessibility are essential. Embedding accessibility early in the design system supports an inclusive user experience that’s scalable and sustainable.
Quick-win strategies inspired by successful implementations can drive immediate impact, reminding us that every design choice has the power to include or exclude, to empower or limit. Accessibility isn’t just about compliance—it’s about creating systems that respect and value everyone.
As designers, let’s challenge ourselves: Is our solution accessible to everyone?
If not, how and where can we start improving?
Coming Next: Accessibility in OutSystems
Stay tuned for our next article, where we’ll explore how we factor accessibility considerations into the OutSystems platform. From leveraging built-in tools to implementing best practices, we’ll share insights on creating inclusive digital experiences using low-code development.
