Accessibility (a11y) Rules - 4

Color and contrast

• Regular-sized text, including images of text, must have a color contrast ratio of 4.5:1.

• Large-sized text (18pt / 24px or 14pt / 18.5px bolded) and essential icons must have a color contrast ratio of 3:1.

• To find out color contrast ratio use google Chrome's DevTools color picker.

• Include an additional identifier, such as a pattern, text, or icon, alongside color in graphs, charts, and tables to enhance content understanding for all users.

• Create a dark theme with @prefers-color-scheme.

• Create a high contrast theme @prefers-contrast.

Animation and motion

Flashing and moving content

• Do not contain anything that flashesmore than three times in any one second period.

• Flashes below the general flash and red flash threshold.

Pause, stop, or hide movement

• Add a pause, stop, or hide mechanism in the page to allow users to turn off potentially problematic motion animation.

• Can do this on the screen level or element level.

Use media queries

• With the help of @prefers-reduced-motion media query checks the user's OS settings related to animation and design site that respects these preferences.

Typography

• The quickest way to create an accessible design is to choose a common typeface (such as Arial, Times New Roman, Calibri, Verdana, and many others).

• Avoid ornate or handwritten typefaces, as well as ones with only one character case available (for example, only uppercase characters).

• When you are looking for the typeface, pay particular attention to the following:

  • Use common fonts whenever possible.
  • Avoid using elaborate or handwritten fonts and those with only one character case.
  • Pick a typeface with unique characteristics—paying special attention to the uppercase I, lowercase l, and 1.
  • Review certain letter combinations to be sure they are not an exact mirror image of one another.
  • Check the kerning, especially between the r and n letter pair.

Font size and typographic styling

• Base font sizes should be defined with a relative value (%, rem, or em) to allow for resizing.

• Limit the number of typeface variations like color, bold, ALL CAPS, and italics to increase readability. Instead, use methods to emphasize words in your copy, such as asterisks, dashes, or highlighting an individual word.

• Use markup instead of text on images whenever possible. Screen readers cannot read embedded text on images (without extra code added), and embedded text can also become pixelated when magnified by low-vision users.

Structure and layout

• Critical elements should be distinct from one another, and similar elements should be grouped together.

Spacing

• Text blocks should be kept narrow to improve readability and help readers with disabilities follow the content more easily.

Content alignment

• Avoid justified text, as uneven spacing hinders readability, especially for people with disabilities. It can also distort word spacing, making word boundaries difficult to identify.

• Spacing and tools such as Good Line-Height and the Golden Ratio Calculator to help make the copy more accessible.

Best practices for structure and layout

• Use elements like headings, subheadings, lists, numbers, quote blocks, and other visual groupings to break the page into sections.

• Use clearly defined paragraphs, sentences, and word spacing.

• Build columns of copy that are smaller than 80 characters in width (40 characters for logograms).

• Avoid justified paragraph alignment, which creates "rivers of space" within the copy.