Still Not Readable? An Interactive Tool for Recommending Color Pairs with Sufficient Contrast based on Existing Visual Designs
Fredrik Hansen, Josef Jan Krivan, Frode Eika Sandnes · 2019 · Proceedings of the 21st International ACM SIGACCESS Conference on Computers and Accessibility (ASSETS 2019) · doi:10.1145/3308561.3354585
Summary
This demonstration paper presents a web-based color contrast tool that goes beyond the pass/fail validation of existing contrast checkers by actively recommending how to fix insufficient color contrast while preserving the designer's original visual intent. The authors observe that despite well-defined WCAG contrast requirements, insufficient contrast remains one of the most common accessibility failures on public websites. They speculate that one cause is poor tooling — most design tools lack built-in contrast checking, and dedicated contrast tools only validate without suggesting corrections. Their tool works by having the designer upload an image snippet of their design. The tool automatically analyzes the image to identify the most prevalent color as background and other colors as foreground text. It then uses the HSB (hue, saturation, brightness) color model to search for alternative color pairs that meet the specified WCAG contrast level while keeping the original hues intact. The key design assumption is that a color scheme's identity is primarily determined by its hue choices (monochrome, analogous, complementary, triadic), so contrast can be corrected by adjusting only brightness and saturation. If brightness adjustments alone are insufficient, the algorithm continues searching along the saturation dimension. The tool is implemented entirely in JavaScript for cross-platform browser compatibility.
Key findings
The tool provides several interactive features for exploring contrast corrections. A movable rectangular preview overlay shows the corrected design applied to the original image, allowing designers to see the effect across different areas of their design. Users can interactively adjust the target contrast level — the paper demonstrates how increasing from level 3 to level 7 transforms a pastel orange into dark brown and light blue into dark blue. A color wheel visualization shows original and corrected colors with arrows indicating the direction of adjustment, making the correction process transparent. Hovering over color samples reveals detailed information including RGB values, brightness, contrast ratio, CIE delta-E distance, and pixel count. The tool supports working with multiple foreground colors against a single background, handling real-world designs with several text colors. The approach of preserving hues while adjusting brightness and saturation is practical because it maintains brand identity and color scheme type. The authors acknowledge that the tool itself is exclusively visual, noting that future work should create a non-visual version usable with screen readers — an ironic limitation for an accessibility tool.
Relevance
This tool addresses a genuine workflow gap for web designers and developers. Existing contrast checkers tell you something is wrong but not how to fix it, leaving designers to manually experiment with color values. By automating the correction while respecting design intent, the tool lowers the barrier to contrast compliance. The hue-preservation approach is particularly smart for real-world use where brand colors and design systems constrain choices. For accessibility practitioners conducting audits, this kind of tool could accelerate remediation by providing concrete, standards-compliant color alternatives rather than just flagging violations. The limitation of being purely visual is notable — accessibility tools should themselves be accessible, and the authors rightly flag this for future work. The broader lesson is that accessibility compliance tools need to be prescriptive, not just diagnostic. Telling designers their colors fail WCAG is less effective than showing them the nearest compliant alternatives.
Tags: color contrast · low vision · web design · design tools · readability · accessibility testing · WCAG compliance
Standards referenced: WCAG 2.1