#Paciello group colour contrast analyser free

You need to change your background colour or the text colour - or both - to meet that 4.5:1 threshold. The fix here you’ve probably already guessed. If this is green and some others are red, you’re kinda ok, but you might want to consider improvement.

If this icon is red, you need to change your colours. The big one is the first icon you see - “1.46 Contrast (Minimum) (AA) - regular text”. The app will tell you exactly where your combination can and can’t be used. Always use the actual colour values if you can, its just more accurate.

#Paciello group colour contrast analyser free

Its a free cross-platform app that has a range of options for entering your colour combinations, including an eye-dropper tool if you don’t have your pallette to hand. I suggest using the Paciello Group’s Colour Contrast Analyser. The next step is to calculate the contrast between them, fortunately there are a ton of tools to do this for you. To check your app’s contrast take a look at your pallette and think about any combinations you use for text and backgrounds. But ideally aim for higher than 4.5:1 if you can. In grey terms, this means nothing lighter than #767676 for text presented on white. There are some exceptions to this rule, but this means any contrast greater or equal to 4.5:1 should be easy to read for all of your users. The WCAG rule for text colour contrast is 4.5:1. More than that, WCAG is also the basis of accessibility laws and regulations in many jurisdictions. Snook.ca Colour Contrast Check TPGi: Colour Contrast Analyser (CCA) (free download) (formerly The Paciello Group) Web AIM : Color Contrast Checker. Written by a range of experts and users with various abilities and based on loads of user testing and research, its your go-to guide for making accessible experiences. The Web Content Accessibility Guidelines is the guide that details what works and what doesn’t for digital accessibility. This effect can be heightened too for people who have blurred or obscured vision, or one of many forms of colour blindness. And this problem is not just limited to greys - lighter colours too can blend into the background.

How many shades of grey do you use in your app? OK, maybe thats a bit cruel towards designers, grey is a great colour, but the problem with grey is that it can be deceptively difficult to distinguish from a background.