Colour Contrast Checkers for Designers

Free tools to evaluate the colour contrast and colour choices in your designs.

Advertisements
Jars filled with different coloured glowing water

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.”

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.

photo of cupped hands lit in green and red light

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:

Screenshot of color picker window in InDesign with the hex code highlighted

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.

Screenshot of the swatch options window in InDesign with the hex code highlighted

Microsoft Office

Click the colour dropdown menu (for text or object) and select More Options. There you will see your hex.

 

Screenshot of the colors window in Word for Mac with the hex code highlighted

Have another automated colour checker to recommend? Feel welcome to comment below!

Author: nchitty

Inclusive designer based out of Toronto.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s