Check the accessibility of your brand's colour palette
While there are lots of tools out there to test the accessibility of colour combinations, we couldn’t find one that could test an entire colour palette, so we created one.
Just choose the WCAG standard – opens in a new window you want to test against then use the Add a colour link to add each of your brand’s colours. The grid will show a pass/fail for small text (17pt and below) and for large text (18pt or 14pt bold and above) as well as for icons and actionable graphics. The URL of the page will update automatically, so you can bookmark the page, or share a link with your colleagues with your colour palette pre-loaded.
We’d love to hear your feedback, so if you have any comments or feature requests, please email us at hello@studiorepublic.com.
Your brand colours
Choose the WCAG standard to check against and enter your brand colours below to check which combinations are accessible:
Small text (17pt and below)
Large text (18pt / 14pt bold and above)
Objects (icons and actionable graphics)
WCAG guidance
For a pass at level AA, text and images of text must have a contrast ratio of at least 4.5:1, with the exception of large text, which should be at least 3:1.
Level AAA is stricter, and requires a contrast ration of at least 7:1, while large text should have a contrast ratio of at least 4:5:1.
These are automated results, and further consideration should be given to users with other needs, such as colour blindness. Just because a colour combination meets the WCAG requirements, that doesn’t mean that it will be accessible to all users. There is a great guide on colour blind design here – opens in a new window. Bright, contrasting colours can also cause sensory issues for users with Autism, so should ideally be avoided, or users can be given the option of a more muted colour palette. We implemented this for Transport for All on their website – opens in a new window.
Colour choices are just one aspect of creating an accessible and inclusive digital experience. We produced our Principles of Inclusive Digital Design guide to help designers navigate the accessibility landscape and is a great place to get started on the journey to creating more inclusive digital products.