ACE: A Colour Palette Design Tool for Balancing Aesthetics and Accessibility
Garreth W. Tigwell, David R. Flatla, Neil D. Archibald · 2017 · ACM Transactions on Accessible Computing · doi:10.1145/3014588
Summary
This paper presents ACE (Accessible Colour Evaluator), an online tool designed to help web developers and designers balance aesthetic preferences with accessibility requirements when choosing website color palettes. The research addresses a significant gap: existing color palette tools typically focus on either aesthetics (like Adobe Color CC or Paletton) or accessibility (like Color Contrast Checker), but not both simultaneously. Through analysis of existing tools and discussions with practitioners, the authors identified four key functions that color palette tools should provide: (1) allowing selection of an entire palette of colors rather than just two at a time, (2) comparing multiple colors simultaneously for WCAG 2.0 contrast violations, (3) showing colors applied to an example webpage for context, and (4) providing color vision deficiency (CVD) simulations to help designers understand how people with different types of color blindness will perceive their choices. ACE was developed through a rigorous user-centered design process involving four stages: an online questionnaire with 28 web developers/designers to understand current practices and gather requirements, paper prototyping and high-fidelity prototype development, a design workshop with 4 practitioners, and iterative refinement. The final tool displays a grid comparing all color pairs against WCAG 2.0 AA and AAA contrast ratios while showing CVD simulations for protanopia, deuteranopia, and tritanopia.
Key findings
The questionnaire revealed concerning gaps in accessibility practice: 71% of respondents do not consider accessibility guidelines at any stage of their projects, only one-third of those aware of WCAG actually use it, and 63% rarely or never consider users with color vision deficiency. Only 6 of 28 participants used tools to check accessibility violations. These findings underscore the need for integrated tools that make accessibility checking easy within existing workflows. In a comparative evaluation with 10 web developers/designers, ACE was the only tool that enabled all participants to complete a constrained design task requiring WCAG compliance and CVD consideration. With Paletton, 4 participants could not meet any constraints and 3 gave up entirely. Contrast-A allowed only 2 of 10 to meet all constraints, while Color Contrast Checker enabled only 1 of 10 to meet even two requirements. ACE was unanimously ranked as the most preferred tool (mean rank 1.00 vs. 2.50 for Contrast-A, 3.10 for Color Contrast Checker, and 3.40 for Paletton). NASA-TLX workload assessments showed ACE provided the best perceived performance and caused the lowest frustration. There was a statistically significant reduction in overall workload when using ACE compared to Paletton.
Relevance
This research demonstrates that integrating accessibility features directly into design tools—rather than treating accessibility as a separate checking step—significantly improves outcomes. Web developers expressed preference for tools usable early in the design process, before color choices become locked in by client expectations or brand guidelines. For practitioners, ACE (available at daprlab.com/ace) offers a practical solution for creating accessible color palettes. The tool's approach of showing pass/fail status for all color combinations simultaneously, combined with CVD simulation, helps designers identify problems before they propagate through a design. The study also highlights a broader lesson: accessibility tools developed without user input often fail to meet practitioners' needs. The success of ACE is attributed to its user-centered design process. This finding applies beyond color tools—any accessibility resource intended for designers and developers should involve them throughout development to ensure adoption and effectiveness.
Tags: color accessibility · colour vision deficiency · color blindness · web design · design tools · WCAG · contrast ratio · user-centered design · accessibility testing
Standards referenced: WCAG 2.0