How to pick the best fonts and colours for your website

More than two million people are living with sight loss in the UK. As well as those who are registered as sight impaired, that includes people waiting for surgery whose visual impairment might be temporary.

 

An accessible website, with effective colour contrast and accessible fonts, means even more people can access your services, support your charity, or volunteer for your organisation. 

 

And designing an accessible website helps everyone. Read our article about other ways to make your website more accessible.

 

 

Colour contrast

 

Colour contrast is the difference in brightness between two colours. Low contrast happens when two colours are difficult to tell apart. High contrast happens when two colours are very different. The colour contrast is written as a ratio.

 

Without enough contrast between the text and background of your website, parts could be hard or impossible to read, especially for people with visual impairments.

 

And low contrast can also make text difficult to read for people who have colour vision deficiency (are colour blind) – in the UK that’s one in 12 men and one in 200 women.

 

The Web Content Accessibility Guidelines (WCAG) are standards to improve web accessibility. There are three levels of compliance, and it’s recommended that charities focus on reaching Level AA of the guidelines. The guidelines state that the ideal colour contrast ratio is 7:1 for normal text and 4.5:1 for large text.

 

A colour contrast checker will show if your colours meet WCAG requirements. There are lots of colour contrast checkers, such as the WebAIM contrast checker, which are easy and free to use. They can test if there is enough contrast between your text and background colours and suggest where changes need to be made.  

 

Other colour contrast tips include:

• Don’t only use colour as a way of showing hyperlinks on a page, underline them too to make them distinct for people who are colour blind
• For any buttons, use symbols or labels as well as colour
• Avoid red and green combinations as this is the most common type of colour blindness
• If you’re creating new branding or a revised website, take a look at these colour contrast palettes for inspiration and Scope’s detailed guide to colour contrast accessibility
• Don’t use too many different colours in any one section, as it can be confusing and harder to navigate
• Consider using patterns and textures instead of colours (for example, to differentiate columns on a bar chart)
• Avoid using skinny strips of colour or thin outlines. It can be easier to see thicker, more pronounced lines – which is especially important for call to action buttons

 

Accessible fonts 

 

The font you use can have a huge effect on someone’s ability to read and understand your content. Some fonts are much easier to read than others, some can be inaccessible for people with a visual impairment, and others are harder to read for people with dyslexia (around 10% of the UK population).

 

ReciteMe explains how very elaborate or ornate fonts can be difficult to read and see clearly. They suggest avoiding serif fonts (which include a decorative line, such as Times New Roman) as these can distract from the overall shape of the letter and blur when read on screen. Similarly, fonts that look like handwriting can be difficult to decipher and messy, especially if read on a mobile.

 

Instead, they recommend simpler san serif fonts (fonts without a decorative line). Generally, it recommends using fonts that have clear letter shapes and a consistent weight (having an even thickness for each letter makes it less strenuous on the eyes). ReciteMe’s top ten accessible fonts include:

• Arial: a clean design and uniform shapes
• Verdana: wider letters and spacing make it more legible on digital screens
• Tahoma: has sharp lines and clarity
• Dyslexie: is specifically designed as a dyslexia-friendly font

Other tips to make your copy accessible are:

• Don’t switch between lots of different fonts. Choose one or two and stick to them. Too many makes it harder for the reader to identify what they’re looking at (headings or body copy) and too much variation on one page can be confusing and overwhelming. 
• Avoid using animated text, for example letters that flash
• Use italics sparingly (if at all). Italics can be harder to read, especially on smaller screens like mobiles
• Use left-aligned text. Having this consistency (rather than centre aligned text) helps readers to find the beginning of the next line of text, making it easier to read or scan
• Use larger line spacing (at least 1.5 times the font size). This gives your text more breathing space, making it much easier to read