Text | Digital Museums Canada


Maintaining structure and visual representation of text.


Visual headings divide sections of information and need to be marked up in order for users using only a keyboard or screen reader to be able to navigate. Headings should have a meaningful and clearly outlined hierarchy.

What to check

  • Each page should have at least one level one (h1) heading.
  • All text that looks like a heading is marked up as a heading.
  • The heading hierarchy is meaningful, beginning with an <h1> tag (generally similar to the page title) and does not skip levels.
Web page capture with arrows pointing at the examples described below.

Highlighting From Tides to Tins headings with the appropriate markup (“Timeline” is marked up as h1, “Pre-1870” is marked up as h2, and “Since Time Immemorial” is marked up as h3).

Web page capture with an arrow pointing at the example described below.

Navigating the St. Lawrence headings with appropriate markup (“Overview” is marked up as h1, “Overcoming Obstacles” and “A Clever Solution” are marked up as h2).



Some users need to enlarge web content or alter other aspects of the display including font and line spacing in order to read it clearly. Most browsers allow users to change the text size through settings, text-only zoom, or page zoom. If the page was not designed properly these alterations might render the page unusable; columns and sections could overlap, line spacing could reduce, and text could disappear.

Long lines of text make for poor legibility. WCAG 2.0 recommends a width of no more than 80 characters.

What to check

  • Text can be made larger. It is best to avoid images containing text; they are unreadable by screen readers and difficult to resize.
  • Text doesn’t disappear or get cut off when it is made larger.
  • Text, images, and other content does not overlap when made larger.
  • All buttons, form fields, and other controls continue to be visible and usable when made larger.
  • Horizontal scrolling is not required to read the full line of text.
  • It is best practice to make sure all text is visible on the screen with only vertical scrolling required. Set the text to “wrap” and fit the screen size when the size is increased.
Image with large text and overlapping letters

Example of good and problematic text resize. The letters in the image below are overlapping.



Some users cannot read text without a high contrast between the background and text colours, or without low luminance on the page if the colours are too bright. Accessible web browsers should allow users to change the colours of the text and background while still functioning.

The minimum contrast ratio is 4.5:1 for normal-size text (12px). For larger text (at least 24px and normal weight, or 19px and bold) the contrast ratio must be at least 3:1.

What to check

  • Ensure any text on a light background is a dark colour and any text on a dark background is a light colour.
Example of navigation with good contrast
Capture of navigation with problematic contrast

Example of navigation with good contrast (image above is 4.6:1) and inconsistent contrast (image below goes below 4.5:1 in certain areas).