Document accessibility - Fonts, formatting and contrast

Fonts

When creating a document, both font style and font size are important. Use at least 11-point font within the main body text. For printed documents, 12-14 point is even better. Headers and footers should have a minimum 9-point size. The font sizes should allow for zoom or magnification without being distorted.

Serif and sans-serif fonts

Some fonts are easier to read than others. It is best practice to use clear and easy-to-read fonts (sans-serif fonts are often recommended), such as Arial, Calibri and Verdana. 

Serif fonts have decorative lines (also commonly referred to as ‘tails’ or ‘feet’) while sans serif fonts do not. Without tails, sans-serif fonts have simple, clean lines that are the same width throughout.

Spacing means the space around text, and includes:

• margins
• line spacing
• word spacing
• text alignment
• indents 

Carriage returns

Do not use ‘carriage returns’ (Enter) or the space bar to obtain a specific visual effect in a document. Document creators may do this to add white space, make a paragraph start on a new page, or indent a paragraph. However, a screen reader may interpret the ‘Enter’ as a new paragraph with no text. It may also communicate the word ‘blank’ for every empty line.

Spacing and formatting considerations

Use the paragraph feature in Word to add space between lines or paragraphs. You can also use the paragraph feature to add page breaks. The spacing becomes standard throughout the document or for certain sections.

If possible, align body text left and do not justify paragraphs. Justifying paragraphs adds additional spaces between letters and can be more difficult to read for some people.

If the document is written in columns, use the column feature. Do not try to adjust using extra spaces.

How to format spacing and paragraphs

1. Highlight the text or paragraph to be formatted.
2. Expand the Paragraph tab by selecting the small arrow, the ‘Paragraph Settings’ option, at the bottom of the Paragraph tab.
3. Format the paragraph or text as desired. There are many options for formatting. You can add spacing above or below the paragraph(s), indent lines or paragraphs, set your line spacing to double or single, create page breaks, etc.
4. Look at the ‘Preview’ box to verify the formatting is correct.

Colour contrast

Colour contrast is the difference between the value of the foreground colour (usually the font colour) and the background colour. If there is not sufficient contrast between the foreground and background, some people may not be able to differentiate the text from the background or it may make understanding the text more difficult.

Colour contrast considerations

To relay important information, never rely solely on colour. Consider using other indicators alongside the colour.

WCAG (W3C Web Content Accessibility Guidelines) 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AA is a good level to aim for.

How to find colour values for font

1. Highlight the text.
2. Go to the ‘Home’ tab on the ribbon bar and select ‘Font Colour’ in the ‘Font’ area of the ribbon.
3. Select ‘More Colours.’
4. Go to the ‘Custom’ tab.
5. Under the ‘Color model’ drop-down field, there are 3 fields (Red, Green, Blue) populated with numbers that make up the RGB formula for the colour of the text.
6. Input these numbers into WebAIM's contrast checker. Make sure to include the background colour if it is something other than white. 
7. The contrast checker will identify which colours pass or fail the visual test.

How to find colour values for backgrounds 

1. Select the page/area for which you want the background RGB code.
2. Navigate to the ‘Design’ tab on the menu bar and select ‘Page Color’ in the Page Background area of the ribbon.
3. Select ‘More Colors.’
4. Go to the ‘Custom’ tab.
5. Under the ‘Color model’ drop-down field, there are 3 fields (Red, Green, Blue) populated with numbers that make up the RGB formula for the colour of the background.
6. Input these numbers into Web Aim's contrast checker.

7. The contrast checker will identify which colours pass or fail the visual test.

   Resources

• Web AIM – Colour contrast checker that checks for sufficient contrast between the text and the background. 
  • If your contrast fails, use the slider bar to find a colour that is close to the original that you can use.
• WCAG Contrast Checker – Colour contrast checker. You can import pictures to check for compliance. The checker also has a colour blindness simulator.