WCAG 2.1 Focus / Colour Test

The Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible. One of the most complicated is related to focus indication which span multiple criteria. The issue is further complicated by multiple ways to achieve success.

Below you will find success and failures for both links and a form field. Each path has the cumulative requirements and examples of success and failure. You can reference the following sections of WCAG 2.1 for more information:

• 1.4.1 - Use of Color
• 1.4.11 - Non-text Contrast
• 1.4.3 Contrast (Minimum)
• 2.4.7 Focus Visible

Links:

Path 1: Rely on Color and / or Secondary Indicator

Requirements:

• • Required: Foreground link text and background has to be 4.5:1 (1.4.3 Contrast Minimum)
  • Required: Focus indication of 3:1 between link and surrounding text (1.4.1 Use of Color)
  • Required: There is a visual confirmation on focus or hover (2.4.7 Focus Visible)
OR
• • Required: Foreground link text and background has to be 4.5:1 (1.4.3 Contrast Minimum)
  • Required: There is a continuously visible indicator such as an underline (1.4.11 Non-text Contrast)

Failures:

• • Link Text has no secondary interactivity indication - FAIL
  • Link Text fails basic color contrast standards - FAIL
  • Link Text fails 3:1 color contrast standard between link and surrounding text - FAIL

Success:

• • Link Text default is in the scope of 1.4.3 Contrast (Minimum), and the underline is sufficient to indicate the link. - PASS
  • Link Text is perceivable by 3:1 between text and object (link) and greater than 4.5:1 between background color and link text and there is an underline on hover / focus - PASS

Path 2: Rely on Color and Graphic as Secondary Indicator

Requirements:

• • Required: Foreground link text and background has to be 4.5:1 (1.4.3 Contrast Minimum)
  • Required: Having additional visual cue such as an icon (1.4.1 Use of Color - See WCAG21 Techniques G182)
  • Required: Having a text alternative for all non-text content (1.1.1 Non-text Content)

Success:

• • Link Text hyperlink has secondary interactivity indication - PASS

Path 3 - Rely on Color and Font Change as Secondary Indicator

Requirements:

• • Required: Foreground link text and background has to be 4.5:1 (1.4.3 Contrast Minimum)
  • Required: Adding an additional link indication (1.4.1 Use of Color - underline, bold, larger size text, font) that is always on - WCAG21 Techniques G182)

Success:

• • Link Text has additional link style, larger font, as link indication - PASS

Path 4 - Rely on Color and Additional Text as Secondary Indicator

Requirements:

• • Required: Foreground link text and background has to be 4.5:1 (1.4.3 Contrast Minimum)
  • Required: Having a text indication of information conveyed by color differences (WCAG21 Techniques G182)

Success:

• • Link Text (link) is indicated by text - PASS

Form Fields:

Requirements:

Rely on Border, Highlight and Required Indicator

• Required: Foreground text and background has to be 4.5:1 (1.4.3 Contrast Minimum)
• Required: Foreground field border/outline/focus indication color and background has to be 3:1 (1.4.11 Non-text Contrast)
• Required: Foreground field icon color and background has to be 3:1 (1.4.11 Non-text Contrast)
• Required: Having a text indication of information conveyed by color differences 4.5:1 (1.4.3 Contrast Minimum)

Failures:

• Name: Focus indicator (#ffc4ec) not 3:1 on background.
• Name:: The required icon (#cccccc) does not meet the 3:1 contrast for non-text content.
• Name: Border (#aaaaaa) does not meet the 3:1 requirements for non-text content.

Success:

• Name (required):
• Name required field: