With this colour checker, you can ensure that your brand colour palette is used in an accessible way complying with WCAG guidance. Allowing you to communicate with clarity and cut through while increasing your potential reach.
With this colour palette checker you can check the contrast of text, icon and background colour combinations against the latest WCAG 2.2 guidelines set out by webAIM. You can read the full accessibility guidance here.
Use this checker if you want to check one background colour with one foreground colour. Your foreground colour will be the colour you want to use for either typography or icons.
Make sure you set what colour contrast standard you want to test the colours against, either AA or AAA. AA is less stringent and AAA is the most stringent and hard to pass.
You can adjust your colours if you aren’t happy with the accessibility results. Try making your foreground colour either lighter or darker as a starting point. If you would like some more advice we have our tips on how to create accessible colour palettes from scratch on our insights page.
You can use our colour palette checker to check an unlimited number of colours at once. You can also use it to tweak a colour palette to create more accessible combinations. They will be each checked for contrast against each other. Meaning you will quickly be able to see from the results which colour combinations you should use in your brand, and which you shouldn’t.
Are you not happy with the number of combinations that you have? Add additional colours that you think will have a higher contrast and expand the number of combinations you can use without changing the tone of your colour palette. Or try tweaking one of your colours to create more accessible combinations.
Accessible design is about breaking down the barriers to entry that might otherwise make it tricky for people with disabilities or extra needs to connect with your brand. By putting accessible design first, you broaden your audience and guarantee crystal-clear communication that includes everyone, so nobody feels left out. This method makes it easier for people with visual, motor, cognitive, or hearing needs to get involved. It covers everything from getting the colours and fonts spot on to making documents easy to read and optimising for screen readers.
Contrary to what you might think accessible design can be just as creative, and we think good design is always accessible. Our colour checker will help you do this though making sure you can get the most out of your brand colour palettes.
Improving your brand’s accessibility is key for increasing your reach, and so making sure that you are getting it right is also important. We have helped many businesses make their brands more accessible.
Pinpoint areas for improvement and get actionable recommendations.
Educate your team on accessibility’s importance and practical steps for implementation.
Keep your standards current and ensure everyone follows best practices.
Practical implementation to ensure everyone follows best practices.
By partnering with us, you’re not only enhancing your brand’s accessibility but also aligning your organisation with a more inclusive and forward-thinking future.
WCAG – Web Content Accessibility Guidelines. Set out by WebAIM this is the guidance that aims to make online content more accessible through guidance on everything from website set up to colour contrast for type and background.
AA / AAA – These refer to two different levels of colour contrast compliancy. AAA is the most stringent requirement and AA allows for slightly less contrast between colours but is still deemed accessible.
Contrast score – This score is what determines whether a colour combination is accessible or not. It is always shown as a ratio to 1 for example 3.75:1.
AA / AAA safe – Within our colour checker this means that the foreground (text) colour that you have checked against a background colour will meet accessibility standards at any size. Ideally anywhere from 12pt and above, it can also be in any weight and it will meet the accessibility standards.
Large Only – Within our colour checker this means that the foreground (text) colour that you have checked against a background colour will only meet accessibility standards when it is at a certain size. For the WCAG 2.2 guidance this is 14pt for bold text, and 18pt for regular or light weight text.
Not Safe – Within our colour checker this means that the foreground (text) colour that you have checked against a background colour will not meet accessibility standards, no matter what size or weight the text is in.
Read up on the full WCAG 2.2 guidance from The World Wide Web Consortium You can read the full accessibility guidance here.
See the advice from UKAAF for more information on accessible print formats
Download our FREE accessibility guide – with tools to make sure your brand is as accessible as possible and increase your reach
We have more accessibility insights for you to read here