UX Design · UI Design · Visual Design

AudioEye Colour Contrast Checker

Making colour contrast checking accessible — for everyone.

We developed a web colour contrast checker accessible for non-sighted and assistive technology users, while offering context for whether colour combinations were WCAG compliant. The tool was designed to educate designers — not just report pass or fail.

Problem

Designers aren’t being taught accessibility. Without context, they keep making designs that fail contrast requirements.

Design Challenges

A tool that visually shows how colour choices affect WCAG contrast ratios — with clear pass/fail results for both AA and AAA levels.

Clear explanations of what those levels mean — bridging the gap between numerical ratios and real legibility impact.

A share function so designers can bring stakeholders along with the reasoning behind their colour decisions.

Research & Process

Competitive Analysis

We analysed 6 popular colour contrast tools — 5 web-based, 1 Figma plugin. The consistent gap: tools reported ratios accurately but gave designers no plain-language explanation of what those ratios actually meant. Many designers (myself included) wouldn’t know the difference between failing small text and failing large text from a single number.

Key insight: A ratio below 4.5 passes AA for large text but fails for small text. Without surfacing this distinction clearly, a designer could test a colour pair and walk away thinking it’s fully compliant — when it isn’t.

Defined Goals

Provide sufficient context to explain the differences between AA and AAA compliance for both small and large text.

Visualise as much as possible — avoiding confusing jargon that designers outside the accessibility space may not know.

Include a share function to help stakeholders understand the reasoning behind colour accessibility decisions.

What we launched

A fully accessible tool — usable by the very designers it teaches.

Fully accessible for screen reader and focus-state users — even non-sighted designers can test for contrast.

A visual contrast ratio scale with AA and AAA markers — showing compliance as a spectrum, not a binary.

Separate pass/fail results for small and large text — clarifying that WCAG compliance isn’t one-size-fits-all.

A grayscale toggle so sighted designers can experience how colour contrast issues may affect users with visual impairments.

A shareable results link so the reasoning behind colour decisions can reach every stakeholder, accessibly.

Takeaway

Accessibility tools don’t need to be inaccessible. The real barrier isn’t the tools — it’s the missing education around why contrast matters.

This project showed the disconnect between web creators and accessibility guidelines isn’t a matter of care — it’s a matter of clarity. We’re continuing to track repeat users and gather feedback from design instructors to understand where the gaps remain.