Designer Tool
AudioEye wanted to build an easy-to-use color contrast checker for designers and developers to assess the color contrast between foreground and background elements. This tool can be used to ensure that digital content remains readable and perceivable for users with visual disabilities, particularly those with color vision deficiencies and low vision.
Goals
Business Goals
Rank for key phrase "color contrast checker" on Google's first page of search results
Engage with more designers and developers
Project Goals
Ensure the tool is accessible via keyboard navigation
Reduce cognitive load from complex industry jargon
Create a visual representation of the contrast ratio
Help users understand the importance of accessibility
Opportunity
Color contrast is an extremely common accessibility issues across most websites and digital designs. While other color contrast tools exist, all of them require a baseline understanding of the Web Content Accessibility Guidelines (WCAG) criteria—often riddled with industry jargon and confusing numbers.
Research
Before we started ideating, we performed light research which included an audit of the competitive landscape and identified key features that we felt were critical for the tool. We also reviewed The W3C's documentation for WCAG 2.1 success criterion 1.4.3.
We beta tested the tool with product designers and engineers and asked them to provide feedback. We also made a public-facing feedback form for anyone who used the tool to provide direct feedback to the team.
Ideation
Once we had an idea of what we wanted to include, we explored different ways to visually depict the data in a way that was easy to understand, including simple "pass" and "fail" indicators, 5-star ratings, and simple responses such as "very good" and "poor".
We ran into some challenges when we realized that you can be both AA (baseline standard) and AAA (most accessible standard) depending on the size of text. There were too many variable to definitively say if something was 5-stars or very good.
Execution
The final design featured a visual preview that live updated when you changed colors, a toggle to preview colors in back and white, a visual contrast ratio scale which updated when you changed your colors and gave a quick indicator for how close you were to different levels of accessibility, and finally a call-to-action to share your results.
As a part of the launch of the tool, I created a set of ads for a campaign that I called "Bad Contrast Ruins Good _____" and added it to a few marketing-focused email newsletters. We strategically used popular color combinations seen on trendy advertisements (read: Spotify Wrapped) and demonstrated the small shifts needed to boost legibility for all.
I also produced a short demo video for the tool as a fun little test for a new studio setup. While we take video accessibility serious, this was the only video we produced that didn't include a visual description, transcript, or audio descriptions due to it's scrappy production.
Results
The page made its way to page 1 on Google's search results for "color contrast checker"
Submitted as an official tool on W3C's Web Accessibility Evaluation Tools List
The only tools found to be accessible end-users who utilize assistive technology
Reflection
This project was a perfect example where personal interest and passion meets business need. I was so grateful for the opportunity to build a tool that I would use as a designer.
Consideration for future improvements:
We've designed and developed (but have not launched) a "suggested color" for a color that is as close to your color entered while meeting a passing contrast ratio.
Add demarcations for AA and AAA for the Contrast Ratio Scale, not just the numbers.
We'd love to create a Figma plugin version of this tool.
I'd love to explore how to check color contrast
Improvements made post-launch:
About a year and a half after we launched the tool, we went back and updated it to include a better example of a UI element. Initially, we launched with just an icon, but we added an input field as well.