How to make your website more legible

 

When it comes to website accessibility, most people’s first thought is that it means catering for visitors who use screen readers. Whilst this is true (and will be something I discuss in another post), designing for accessibility also includes designing for those with more minor visual impairments.

For example:

• Most people are visually impaired in some way and may need to wear glasses or contact lenses. But not everyone wears them during their daily routine. If your design doesn’t cater for people like this they would be forced to go looking for their glasses rather than spend time on your site looking at what you have to offer.
• If you are fortunate to have perfect vision and think that people who cannot read your text just have to come a little closer to the screen, be aware that a quarter of people are far-sighted and so will instinctively move farther away, making small text even harder to read.
• Text that is too small takes a lot of concentration to read, and the harder you make it for people to read your text, the more frustration it will generate. Don’t give anyone an excuse to leave your site in favour of your competitors.

So how do you make your text more legible?

1. Get the size right

The correct way to know which font size to use is to calculate font size based on the device/screen size in use and the user’s average distance from the screen, but that assumes that you know which devices are going to be used and where your user is most likely to sit. It also assumes that your maths or physics is good enough to do the calculation (mine isn’t). If you’re really geeky and want to do the calculation, you can find it here – https://uxdesign.cc/legibility-how-to-make-text-convenient-to-read-7f96b84bd8af. If not, a good rule of thumb is to set body text at either 14px or 16px.

2. Get the contrast right

Contrast is the difference between the text colour and the background colour. The lower the contrast, the harder the text is to read, particularly if, like me, you have poor contrast vision. W3C guidelines for contrast are 4.5:1 for smaller text and 3:1 for larger text. If you’re not sure if you contrast is good enough, you can use the tool at https://webaim.org/resources/contrastchecker/.

However, don’t think that the maximum contrast of black on white is the best just because it’s the biggest. Black on white can reduce legibility for people with cognitive impairments such as ADHD or dyslexia. There are no clear rules about which combination is best, but using a light (but not white) background is usually the best recommendation – a pastel colour or a light grey should work well. If your site is specifically targeted at people with a cognitive impairment then the best thing you can do is ask them which colours they prefer. This is exactly what we did when designing the site for Tees Valley Buddies.

3. On the same topic, avoid colour combinations that make reading difficult for people with colour blindness.

Never put red on green or blue on purple. If you want to see how your colour appears to someone with colour blindness, put the hex code of your colour into colorhexa.com and scroll down to the section where you can see how it appears to people with different types of colour blindness.

4. Pick an easy-to-read font

I was taught that sans serif fonts like Arial and Calibri are the best to use, avoiding the serif fonts like Times New Roman, but as screen definitions have improved this is no longer the case. However, when choosing your font, avoid one which is not familiar to the vast majority of readers. If you stick with a mainstream font then your site visitors will be able to easily scan your content.

5. Don’t use a thin font

You’ve done all the research into your colour combos, font sizes and typefaces, so don’t blow it at the last hurdle by using a thin font. These seem to be very on trend at the moment, but as soon as you make the font thin you lose the legibility gains you’ve made getting your font and contrast right. Normal weight is great for body text.

Now that you’ve done all that work, how can you be certain you’ve got it right?

There are loads of accessibility tools around that will give you a report, Wave being one of the most popular, but these all have their limitations. Wave, for example, will tell you that you’ve got the contrast right, but it won’t tell you if the text is too thin.

The best way by far to check that your design is legible is to ask a human – or, ideally, many humans. Try, if you can, to find people whose vision isn’t the best. You’ll generally find that they will be more than happy to help because they’ll be so grateful for anyone trying to make their lives easier after years of struggling to read their favourite websites.

This article is only a selection of things you can do to make your website more legible. If you’d like to know more, don’t hesitate to get in touch with me at jackie@jackdawwebdesign.co.uk.