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
, ands
elements to screen reader users.
- Exception: Use CSS-generated text to expose
- 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.
- Hide it from screen reader users with the
- Add a label for screen-reader users in a second
<span>
element, visually-hidden with the WET CSS class.wb-inv
.
- Set the icon on a
Hiding content
Content can be hidden from three groups of users:
- From all users, by using either the CSS
display:none
orvisibility: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.