Case Study: Achieving Level AA WCAG Accessibility for an Enterprise Design System

In our most recent major project, Cali Digital had the opportunity to improve the accessibility of a design system for a prominent multinational organisation. The objective was to verify that their design system and digital applications  adhered to the Level AA Web Content Accessibility Guidelines (WCAG), making their websites and applications more accessible to everybody.

Understanding the Challenge

First we conducted an initial audit of the design system, which revealed some key areas for improvement. We discovered that the existing colour palette posed accessibility challenges, with insufficient contrast between text and background colours. This made it difficult for users with visual impairments to read and interact with the content. Additionally, the design guidelines provided to developers lacked detailed WCAG instructions, which meant that accessibility considerations were not fully integrated into the design process. Another issue was the inconsistency in applying key elements, such as labels and popup titles, across design files, which could further confuse users.

Key Insights

From our audit, we derived several important elements for this company to improve on:

  • Contrast Beyond Text: Accessibility is not just about text contrast. It also involves the contrast of outlines and other design elements.
  • Descriptive Alternative Text: Images need to have detailed alternative text to clearly describe their content, rather than just repeating the image title.
  • Tooltips for Charts: Charts and graphs should include tooltips or alternative descriptions to ensure accessibility for users with visual impairments.

To address these challenges, we implemented an Agile approach, which allowed for continuous collaboration and iterative improvements. By working closely with the client through multiple iterations, we made ongoing adjustments based on feedback, ensuring that accessibility enhancements were effectively integrated into the design system.

Working with the design team in an Agile process

Expanding the Scope

Our work extended beyond the design system to include a comprehensive audit of additional applications used by the client. We identified a frequent reliance on images to convey text, which complicated accessibility. By transitioning text from images to actual text, we improved flexibility and accessibility. We also found several issues with page headings, alternative text, and link labelling, which hindered navigation and comprehension for users relying on assistive technologies. Furthermore, we addressed poor colour contrast issues by updating the colour palette to meet WCAG standards.

Finding the most suitable contrast ratio for the base copy in the design system.

The Results

Our efforts resulted in the design system surpassing Level AA WCAG requirements. On July 7th, 2024, a Statement of Accessibility was released to mark this major milestone. The redesigned system now offers a more inclusive and accessible baseline for the organisation to offer positive experiences  to a wide spectrum of users.

At Cali Digital we’re committed to help create a more inclusive digital experience for all users.For more information about this project or to discuss how we can support your accessibility needs, please enquire directly and we can share our contact reference on this project. 

example of issue identified in an application interface
Sample audit report for the project
Assessment included the colour range provided by the design system
No items found.