Accessibility Design Guidelines:

Typography

colourful flowers
Source: Photo Jess Bailey on Pexels

Why is this Important?

Text on a web page must be legible so it can be read by people with disabilities. Individuals with vision and cognitive impairments require certain considerations to be made during web design and development that affect your typographic design choices. Achieving web-accessibity requires more than deciding on which font to use for a web page. Considerations such as colour, font-size, spacing, heading tags, placement (e.g., proximity and whitespace) can have a powerful affect on users.

For instance, users with colour-blindness cannot rely on the colour of a text-field to alert them of an error in a form. Read more about this topic in the forms page. In addition, screen readers rely on heading tags to convey the typographic structure of a web page to a user.

Text on web pages refers to a variety situations, such as button text, link text, text on images, captions, headings and text in HTML forms. The following examples below illustrate situations where designers can implement the appropriate WCAG Success Criteria, in order to be AODA compliant.

NOTE: In order to make a website even more accessible, designers can refer to the Success Criterion, "1.4.6 Contrast (Enhanced) Level AAA " which requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text or bold text. However, this is not yet a requirement to meet in Ontario in order to be AODA compliant.

vision impairments example

Figure A: Categories of vision impairment as defined by the World Health Organization (2018). Image Source: University of Edinburgh

"The minimum contrast Success Criterion (1.4.3) applies to text in the page, including placeholder text, text that is shown when hovering over an object or when an object has keyboard focus."

WAI, WCAG Read about this Success Criteria.

Best Practices

Designers can implement styling techniques that target certain CSS properties such as font-size, color, background-color and line-height, font-weight to make typographic elements accessible. See Figure A.

  • Avoid text that is embeded in raster-based images as it will pixelate when scaled up.
  • Avoid using script, cursive or specialty display fonts.
  • Use HTML heading tags in a hierarical manner to aid in comprehension.
  • Incorporate good contrast between text and background elements.
  • Don't rely only on the appearance of the text to convey its meaning.
  • Use relative units for font size, such as ems or rems to ensure scalability. 
h1{
                              color: #ffffff;
                              font-family: '', sans-serif;
                              font-size: 2em;
                              line-height: 1.5em;
                              font-style: bold;
                            }

Figure A: An example of how the css properties and values for heading text can be used to improve web-accessibility.

EXAMPLES

Click on the icons below to reveal the corresponding WCAG Success Criteria

Example 1

Product Description

This example compares the typographic design for a flower shop product description.

Figure A demonstrates poor use of design methods that impede legibility, such as low-contrast, small text and line-height, using cursive fonts and fully justified text and a lack of spacing between elements. Although placing text above an image is permissable, this example does not meet the acceptable contrast ratio of 4:5:1.

In contrast, Figure B incorporates negative space to distinguish elements, good contrast between text colour and the background colour as well as avoiding text placed on an image. Fully justified text should be avoided as it causes rivers as well as poorly identified buttons (see example below).

"The intent of Success Criterion 2.4.4 Link Purpose (In Context) is to help users understand the purpose of each link so they can decide whether they want to follow the link. Whenever possible, provide link text that identifies the purpose of the link without needing additional context.
NOTE: Link text is intended to describe the purpose of the link."

WAI, WCAG Read about this Success Criteria.
ON SALE NOW!
image of roses bouquet

Pink Roses Bouquet

Enjoy floral bouquets with our unique collection of florals. Our flower catalogue features a variety of arrangements.Enjoy floral bouquets with our unique collection of florals. Our flower catalogue features a variety of arrangements.Enjoy floral bouquets with our unique collection of florals. Our flower catalogue features a variety of arrangements.Enjoy floral bouquets with our unique collection of florals. Our flower catalogue features a variety of arrangements.Enjoy floral bouquets with our unique collection of florals. Our flower catalogue features a variety of arrangements.Enjoy floral bouquets with our unique collection of florals. Our flower catalogue features a variety of arrangements.Enjoy floral bouquets with our unique collection of florals. Our flower catalogue features a variety of arrangements.Enjoy floral bouquets with our unique collection of florals. Our flower catalogue features a variety of arrangements

CLICK

Figure A This example fails to meet AODA standards related to text on a web page.

image of roses bouquet
Pink Roses Bouquet

$59.00 SALE

Enjoy floral bouquets with our unique collection of florals. Our flower catalogue features a variety of arrangements.

ADD TO CART

Figure B This example meets AODA standards related to text on a web page.

Source: Photo by Paula Hayes on Unsplash

Example 2

Text on Images

If the background is a solid color (or all black or all white) then the relative luminance of the text can be maintained by making sure that each of the text letters have 4.5:1 contrast ratio with the background.

If the background or the letters vary in relative luminance (or are patterned) then the background around the letters can be chosen or shaded so that the letters maintain a 4.5:1 contrast ratio with the background behind them even if they do not have that contrast ratio with the entire background. Text that is decorative and conveys no information is excluded. [Ref. www.w3.org]

Read more about the Success Criterion 1.4.3: Contrast (Minimum) here.

"The intent of Success Criterion 1.4.3 Contrast (Minimum) is to provide enough contrast between text and its background so that it can be read by people with moderately low vision. To meet Level AA, small text must have a contrast ratio of at least 4.5:1 or 3:1 for large text.

WAI, WCAG Read about this success criteria.
Source: Pixabay image of flower boquet

Fails WCAG 2.0 AA with colour contrast RATIO: 1.42

Passes WCAG 2.0 AA with large-scale text over 18pts (24px)

. image of flower boquet

Passes WCAG 2.0 AA with colour contrast RATIO: 4.95

Passes WCAG 2.0 AA with large-scale text over 18pts (24px)

Example 3

Text Contrast

This example refers to the WCAG 2.0 AA color contrast guidelines in links, buttons and text used on webpages. Boldface and underlined links are more visible to users with low vision. Apply well-contrasting colors by placing light text against dark backgrounds or vise versa.

"The minimum contrast Success Criterion 1.4.3: Contrast (Minimum) applies to text in the page, including placeholder text and text that is shown when a pointer is hovering over an object or when an object has keyboard focus. If any of these are used in a page, the text needs to provide sufficient contrast."

WAI, WCAG Read more about this success criteria.
example of text contrast Source: WebAIM

NOTE: Small text is defined as 14 pt (18.66px) or smaller. Large text is defined as 18 pt (24px) or larger.

The Success Criteria for Typography

Who Does This Benefit?

user IconUsing Keyboards for Navigation

book IconReading Disabilities

vision IconVisual Impairments

computer IconScreen Reader Users

brain IconCognitive and Learning Disabilities

The Related WCAG Success Criteria

1.4.3 Contrast (Minimum)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement. (Level A)

2.4.4 Link purpose (in context)

The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)

2.4.6 Headings and Labels

Headings and labels describe topic or purpose. (Level AA)