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 tester you can check the contrast of text, icons, and background colour combinations against the latest WCAG 2.2 guidelines set out by webAIM. You can read the full accessibility guidance here. No plugins or apps necessary, simply open our colour palette checker web page enter your RGB values or HEX codes from your colour palette, and get started. Our accessibility checking tool is compatible with Mac and Windows, and with Chrome browsers, Safari, and Firefox browsers.
Use this colour tester if you want to check the contrast ratio of one background colour against one foreground colour. Your foreground colour will be the colour you want to use for either typography or icons. Our checker can help you to meet wcag colour contrast requirements.
Make sure you set what colour contrast standard you want to test the colours against, either level AA or AAA. Level AA is less stringent, and level AAA is the most stringent and hard to pass.
You can adjust your colours if you aren’t happy with the results. Do your colours have minimum contrast or lack compatibility with accessibility requirements? You can tweak in a range of ways, such as making your foreground colour either lighter (using pastel colours for example) or trying a different colour that is darker as a starting point. Make sure to use the correct codes for colours, otherwise you may have a redundant entry in the checker. If you would like some more advice, we have our tips on how to build accessible colour palettes from scratch on our insights page.
Our colour palette checker has a range of useful features, so here is a run-down of how you can utilise them.
You can use the checker to analyse an unlimited number of colours at once. You can also use it to tweak a colour palette to create more accessible colour 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 colours you shouldn’t!
Do you feel unhappy with the number of combinations that you have? You can use the checker as a colour palette builder, setting up a wheel of accessible hues that your business can use. Add additional colours that you think will have a high contrast and expand the number of combinations you can use, without changing the tone of your brand’s colour wheel. Or, you can try fine-tuning one of your colours, alternating saturation or shade, to create more accessible combinations. Do you need to see your contrast ratio in your check? Easy: hover your mouse over your results in the contrast checker to read.
You can even customise your colour schemes so that your internal names for brand colours aren’t lost in the process. Go to the ‘name colour’ section to edit the existing colour codes and add your bespoke colour names for each. These names will then appear in your pdf, so that you can keep your in-house references for each colour and avoid confusion in your design teams.
Our colour accessibility checker is a great way to start implementing accessible design immediately. You can download the results from your test as an Adobe pdf so that your design team (or external design agency) or web developer partners can get running straight away with your accessible results.
The term accessible is regularly used in the world of design, but do you ever wonder exactly what it means, and how it can be put into practice?
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. The base-level standard is level a, or WCAG 2.0, followed by WCAG 2.1. However, we can all do so much more to broaden our accessibility and therefore your audience, and we believe in aiming for the highest level – WCAG 2.2.
This method makes getting involved easier for people with visual, motor, cognitive, or hearing needs, ensuring that nobody feels left out. For example, by instilling accessible design into your brand, you may be able to connect to members of your audience who struggle with visual impairments such as colour blindness and low vision. There are so many nuances to the needs of your audience, that accessible, interactive design must cover many bases, everything from getting the colours and text colours spot on, ensuring your website accessibility considers the user experience of complex needs, to making documents easy to read and optimising them for assistive technologies such as screen readers. Accessible design applies to even the most minute of details, even the text within javascript, HTML, CSS, and alt text, needs to be accessible to all. By prioritising accessible design first, you improve usability of your brand platforms both internally and externally, guaranteeing crystal-clear communication that includes everyone.
Contrary to what you might think, accessible design can be just as creative. At Studio Noel we prioritise accessibility, and we believe that good design is always accessible. Our colour checker will help you to do this by making sure you can get the most out of your brand colour palettes.
At Studio Noel we are experts in the ever-evolving discipline of accessible design. Improving your brand’s accessibility is key for increasing your reach, and we believe that making sure that you are getting it right is so important. Accessible design spans a range of important touch-points – this can mean improving your digital accessibility by looking at whether you have an accessible website, testing whether your user interface components and non-text components (buttons, navigation bars, imagery) are accessible – through to improving the accessibility of your printed matter (leaflets, posters, booklets and beyond.)
We have helped many businesses make their brands more accessible to their consumers, even streamlining processes for businesses internally. By working with experts like Studio Noel, you can identify accessibility problems that may have gone unnoticed. We can guide you in creating sustainable design practices that connect you to a broader audience, and positively impact growth.
With our knowledge and experience, we can cater to your needs. Here are some of the ways that we do this…
We undertake in-depth brand audits to pinpoint accessibility issues and areas for improvement, ultimately giving you actionable recommendations.
We help to educate your team on the importance of accessibility, and learn the practical steps for implementation.
Keep your standards current, in line with wcag 2.2 guidance, and ensure everyone follows best practices..
Templates offer a way to practically implement accessible design, ensuring everyone follows the best, up-to-date, practices. Templates are user-friendly and improve functionality and productivity for your teams.
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.
Here are some key terms to familiarise yourself with…
WCAG – Web Content Accessibility Guidelines. Set out by WebAIM, this is the guidance that distils the wide-ranging success criteria for accessibility. These guidelines aim to make online content more accessible and ensure your conformance to their standards, while giving qualified authentication. The WCAG offers guidance on everything from website set-up, to accessible colour 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 is the result of putting your colour codes through a colour contrast analyser. This contrast 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 this will be 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 (large text). According to the WCAG 2.2 guidance this is considered above normal text size, from 14pt for bold text small text, and 18pt for regular or light-weight text. For instance, large text can be used for headings or titles.
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. For example, a white background and yellow text.
Read up on the full WCAG 2.2 guidance from The World Wide Web Consortium You can read the full accessibility statement here.
See the advice from UKAAF for more information on accessible print formats.
US-based? Find more information on disability rights and accessibility via the ada website.
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
Your guide to brand accessibility in the digital space
An ultimate guide to website design accessibility
Read about forward-thinking European Accessibility Act
How do technology giant Microsoft implement accessibility commitments into their practice?