Perceptually-Minimal Color Optimization for Web Accessibility: A Multi-Phase Constrained Approach

TL;DR

The paper tackles the conflict between WCAG color-contrast requirements and brand aesthetics by proposing a constrained optimization in the perceptually uniform OKLCH color space that preserves hue while achieving accessibility. It introduces a three-phase pipeline—binary search on lightness, gradient descent on lightness and chroma, and progressive constraint relaxation—to minimize perceptual change measured by $\Delta E_{2000}$ and run in real time. Evaluation on 10,000 color pairs shows a 77.22% success rate with a median perceptual change of 0.76 $\Delta E_{2000}$ and median processing time under 1 ms, and the approach is implemented in the open-source cm-colors library. The work demonstrates that accessibility and visual design can be reconciled in practice, enabling seamless integration into development workflows and design systems.

Abstract

Web accessibility guidelines require sufficient color contrast between text and backgrounds; yet, manually adjusting colors often necessitates significant visual deviation, compromising vital brand aesthetics. We present a novel, multi-phase optimization approach for automatically generating WCAG-compliant colors while minimizing perceptual change to original design choices. Our method treats this as a constrained, non-linear optimization problem, utilizing the modern perceptually uniform OKLCH color space. Crucially, the optimization is constrained to preserve the original hue ($\text{H}$) of the color, ensuring that modifications are strictly limited to necessary adjustments in lightness ($\text{L}$) and chroma ($\text{C}$). This is achieved through a three-phase sequence: binary search, gradient descent, and progressive constraint relaxation. Evaluation on a dataset of 10,000 procedurally generated color pairs demonstrates that the algorithm successfully resolves accessibility violations in $77.22\%$ of cases, with $88.51\%$ of successful corrections exhibiting imperceptible color difference ($ΔE_{2000} < 2.0$) as defined by standard perceptibility thresholds. The median perceptual change for successful adjustments is only $0.76\ ΔE_{2000}$, and the algorithm achieves this with a median processing time of $0.876\text{ms}$ per color pair. The approach demonstrates that accessibility compliance and visual design integrity can be achieved simultaneously through a computationally efficient, perceptually-aware optimization that respects brand identity. The algorithm is publicly implemented in the open-source cm-colors Python library.