🖋️
Web Accessibility Resources
  • Web Accessibility
  • Cheat Sheets
    • Structure and Semantics
      • Page Title
      • Language
      • Headings
      • Landmarks
      • Lists
      • Tables
      • Iframes
      • Markup Validity
      • Other Semantic Elements
    • Links & Navigation
      • Links
      • Site Navigation
      • Within-Page Navigation
      • Reading Order/Focus Order
    • Images & Visual Design
      • Images
      • Color & Contrast
      • Text Styles, Resize, Reflow, and Zoom
      • Visual Cues
      • Adaptive and Responsive Output
    • Multimedia, Animations, and Motion
      • Audio and Video
      • Animation, Motion, and Timed Content
    • User Input, Forms, and Dynamic Content
      • Device-Independent User Input
      • Form Input, Labels, and Instructions
      • Form Validation and Feedback
      • Dynamic Content (JavaScript, AJAX)
      • Custom Widgets (JavaScript, ARIA)
      • CAPTCHA
    • Keyboard Commands
  • Semantic Group Labels
Powered by GitBook
On this page

Was this helpful?

  1. Cheat Sheets
  2. Images & Visual Design

Color & Contrast

PreviousImagesNextText Styles, Resize, Reflow, and Zoom

Last updated 5 years ago

Was this helpful?

Topic

Technique

WCAG AA Requirement

Use of color

Use of color: Any information conveyed by color MUST be accompanied by a programmatically-discernible text alternative.

Required

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

Required

Color Contrast

Small Text 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.

Note: The contrast rule also applies to images of text, even though images of text are discouraged.

Required

Large Text Contrast: 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.

Note: The contrast rule also applies to images of text, even though images of text are discouraged.

Required

UI Component Contrast: The contrast of UI control boundaries compared to adjacent areas MUST be sufficient to distinguish the UI control from the adjacent areas.

Required (WCAG 2.1)

Visual Focus Indicator Contrast: The contrast of all visual focus indicators against the background MUST be at least 3 to 1.

Required (WCAG 2.1)

High Contrast Mode

Retain Visible Information: Web content SHOULD retain all essential visual information in Windows High Contrast Mode.

best practice

Don't Override: The design SHOULD NOT override Windows High Contrast Mode.

best practice

WCAG 1.4.1
WCAG 1.4.1
WCAG 1.4.3
WCAG 1.4.3
WCAG 1.4.11
WCAG 1.4.11