Devising colour schemes to improve website accessability


Or ‘color’ if you prefer to spell it wrong ;-)

A rookie mistake I sometimes see RapidWeaver users making is their choices of colour schemes. In reflection, it is probably a mistake we are all guilty of making at sometime or another.

With the explosive rise in ‘free form’ templates and other design systems, RapidWeaver users now have more flexbility than ever before to change colours.

However it is worth considering that your choice of colours can have a significant impact on the clarity of your written content - and potentially the accessibility of your website as a whole.

A lot of website users do not have colour-calibrated displays or the luxury of switching between different colour modes or profiles. Often your website will get viewed on smartphones or tablets, where ambient lighting or screen glare could be very bad. There can sometimes be quite sizable differences in how different operating systems and web browsers interpret colours.

So improving the contrast between backgrounds and written content is an important step to make. And one of the core fundamentals of building an accessible website.

The first rule is ensuring your colour scheme has some tolerances / leniences in it. This might mean delicately re-negotiating with a client or designer to tweak colours slightly, to safeguard against potential issues. Most are likely to understand, if you explain the reasoning.

Some text set to #c0c0c0 on a white #fefefe background might look okay in your eyes. But to someone else, the text might be impossible to read. And for lots of written content, it might get too straining to read.

I want to share with you tonight a super-useful little tool I have found, which I think every web designer should take a look at and have a play with:

This is well-worth bookmarking.

It gives a brief insight into what contrast is. You can give this tool either a text colour or a background colour, and explore ways of improving the clarity of that content, using sliders. If it thinks your colour choice is a poor one, it will display the words ‘fail’.

Recently I have received a couple of websites from some RapidWeaver users that have needed my attention. I have been slightly concerned in some cases, by their choice of colours. So I believe there is a lesson here many of us can learn - especially if we want to strive towards becoming the best web designers in the trade!

A couple of other tips I’d share with you, which I routinely do to improve text clarity in client projects:

Text shadows
Subtle text shadows (of no-more that 2px - 3px) can make text standout more and improve its clarity against a background. Any web browser newer that Internet Explorer 9 supports CSS text shadows.

Transparent fills
Particularly useful if you need to layer text over a distinctive background texture or image. I typically use an RGBa background fill behind the text - most often white or black. It will make that portion of the page look more ‘blocky’ and ‘material’ in design. But depending on what you are building, it can enhance the overall design.

Bigger (or bolder) is better
Don’t be afraid to wack-up the font size several rems or pixels or make some text bolder (especially headlines). It can help text standout more.

Letter / line spacing
Both have been widely supported in CSS since almost forever. But they sometimes get forgotten about. By ‘loosing up’ lettering, it can make it a bit easier on the eyes.

Don’t do image text
In other words, don’t make the text a part of an image. It makes the text increasingly difficult for the user to zoom and is bad for SEO. The only exception to this rule would be a small logo image - but even then, SVG might be a better option to use.

A final note - always check your text clarity at different screen sizes. Responsive designs (by their nature) reflow and move around a lot. What you want to avoid is a situation where something moves and suddenly (unexpectedly) becomes poorly contrasted against something else.

I hope the advice shared here is of use.



Anther great contribution from Will, thank you

1 Like

Thanks @willwood. This was very helpful because my client wanted a light grey text and this site confirmed to me that it was not the right color to use and I was able to go a bit darker and get a AA rating - plus can explain to client why.