5 Text Styles, Colours, & Contrast

Text Styles

Accessible Use of Bold & Italics

Bold and italics are commonly used to emphasis a word or phrase within a section of text. However, using default settings, bold and italics words and phrases are not spoken any differently by most screen readers. This means that you lose the emphasis on that given word or phrase.

Does this mean bold and italics should not be used?

Although the emphasis from bold and italics is lost on screen readers, they can still provide additional context to sighted users. However, a sentence should not lose its meaning if the bold or italics are removed.

Accessible Font Choice

Font choice is very important. Accessible fonts will help make content easier to read for users with vision impairments or dyslexia.

Colours and Contrast

Choosing accessible font and background colours ensures that all text will be easily readable, even for those with vision impairments or colour blindness.

It is important to note that while colour can increase comprehension of content for sighted users, it should not be used as a way to convey information, as this information will be lost to colour blind and assistive technology users.

The contrast between the font colour and the background colour is very important. The ratios for accessible colour contrast on the web are found in the Web Content Accessibility Guidelines (WCAG), which is an international standard used to help create accessible content on the web. The ratios for WCAG 2.1 AA standards are as follows:

• Text and images of text must have a minimum contrast ratio of 4.5:1
• Large text (font size of 18 or larger) must have a minimum contrast ratio of 3:1

Note that these are the accepted minimum ratios. As seen in some of the examples below, sometimes the minimum ratio can be harder to read than other text. Try to aim for slightly higher contrast ratios to keep text as legible as possible.

It is very difficult to tell with the naked eye if coloured content meets these accessibility standards. To be sure that the colours chosen have sufficient contrast ratios, you can use WebAIM: Contrast Checker (https://webaim.org/resources/contrastchecker/).

Contrast Examples

Minimum Ratios

• Gray (#767676) on white has a ratio of 4.54:1
• Purple (#CC21CC) on white has a ratio of 4.5:1
• Blue (#000063) on gray (#808080)
• Red (#E60000) on yellow (#FFFF47)

WCAG AAA Ratios

Below are some examples of colour ratios using the AAA standard, which requires a 7:1 ratio for normal text, and 4.5:1 ratio for large text.