Visual Presentation

 


Designing visual presentation

You can choose your own colours and font from the LibPress Customizer. These visual elements relate to style and are controlled by the Cascading Style Sheets. While this does not affect assistive technologies, the proper use of style elements are important to consider for those with low visibility or other perception difficulties who do not use a screen reader.

See also the Website Preferences Tool, where a visitor to a site can select options to make their reading experience suit their particular needs.

Colours and contrast

Do not rely on using colour to convey meaning, as persons who are colour-blind may not be able to visually distinguish the information. There should always be several ways to differentiate text. Consider the following examples:  

  • Hyperlink text is in a different colour and underlined. 
  • Graphs where trend lines are differentiated by colour and a difference in line style (dots and dashes, for instance). 
  • Electronic forms that display an error with both an asterisk and colour. 

Ensure that your document has a sufficient high colour contrast ratio. Persons with low vision may not be able to read your content if you use low-contrast colours (e.g., gray text on a light blue background). The Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast of 4.5:1.  

Don’t forget that this applies to designing legible images, such as buttons too!

A tool you can use to check contrast for your website is the WebAim Contrast Checker.

Font Attributes

Using accessible fonts make your web page more accessible for people with low vision and easier to understand for persons with learning disabilities. 

Free Google fonts that are accessible include: Lato, Open Sans, and Verdana. New fonts are available such as Atkinson Hyperlegible and Poppins–both of which are available in Canva. 

Best Practices to ensure your font attributes are accessible:

  • Use a sans serif font, as these are easier to read. 
  • Use a large font size (14 points). 
  • Limit or avoid the use of all caps.
  • Don’t use colour alone to convey meaning in your text. This means that if you want to draw attention to a word or a phrase, just using colour alone will not be enough for those with colour vision deficiency (“colour blindness”).
  • Consider how your text contrasts with the background of your document. Black text on white is accessible, but light grey text on a white background has low contrast and is difficult to read.

Other aspects of font to consider:

Alignment

Avoid centering titles and images that would break up the flow of text. To allow someone with low vision to easily scan a page, or someone who uses a magnification tool, important elements of the page should be left aligned.