Are my Colours Accessible?

Why? Well, apart from being an excuse to use a domain name, colour contrast and the use of colour is extremely important for certain groups of people with varying levels of visional impairment.

Information and user interface components must be presentable to users in ways they can perceive.
– Principle 1: Perceivable, WCAG 2.0 Guidelines

Make it easier for users to see and hear content including separating foreground from background.
– Guideline 1.4 Distinguishable: WCAG 2.0 Guidelines

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA).
– 1.4.3 Contrast (Minimum): WCAG 2.0 Guidelines

For text-based information to be perceivable by all users regardless of level of sight and to safely meet WCAG 2.0, AA requirements, you should aim for a minimum contrast ratio of 4.5:1 for all text content. There are 2 exceptions to this; large text that is 18pt or 24px and above or bold text that is 14pt or 18px and above, where the minimum contrast ratio can be 3.0:1

Building upon and heavily influenced by the excellent Colorable, I wanted more context around the result. When you share the outcome with your colleagues, all the results, rules and what you’re aiming for, is easily understandable for when you have those awkward conversations with designers and marketers.

Accessibility doesn’t have to be ugly.

Built by Simon Taggart, code on GitHub, hosted on Netlify.