WebAIM: Contrast and Color Accessibility – Understanding WCAG 2 Contrast and Color Requirements

Contrast and Color Accessibility
Understanding WCAG 2 Contrast and Color Requirements

Article Contents

  • Current page: Page 1: Understanding WCAG 2 Contrast and Color Requirements
  • Introduction
  • Defining Colors
  • WCAG 2 “Contrast Ratio”
  • 1.4.3 Contrast (Minimum)
  • 1.4.6 Contrast (Enhanced)
  • 1.4.11 Non-text Contrast
  • 1.4.1 Use of Color
  • Page 2: Evaluating Contrast and Color Use
  • Page 3: Evaluating Contrast with Chrome DevTools
  • Introduction

    Contrast and color use are vital to accessibility. Users, including users with visual disabilities, must be able to perceive content on the page. There is a great deal of fine print and complexity within the Web Content Accessibility Guidelines (WCAG) 2 that can easily confuse web content creators and web accessibility evaluators. This article pulls together the terms and principles needed to understand WCAG 2 requirements for contrast and color.

    Defining Colors

    Colors can be defined in a few ways. For example, this shade of blue may commonly be defined in three different ways in webpage styles:

    • rgb (97, 97, 255): The amount of red, green, and blue that form a color are each presented as a number between 0 and 255.
    • #6161FF: This is a "hexadecimal" format where the red/green/blue values are presented as a combination of six letters [...]

    Read article at webaim.org

    Article Taxonomies

    Categories: