In this hands-on session, learn how contrast impacts everyone, especially many people with disabilities. We will decode the contrast requirements for text in the Web Content Accessibility Guidelines (WCAG) 2.0 as well as new requirements in WCAG 2.1 for images and user interface components. Participants will practice evaluating contrast using several free tools and resources including the Colour Contrast Analyser, WAVE, Colorzilla, and the Chrome Developer Tools.

Notes:

• The term “color contrast” does not appear in the WCAG guideline
  • “Relative luminance Contrast” is the correct term
  • 21:1 highest ratio (black/white)
• Images of text have the same requirements.
  • Can be more difficult to tell font size/background color
• Gradients? No longer requires that every pixel of the characters meets the contrast. Look at the general legibility.
• Outlines? Can treat outline the same as text color.
• Glow? Can treat the same as background color.
• Drop shadow? Depends…
• Logotypes? Exempt from requirement.
• 2.1 updates
  • 3:1 contrast for
    • User interface
      • Examples:
        • Checkbox borders
        • UI states (including focus, hover, etc…)
      • … except when determined by user agent (like text box boundary created by browser)
      • Be careful to also check the difference between states (hard to do with automated tools). Most important for keyboard focus.
        • Consider a queue other than color
    • Graphical objects
      • Including icons – unless they are not required to understand ( for instance: the icons also have text)
    • Link text – 4.5:1 with background,  3:1 contrast to non-link text.
      • Unless there are other queues (even location on page)
• Tools:
  • Colorzilla
  • Chrome dev tools (very cool)
  • Colour contrast analyzer (for offline content)
• “If everyone loses, you are not discriminating. You are just bad at your job.”