AudioEye Colour Contrast Checker

Making colour contrast checking accessible — for everyone.

We developed a web colour contrast checker that’s accessible for non-sighted and AT (assistive technology) users, and offered further info and context for whether colour combinations were WCAG compliant.

Problem

Designers aren’t being taught accessibility in their curriculums. They need more context for making their design decisions accessible, and without said context continue to make designs that don’t have accessible contrast ratios.

Challenges

01

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

02

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

03

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

Research & Process

Defined Goals

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

Visualize as much as possible to avoid using confusing terminology that designers outside the accessibility space may not be familiar with.

Include a share function to help other stakeholders understand the designers’ decisions regarding accessibility.

Wireframes

We wanted to display the information in the clearest way possible in an effort to educate on accessibility methods requirements, while also acting as a useful tool.

Main challenges:

Differentiating properly between AA and AAA compliance

Avoiding cognitive overload with too much information on the screen

Colour contrast checker version 1 — Too similar to other tools, the star system is confusing, and far too much copy in the example section

Colour Contrast checker version 2 — we like the sliding scale but not enough context for the score results

Colour contrast checker version 3 — having AAA vs AA option select is unnecessary if users don’t understand requirements

Colour contrast checker version 4 — we wanted more context with AA and AAA beside the score

The vertical scale fits nicely and would be ideal for mobile — but not a likely use case for our users, and is harder to read.

Colour contrast checker version 6 — getting closer, but the star system is unclear, and the large text vs small text is confusing

Our Launched Product

Our most successful designs covered our goals:

We launched with this layout after prototype testing, peer review, and feedback from external designers on their use case. We’ve also recently reached out to design instructors for feedback from students learning about accessibility, and are hoping to learn more about what areas are still needing more distilled and clearer presentation on what contrast accessibility looks like.

Visualizing the scale of colour contrast ratios

Showing clear pass/fail results for small text and large text in both AA and AAA categories

Allowing non-disabled designers to see what those with contrast issues may be experiencing with a grayscale toggle

Having an accessible share function that lets stakeholders understand colour contrast requirements

See it in action

Full passing score

AA compliant, AAA large text compliant

AA compliant, large text only

Ad Strategy

We wanted to push designers to question their designs. As many designers (myself included) do, we seek inspiration everywhere on the web–and what to avoid. Why not create an eye catching series of almost annoyingly bad ads that have terrible contrast, to draw attention to the issue. We sought to keep it simple, with just enough detail to instill curiosity.

We used popular colour combinations seen on more trendy advertisements (think spotify wrapped 2021) and demonstrated the slight change in hue needed to boost legibility for all.

Poor contrast — the problem

Corrected hue — the fix

Takeaway

This project was a wonderful opportunity to investigate the disconnect we are seeing between web creators (designers & developers) and web accessibility guidelines. Though much of the web is still inaccessible for much of the population due to disability, we see a push from designers, to educate and solve these issues within their own work. A major issue stems from lack of education, confusing legal jargon, and lack of web resources. We hope to see more data come over the next few months to track repeat users, and follow up with instructors on how we might make this tool more effective.