All writing

Design

7 min read

Accessible colour without making everything beige

Contrast rules don’t have to mean a grey site. A few habits that keep colour bold and readable.

Colour chips in yellow, orange, blue and green fanned across a table

There’s a myth that an accessible site has to be dull. It doesn’t. It has to be readable, which is a different thing.

Put the loud colour behind dark text

Bright yellows, limes and oranges fail as text on white, but they make excellent backgrounds for black text. The availability strip on this site is a good example: near-black text on a bright lime passes easily.

Never let colour work alone

If a chart or a form error relies on red versus green, add a pattern, an icon or a word. About one in twelve men has some form of colour blindness, and many of them are your users.

Check it on a cheap phone, outside

Contrast checkers are a start. Then take the site outside on a sunny day on an old phone at half brightness. Anything you squint at needs work.

Portrait of Juno
Portrait of Juno

Juno Ashdown

Designer and developer

Available for work from November. Have a project in mind?

Start a project

Available for work from November

Projects from £3,000

Let’s talk.

Tell me what you’re making, when you need it and roughly what you’d like to spend. I reply to every enquiry within two working days.

Create a free website with Framer, the website builder loved by startups, designers and agencies.