Why accessible?
Meet the fAAAces
how does it work?
The Colour Contrast App Logo

A colour contrast app for brands and designers

285 million people globally are visually impaired*. As a designer or brand, knowledge of accessibility has to be part of your design process.
*Global data on visual impairment.

Current industry guidelines are too complex so they’re largely ignored

Colour is the quickest and most visual way to introduce designers and brand managers to the topic of accessibility.

Guidelines like the WCAG exist to help us create accessible graphics and interfaces for everybody. However, colour ratios and the AA rating system make the guides hard to understand and explain—that’s where we come in!
A "very happy face" icon to indicate to users that the colour combination they chose is triple A accessible.
A "happy face" icon to indicate to users that the colour combination they chose is double A accessible.
An "upset face" icon to indicate to users that the colour combination they chose is AA+ which also means not fully accessible to users unless the text using this colour is large and should be updated.
A "sad face" icon to indicate to users that the colour combination they chose is not accessible and should be changed.

Meet the fAAAces

The fAAAces are a simple visual representation of the ‘traditional’ AA rating system. At a glance, you’ll know if your colour combinations are compliant or not.

Use the switch above to swap between the fAAAces and the AA rating.

How does the app work?

Start by adding all your brand and interface colours to the app and give them a name. If you see any sad fAAAces on your colour combination, it’s best to tweak them.
Tweak your colours using the colour picker or perhaps consider adding entirely new colours which are more accessible. As soon as you see all smiles, you’re good-to-go.
Over time, all your colour palettes will live on your dashboard. They’ll always be here ready for you; for reference, to share with your team or clients or tweak any time.

More than just a colour checker

Created by designers
We know what it’s like; you’ve chosen or have been given the colours already. Just check them and tweak.
Hide failed colours
We help you temporarily hide non-compliant colours to establish which colour combinations work best.
Smart suggestions fixes
The app suggests how to update your colours to make them meet AA minimum requirements.
Colour dashboard
See all your colour palettes all on one screen. Great for manager and teams as reference and to see and spot trends.
Visibility for clients and your team
Share a link with them directly to the source. They’ll appreciate seeing the details.
Web-based and device agnostic
No special software necessary. It’s online and ready-to-go.
More soon...
We’ll be adding more features soon, let us know what you’d like to see next.

Other tools we like

A logo for a macOS colour accessibility checker menubar app called Contrast.
A macOS menu bar app for quick and easy access to WCAG contrast ratios.
A logo for a macOS colour picker app called SIP.
An all-in-one colour palette picker and contrast checker for macOS.
A logo for a colour picker app called Pika.
An open-source colour picker app formacOS

Colour Contrast App is not a fully-featured accessibility tool. It’s an introduction into the topic via the subject of colour. We’re only scratching the surface of what accessibility is but it’s a start. The tool was designed specifically for designers and brand managers to get familiar with the basic criteria of the topic and become more mindful of their colour choice.  

Although every attempt has been made to make this website and app 100% accessible, we apologise if we missed something. Please get in touch if you spot anything we should improve.

Further reading