Enhancing Accessibility with a Compliant Color Palette

Published on: February 26, 2025

The Challenge

A SaaS platform for project management featured a vibrant but non-compliant color scheme with insufficient contrast between text and backgrounds. This made the interface difficult for users with visual impairments, such as color blindness or low vision, resulting in high abandonment rates and accessibility-related support tickets.

The Process

1. Accessibility Audit: Conducted a thorough review using tools like WAVE and Lighthouse to identify non-compliant elements, focusing on contrast ratios below the required 4.5:1 for normal text.
2. User Research: Interviewed 20 users, including those with disabilities, to understand pain points like difficulty reading buttons, charts, and status indicators.
3. Palette Development: Researched WCAG guidelines and used tools like Adobe Color and WebAIM's Contrast Checker to create a new, accessible palette with high-contrast primaries and accents.
4. Prototyping: Redesigned key UI components in Figma, applying the new colors to buttons, text, icons, and data visualizations to ensure compliance and aesthetic harmony.
5. Testing & Iteration: Ran automated tests and user sessions with 10 participants, refining the palette based on feedback to guarantee both compliance and usability.

The Results

• Accessibility-related support tickets dropped by 50% post-launch.
• WCAG compliance score improved from Level A to AA, with all critical elements achieving at least a 4.5:1 contrast ratio.
• User satisfaction increased by 35%, with 85% of surveyed users reporting the interface as "easier to read" in A/B tests.

Rationale: Prioritizing Inclusivity as a Core Function

Web compliance isn't just a legal checkbox—it's essential for creating inclusive experiences that serve all users, including the 1 in 12 men and 1 in 200 women affected by color vision deficiencies. The original palette prioritized aesthetics over functionality, leading to cognitive strain and exclusion.

Our redesign was rooted in evidence-based color selection, adhering to WCAG 2.1 guidelines as a baseline for usability. By starting with a neutral, high-contrast base and layering accessible accents for interactive elements and status indicators, we ensured legibility without sacrificing visual appeal. This approach not only mitigated legal risks but also enhanced overall usability, as high-contrast designs benefit everyone by reducing eye fatigue during prolonged use.

Key Takeaways

• Compliance Drives Inclusivity: Meeting WCAG standards isn't a limitation; it's a foundation for ethical design that expands your user base and builds trust.
• Tools Accelerate, Users Validate: Leverage automated checkers like Contrast Analyzer early and often to catch issues, but always validate the final palette with real users for nuanced feedback.
• Color is More Than Aesthetic: In a UI, color is a functional tool. Strategic color choices improve scannability, reduce errors, and foster confidence, turning potential barriers into seamless interactions.

Real-World Applications

The principles of compliant color selection are critical for any digital product where clarity is paramount:

• E-commerce Websites: Ensuring high-contrast buttons ("Add to Cart") and product labels helps users with visual impairments complete purchases faster, reducing cart abandonment.
• Educational Platforms: Readable text and charts in compliant colors support diverse learners, improving comprehension and retention in online courses.
• Healthcare Apps & Patient Portals: Critical information like medication dosages must be unambiguously accessible. Compliant color palettes prevent misreads that could have serious consequences.