• 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.
• 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.
• 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.