Investigating Color Blind User Interface Accessibility via Simulated Interfaces

TL;DR

This paper addresses how color vision deficiency (CVD) affects UI usability and aesthetics by employing a simulation-based protocol that uses physiologically grounded CVD models. Non-CVD observers evaluated 20 popular UIs under three CVD simulants across standard and high-contrast modes, yielding 120 stimuli and mean opinion scores (MOS) for functionality alongside binary aesthetics judgments. The study finds a positive correlation between functionality and aesthetics ($r=0.74$) and shows that OS-wide high-contrast mode generally degrades both metrics, though some UIs (e.g., Slack with built-in CVD themes) can mitigate these effects. These results offer practical guidance for UI designers to anticipate CVD-related usability issues and advocate for targeted, CVD-aware design, while providing a dataset for further research and a simple AAA/AA/AAA classification framework to benchmark interfaces.

Abstract

Over 300 million people who live with color vision deficiency (CVD) have a decreased ability to distinguish between colors, limiting their ability to interact with websites and software packages. User interface designers have taken various approaches to tackle the issue with most offering a high contrast mode. The Web Content Accessibility Guidelines (WCAG) outline some best practices for maintaining accessibility that have been adopted and recommended by several governments; however, it is currently uncertain how this impacts perceived user functionality and if this could result in a reduced aesthetic look. In the absence of subjective data, we aim to investigate how a CVD observer might rate the functionality and aesthetics of existing UIs. However, the design of a comparative study of CVD vs. non-CVD populations is inherently hard, therefore we build on the successful field of physiologically-based CVD models, and propose a novel simulation-based experimental protocol, where non-CVD observers rate the relative aesthetics and functionality of screenshots of 20 popular websites as seen in full color vs. with simulated CVD. Our results show that relative aesthetics and functionality correlate positively and that an operating-system-wide high contrast mode can reduce both aesthetics and functionality. While our results are only valid in the context of simulated CVD screenshots, the approach has the benefit of being easily deployable, and can help to spot a number of common pitfalls in production. Finally, we propose a AAA-A classification of the interfaces we analyzed.

Figures (13)

• Figure S1: Normalised spectral sensitivity of the three types of retinal cone cells as a function of light wavelength. Note the similarity of the $M$ and $L$ cones, where minor individual differences can result in an unresolvable overlap, causing observers to have a reduced ability to differentiate between lights in the red-green region. Plotted based on Stockman and Sharpe stockman2000spectral.
• Figure S2: Illustration of a popular quiz platform's UI processed with simulated tritanomaly Machado2009. While text vs. background contrast remains mostly unchanged, $\Delta E_{2000}$ color difference luo2001development between buttons 1 and 2 is reduced from $25.1$ to $14.1$. Similarly, $\Delta E_{2000}$ between buttons 3 and 4 is reduced from $43.0$ to $18.3$. The colors remain distinguishable, but the difference between them is less noticeable. WCAG analysis would flag an insufficient text vs. background contrast on button 3 (<3), but current guidelines do not address the reduced color difference between buttons.
• Figure S3: Illustration of a website automatically adapting to Windows high contrast mode (Night Sky). The reduced color palette is designed to increase contrast between key UI components.
• Figure S4: Overview of the experimental methods, with each step discussed in detail in the main text.
• Figure S5: Visualisation of the experiment setup with the reference screenshot and three types of simulated CVD (protanomaly, deuteranomaly, and tritanomaly) with otherwise identical content. The user controls the aesthetics (binary)and functionality scores (1--5) at the bottom of the screen.