Some ways to create accessible colour palettes
What you don’t cope with pandemic anxiety by building a complicated system to derive colour palettes with accessible colour contrasts? Earlier I posted a screenshot of my work in progress on some palettes for the Site.js starter blog theme. Some folk wanted me to share more, so here comes some colour nerdery…
My work in progress…
I’m a fan of colour as you can probably tell from my website. And while I tend to err on the side of over-the-top in my personal projects, I won’t compromise on accessibility. There’s no point having pretty colours if people can’t read your text. I make websites not art.
There are two big factors when it comes to colour and accessibility:
- Colour should not be used as the only way to convey information.
- Text colours should be a reasonable contrast against background colours.
(Have you read Geri Coady’s Colour Accessibility Workflows book? It’s really great, and I recommend that for a more in-depth discussion.)
Text colour contrast
As individuals with varying degrees of eyesight and colour perception, it’s difficult to judge what’s a reasonable colour contrast. Fortunately, the WCAG (Web Content Accessibility Guidelines) have done the maths and given specific guidelines on colour contrast: Success Criterion 1.4.3 Contrast (Minimum) and Success Criterion 1.4.6 Contrast (Enhanced). Level AA is the minimum requirement for conformance, and AAA is the highest level of conformance.
How to Meet Contrast (Minimum) (Level AA) The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1
Success Criterion 1.4.6 Contrast (Enhanced) (Level AAA) The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1
Whenever I create colour palettes in my work, I’m guided by these recommendations, and a couple of tools to test my contrast choices against these numbers.
Note: If you’re after an in-depth explanation of colour accessibility, or tools to create accessible colour palettes, Stéphanie Walter’s blog post on Color accessibility: tools and resources to help you design inclusive products is an incredibly thorough collection of advice and tools. I’m going to focus more on the thought process on creating an accessible colour palette from scratch.
Things I know to be mostly true
Over my last decade or so of designing for the web, I’ve come to hold some time-saving tips to be true:
- It’s really hard to make orange or yellow work as text or a background with sufficient contrast. If you go light, you’ll get cream or peach. If you go dark, you’ll get brown. Great if you’re into a 70s aesthetic but will otherwise look dated. Unless you’re working with a brand colour, forget yellow and orange.
- The lightest grey text you can get away with on a white background is #595959 grey for AAA conformance and #767676 grey for AA conformance. If I see either of these colours (or a close hex code) in someone’s CSS, I have a little knowing smile moment. I know what that designer/developer has done, and I don’t hate them for it.
- High contrast is not as bad as low contrast, but can be really hard work on the eyes. #000 black on #fff white (or white on black) can make the text appear to be moving. It’s useful to contrast black or white with a grey that is off-white or off-black to benefit most people’s reading experiences. (Though many people benefit from high contrast modes and I recommend reading about how to accomodate their needs too!)
- A page is easier to read continuously if all the text is a similar contrast against the background. If a page is using all dark text on light, it’s very jarring if you suddenly come across light text on dark. Sometimes you can use that change in contrast to draw attention to buttons or other outstanding elements. But it increases the cognitive load. Another place I come across this problem is in links. You want link text to stand out and I’m all for using colour alongside underlines (please always underline links!) to make links more distinctive, but if the colour is much lighter or much darker than the rest of the text, it again makes the text harder to read and increases the cognitive load.
I’m making a theme
As I mentioned above, I’m making a theme for a blog that uses Site.js (and Hugo). Designing colour palettes for themes have an advantage, because you’re not constrained by brand colours, however sometimes constraints are useful as a starting point. I want to give people a few colour choices for the theme, to make customisation easy, so I initially settled on some arbitrary palette restrictions. Firstly, a light on dark theme and a dark on light theme. These may end up being options for a light mode and dark mode. On top of those basic themes, I decided to add some “highlight” colours that can be used for acccents, and brighten up the page. My initial arbitrary choices were blue, pink, green and red. Fairly popular colours for websites.