Best practice

Colour

  • Ensure that information conveyed by colour differences is also available in text.
  • Include a text cue for coloured form labels.
  • Ensure that additional visual cues are available when text colour differences are used to convey information.
  • Ensure a contrast ratio of 3:1 with surrounding text and provide an additional visual cue on focus for links or controls where colour alone is used to identify them.

Contrast

  • Ensure small text (under 18 point regular font or under 14 point bold font) has a contrast ratio of at least 4.5:1 with the background.
  • Ensure large text (at least 18 point regular font or 14 point bold font) has a contrast ratio of at least 3:1 with the background.
  • Ensure active user interface components (i.e., controls), their states, and meaningful graphics have a contrast ratio of at least 3:1 with adjacent colours.
  • Implement enhanced contrast whenever possible, aiming for the stronger 7:1 contrast for small text and 4.5:1 contrast for large text.

Visual proximity of labels

  • Position labels for form fields immediately before the field, either:
    • above the field (preferred by the WET Style Guide), or
    • to the left of the field, aligned right (preferred by the WET Style Guide when there’s a need to conserve vertical space).
  • Position labels for radio buttons and checkboxes after the field.

Text spacing

Your design should be flexible enough to render without any loss of content or functionality when the user modifies the text spacing, within these constraints:

  • Line height (line spacing) to at least 1.5 times the font size;
  • Spacing following paragraphs to at least 2 times the font size;
  • Letter spacing (tracking) to at least 0.12 times the font size;
  • Word spacing to at least 0.16 times the font size.

To design for text spacing override:

  • Don’t use fixed containers in your CSS styles.
  • Ensure that content reflows without overlapping or clipped text.
  • Use relative units of font size, line height, spaces between characters, words, lines and paragraphs.

CSS-generated content

  • Hide decorative CSS-generated content from screen readers with the aria-hidden="true" attribute.
  • Don't use CSS-generated text.
    • Exception: Use CSS-generated text to expose mark, del, ins, and s elements to screen reader users.
  • For informative CSS-generated icons:
    • Set the icon on a <span> element, and:
      • Hide it from screen reader users with the aria-hidden attribute.
      • Add a visible label for mouse users with the title attribute.
    • Add a label for screen-reader users in a second <span> element, visually-hidden with the WET CSS class .wb-inv.

Hiding content

Content can be hidden from three groups of users:

  • From all users, by using either the CSS display:none or visibility:hidden attribute. When hiding inactive content, such as untriggered modal windows and unselected sub-menus, hide it from all users.
  • From users of assistive technology, by using the aria-hidden="true" attribute to remove the element from the Accessibility API.
  • From sighted users, by using the WET CSS class .wb-inv to visually hide the content.

Exposing content on hover or focus

When exposing hidden content via pointer hover or focus, ensure the exposed content has these three properties:

Dismissable
The user can dismiss the exposed content without moving the mouse or keyboard focus, typically by pressing the Escape key.
Hoverable
The user can hover the mouse over the exposed content.
Persistent
The exposed content doesn’t disappear until mouse hover or keyboard focus leaves it.
Back to top