Colour is one of the easiest things to evaluate for Web Content Accessibility Guidelines (WCAG) compliance. Whether you’re a web designer, graphic designer, or content creator – these tools make it easy to assess whether the colour of your text is high contrast enough against it’s background for people with low vision (or anyone viewing your content in poor conditions for that matter).
My Favourite Tools
Contrast-Finder
Tanaguru’s Contrast-Finder is my favourite colour contrast checker for two reasons: not only does it provide you with an array of WCAG compliant colours when the pair you tested fails, it also has a creative sense of humour! It is also a web application, which means you can access it on a PC, Mac, or a mobile device.
Colour Contrast Analyser
Colour Contrast Analyser is a desktop application by Paciello Group allows you to sample colours from anywhere on your screen using an eye dropper to check for WCAG compliance. The Mac version is little less intuitive than the PC version, but works great. I love how easy this application makes it to test anything that comes across your computer screen!
Sim Daltonism
Sim Daltonism is a Mac application that gives you an idea of what images and colour combinations look like through the eyes of people with colour blindness. Its pretty cool – just drag a frame anywhere on your screen and select what vision impairment you want to replicate and boom, there it is!
Color Palette Accessibility Evaluator
Have a whole bunch of colours you need to test against one another? NC State University online Color Palette Accessibility Evaluator can evaluate RGB or hex colour values. This is very handy when doing branding or choosing colour palettes/schemes for your designs.
Other Apps and Online Tools
As everyone works differently, here is a list of additional tools to assess colour. Tools included are for PC, Mac, mobile devices, and online web applications, the world.
Accessible Color Palette Builder
I just discovered Accessible Colour Palette Buidling and haven’t had the chance to use it in the real-world yet, but it looks like a nice product that allows you to text 6 colours against one another and see how they work together on one page. One drawback is that it doesn’t actually show you the contrast ratio of each combination, but we can get that using other tools.
Color Blind Checker
The Colour Blind Simulator by Etre allows you to upload images to see what they may look like to a person with colour vision deficiency. You can select different deficiencies from the drop-down menu to get an idea of what the image would like to various different people.
Color Check
Color Check by Etre allows you to check difference and contrast of foreground and background web colours to make sure it meets WACG 2.0 standards for readability.
Color Contrast
Color Contrast by UserLight is an Apple mobile app to test colours on a screenshot or mobile website. Test your colours on the subway, in line for coffee – anywhere on your iPhone or iPad!
Color Contrast Checker
Everyone’s favourite accessibility 101 resource, WebAIM, has their own Color Contrast Checker. It in an online application and require you to know the hex codes of your colours.
Color Safe
Input your background colour, text details and Color Safe will show you a selection of colours that meet your desired WCAG level. It allows you to preview what the text will look like and choose different text colours in a snap.
Contrast Checker
Contrast Checker by ACART Communications is an online web colour contrast checker where you can select colours through a wheel, RGB sliders, or hex. Shows text at various sizes and in grayscale. I hear it works well paired with Colour Scheme Designer by Paletton.
Contrast Connection
Contrast Connection is a Google Chrome extension “…will take a Coolors or Adobe Color palette and create an EightShapes Contrast Grid. EightShapes allows you to easily see the accessibility of multiple color combinations, and with Contrast Connection, you don’t have to copy and paste every hex code one by one.”
Link Contrast Checker
The Color-Reliant Link Contrast Checker is new tool from WebAIM “…to measure the complex WCAG contrast requirements for links that are not underlined within body text.”
VisCheck
VisCheck is a free downloadable application to check an image file or website for it’s physical properties in RGB or CMYK and visual disabilities and anomalies. It is available for Windows, Linux, and Mac in English and Japanese.
Where do I find my hex codes?
You’ll need to know your hex codes when using an online colour checker. Here is how you find the colour code in common applications. Screenshots for Mac shown, but location remains the same for PC:
InDesign/Illustrator
Double click your swatch – your hex in the number with the # next to it. If one of these boxes doesn’t show up, try another swatch location.
Microsoft Office
Click the colour dropdown menu (for text or object) and select More Options. There you will see your hex.
Have another automated colour checker to recommend? Feel welcome to comment below!
through my eyes 