Color

• Any information conveyed by color MUST be accompanied by a programmatically-discernible text alternative.

• The text alternative for information conveyed by color MUST accurately convey the same information without color.

• Any information conveyed by color MUST be accompanied by a visible alternative (text, image, etc.) that does not depend on color for meaning.

• Color alone MUST NOT be used to distinguish links from surrounding text unless the color contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g. underline, outline, etc.) is provided when the link is hovered or receives focus.

• Color SHOULD NOT be used as the sole method of distinguishing UI components and/or their surrounding content, unless the color contrast between the UI components and/or surrounding content is at least 3:1.

• Visible text SHOULD be standard text in the markup (not images or graphic versions of text), to allow user customization of text color and contrast.

• Visible UI components SHOULD use native controls and features (not images or graphic versions of controls) where available, to allow user customization of interface color and contrast.

Contrast

• Small text (under 18 point regular font or 14 point bold font) MUST have a contrast ratio of at least 4.5 to 1 with the background.

• Small text (under 18 point regular font or 14 point bold font) SHOULD have a contrast ratio of at least 7 to 1 with the background.

• Large text and images of large text (at or over 18 point or 14 point bold) MUST have a contrast ratio of at least 3 to 1 with the background.

• The contrast of all small visual focus indicators (smaller than 3px by 3px) against the background SHOULD be at least 4.5 to 1.

• The contrast of all large visual focus indicators (at least 3px by 3px) against the background SHOULD be at least 3 to 1.

• The contrast of UI control boundaries compared to adjacent areas SHOULD be sufficient (3 to 1 for UI control boundaries measuring at least 3px by 3px, and 4.5 to 1 for all other UI controls) to distinguish the UI control from the adjacent areas.

• Web content MUST retain all essential visual information in Windows High Contrast Mode.

• The design MUST NOT override Windows High Contrast Mode.

Visual Layout & Reading/Focus Order

• Blocks of content SHOULD be visually separated and distinct from each other, via margins, padding, or other methods of achieving visual "white space."

• Labels SHOULD be visually adjacent to their controls.

• The layout SHOULD have only one main visual focus.

• The design SHOULD draw attention to the intended visual focus.

• The reading and navigation order (determined by code order in the DOM) MUST be logical and intuitive.

• The navigation order of focusable elements (links, form elements, etc.) MUST be logical and intuitive.

• tabindex of positive values SHOULD be avoided.

Typography

• Fonts SHOULD be easily readable by sighted users.

• Line spacing SHOULD be at least 1.5 within paragraphs.

• Paragraph spacing SHOULD be at least 1.5 times larger than the line spacing.

• The number of characters or glyphs per line in any section or column of text SHOULD NOT exceed 80 (40 characters in Chinese, Japanese, or Korean)

• Text SHOULD NOT be full justified.

• Fonts SHOULD be user-customizable.

CSS Generated & Hidden Content

• CSS-generated content SHOULD be avoided.

• A text alternative for informative CSS-generated content MUST be provided, AND the CSS-generated text SHOULD be set to aria-hidden="true".

• Decorative or redundant CSS-generated content SHOULD be set to aria-hidden="true".

• Visually hidden and inactive content MUST be hidden from screen reader users until that content is made visible and active for sighted users.