Adding issue #10 User Interface Component Contrast

[goodwitch]

Adding the User Interface Component Contrast (Minimum) SC #10 (previously referred to as "interactive control contrast" plus one glossary term for immediate surrounding color(s).

Latest text:

User Interface Component Contrast (Minimum)

The visual presentation of

1. essential graphical objects for user interface component(s) or a border line thereof, and
2. the focus and selection indicator(s) of user interface component(s),

has a contrast ratio of at least 4.5:1 against the immediate surrounding color(s), except for the situations listed below:

1. Thicker: A contrast ratio of 3:1 is required where the minimum width and height are at least 3 CSS pixels, for either the graphical object or (one of) their border line(s).
2. Inactive: Disabled or otherwise inactive user interface components are exempt from this requirement. In all other states (including when the page is scrolled) the contrast requirement is applicable.

Suggested Priority Level

Level AA

Glossary Item

immediate surrounding color(s)

the color(s) adjacent to the entire length of the outer perimeter of the element

What Principle and Guideline the SC falls within.

Principle 1, Guideline 1.4

Description

The intent of this success criterion is to apply the contrast requirements to essential graphical objects related to user interface components in a similar way that it is applied to text in 1.4.3 Contrast (Minimum).

Essential

If essential non-text information is needed to understand the state and/or functionality of the user interface component then it must be perceivable for people with low vision or color blindness.

Thin and Thick

Graphical objects that are very thin are harder to perceive, therefore have a higher contrast requirement of 4.5:1. Graphical objects that are thicker or are solid shapes have a lower requirement of 3:1.

The size 3 CSS pixel for 'thick' was selected as it aligns with the large-text requirement of 1.4.3 Contrast (Minimum). See additional information about this concept at on how contrast and thickness were derived.

Sufficient Contrast Examples

For designers developing focus indicators, selection indicators and user interface components that need to be perceived clearly, the following are examples that have sufficient contrast.

@@examples for select, radio button, and checkbox to be added @@

Visual Focus Indicator Examples

Type	Contrast Required	Description	Examples
Visual Focus Indicator with 3 CSS pixel stroke	3 to 1	Visual focus indicator for a link that is a 3 CSS pixel blue outline around the link. The 3 CSS pixel blue outline does provide a sufficient contrast that is equal to 3 to 1. 3 CSS pixel blue visual focus indicator line (#6699cc) against the immediate surrounding color of white (#FFFFFF) has a contrast ratio of exactly 3 to 1.	See working examples at Accessible Visual Focus Indicators
Visual Focus Indicator with 1 CSS pixel stroke	4.5 to 1	Visual focus indicator for a link that is a 1 CSS pixel black outline around the link. The 1 CSS pixel black outline provides sufficient contrast greater than 4.5 to 1. 1 CSS pixel black visual focus indicator line (#000000) against the immediate surrounding color of white (#FFFFFF) has a contrast ratio of 21 to 1.	See working examples at Accessible Visual Focus Indicators

Selection Indicator Contrast Examples

Type	Contrast Required	Description	Examples
Thick Selection Indicator	3 to 1	Selected Tab is visually indicated with a tab background of black (#000000). The black (#000000) background on the selected tab provides a sufficient contrast that is greater than 3 to 1. The black (#000000) tab against the immediate surrounding color of light grey (#eeeeee) has a contrast ratio of 18.1 to 1. The selected tab's color of black (#000000) has a contrast of at least 3 to 1 with the color of the white (#FFFFFF) non-selected tabs The black tab background is larger that 3 CSS pixel wide and 3 CSS pixel high so it is considered "thick" and only has to meet a 3 to 1 color contrast ratio..	See working example at Accessible Contrast for Selection Indicators

Text Input Examples

Type	Contrast Required	Description	Examples
Text Input with 3 CSS pixel border stroke	3 to 1	Text Input with a 3 CSS pixel border. The 3 CSS pixel blue outline does provide a sufficient contrast that is equal to 3 to 1. 3 CSS pixel blue border line (#6699cc) against immediate surrounding color of white (#FFFFFF) has a contrast ratio of exactly 3 to 1.	See working example at Accessible Contrast for Text Input
Text Input with 3 CSS pixel border stroke on bottom only	3 to 1	Text Input with a 3 CSS pixel border on bottom. The 3 CSS pixel blue bottom border does provide a sufficient contrast that is equal to 3 to 1. 3 CSS pixel blue border line (#6699cc) against immediate surrounding color of white (#FFFFFF) has a contrast ratio of exactly 3 to 1.	See working example at Accessible Contrast for Text Input
Text Input with 1 CSS pixel stroke	4.5 to 1	Text Input with a 1 CSS pixel border. The 1 CSS pixel black outline provides sufficient contrast greater than 4.5 to 1. 1 CSS pixel black line (#000000) against immediate surrounding color of white (#FFFFFF) has a contrast ratio of 21 to 1.	See working example at Accessible Contrast for Text Input
Text Input with 1 CSS pixel border stroke on bottom only	4.5 to 1	Text Input with a 1 CSS pixel border on bottom. The 1 CSS pixel black bottom border does provide a sufficient contrast that is greater than 4.5 to 1. 1 CSS pixel black border line (#000000) against immediate surrounding color of white (#FFFFFF) has a contrast ratio of 21 to 1.	See working example at Accessible Contrast for Text Input
Text Input with no border	3 to 1	Text Input with no border. The white background of the text input does provide sufficient contrast that is equal to 3 to 1. While there is no border, the solid area of the white text input easily meets the minimum 3 css pixel by 3 css pixel requirement to qualify as thick. The white (#FFFFFF) text input against the immediate surrounding color of blue(#6699cc) has a contrast ratio of exactly 3 to 1.	See working example at Accessible Contrast for Text Input

Submit Button Examples

Type	Contrast Required	Description	Examples
Transparent Submit Button with 3 CSS pixel border	3 to 1	Transparent submit button with a 3 CSS pixel blue border. The 3 CSS pixel blue border does provide a sufficient contrast that is equal to 3 to 1. 3 CSS pixel blue border line (#6699cc) against immediate surrounding color of white (#FFFFFF) has a contrast ratio of exactly 3 to 1.	See working examples at Accessible Contrast for Submit Button
Light Grey Submit Button with 3 CSS pixel border	3 to 1	Light Grey (#EBEBEB) submit button with a 3 CSS pixel blue border. The 3 CSS pixel blue border does provide a sufficient contrast that is equal to 3 to 1. 3 CSS pixel blue border line (#6699CC) against immediate outer surrounding color of white (#FFFFFF) has a contrast ratio of exactly 3 to 1. The fact that the background of the submit button is a light grey (#EBEBEB) is irrelevant for testing the color contrast of the border line of the button, because this SC only requires the border line to contrast with the immediate outer color.	See working examples at Accessible Contrast for Submit Button
Transparent Submit Button with 1 CSS pixel border	4.5 to 1	Transparent submit button with a 1 CSS pixel black border. The 1 CSS pixel black border provides sufficient contrast greater than 4.5 to 1. 1 CSS pixel black border line (#000000) against immediate surrounding color of white (#FFFFFF) has a contrast ratio of 21 to 1.	See working examples at Accessible Contrast for Submit Button
Blue Submit Button with no border	3 to 1	Blue submit button with no border. The blue button provides sufficient contrast equal to 3 to 1. While there is no border, the solid area of the blue button easily meets the minimum 3 css pixel by 3 css pixel requirement to qualify as thick. The blue (#6699cc) text input against the immediate surrounding color of white (#FFFFFF) has a contrast ratio of exactly 3 to 1.	See working examples at Accessible Contrast for Submit Button

Recommended for Silver

Due to the different needs and preferences of low vision users, the contrast requirements for inactive user interface components (also known as disabled interactive elements) is recommended for inclusion in Silver. RECOMMEND adding an ARIA-status of "disabled" so automated testing tools can ignore. A solution to consider for Silver is to make it a preference to "enhance color contrast for Low Vision AND/OR add a symbol for "disabled interactive elements".'

disabled interactive element

an inactive user interface component that is visible but not currently usable. Example: A submit button at the bottom of a form that is visible but cannot be activated until all the required fields in the form are completed.

Disabled Submit Button Example for Silver

• A disabled submit button that has a closed lock on it indicating that this button is not active yet.

Benefits

The intent of this Success Criterion is to provide enough contrast for interactive user interface components, form field borders, focus and selection indicators so they can be perceived by people with moderately low vision (who do not use contrast-enhancing assistive technology).

People with low vision often have difficulty perceiving graphics that have insufficient contrast. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a relative luminance (lightness) difference of 4.5:1 or greater can make these items more distinguishable when the person does not see a full range of colors and does not use assistive technology.

When non-text content is larger, a color contrast of 3:1 or greater can be sufficient for perception by people with moderately low vision.

Examples

• A thin (under 3 CSS pixel width) border on form fields in a university admissions application have a 4.5:1 minimum contrast ratio.
• A thick (3 CSS pixel or wider) border on form fields in a university admission application has a 3:1 minimum contrast ratio.
• Focus indicators on all links in a Web site have a 4.5:1 minimum contrast ratio.

Testability

User Interface Component Border

For each user interface component or the essential border of each user interface component,

1. If there is an essential border defining the edge(s) of the user interface component and the width of the border line is greater than or equal to 3 CSS pixels.
   • Check that the border line has a contrast ratio of at least 3:1 against the immediate surrounding color.
2. else
   • Check that the edge of the user interface component OR the border line has a contrast ratio of at least 4.5:1 against the immediate surrounding color.

Expected Results

• #1 or #2 is true.

Focus Indicators

For each focus indicator:

1. If the visual presentation of the focus indicator has a (height consistently greater than or equal to 3 CSS pixels) AND a (width consistently greater than or equal to 3 CSS pixels)
   • Check that the visual presentation of the focus indicator has a contrast ratio of at least 3:1 against the immediate surrounding color(s).
2. else
   • Check that the visual presentation of the focus indicator has a contrast ratio of at least 4.5:1 against the immediate surrounding color(s).

Expected Results

• #1or #2 is true.

Selection Indicators

For each selection indicator:

1. If the visual presentation of the selection indicator has a (height consistently greater than or equal to 3 CSS pixels) AND a (width consistently greater than or equal to 3 CSS pixels)
   • Check that the visual presentation of the selection indicator has a contrast ratio of at least 3:1 against the immediate surrounding color(s).
   • Check that the color of the selection indicator has a contrast ratio of at least 3:1 against the color of the indicator when it is not selected.
2. else
   • Check that the visual presentation of the selection indicator has a contrast ratio of at least 4.5:1 against the immediate surrounding color(s).
   • Check that the color of the selection indicator has a contrast ratio of at least 4.5:1 against the color of the indicator when it is not selected.

Expected Results

• #1or #2 is true.

Testing with current browsers

Luminosity Brightness of Enabled/Disabled Form Controls using default browser styling

Techniques

Existing Relevant Techniques for 1.4.3

• G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text
• G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
• G145: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
• G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast
• G183: Using a contrast ratio of 4.5:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them

New Techniques

• Using sufficient contrast for images that convey information (Draft)
• Using sufficient contrast for borders (future link)
• Using sufficient contrast for links when they receive keyboard focus (future link)
• Using a double line with sufficient contrast for borders (future link)
• Using a focus indicator that works for all backgrounds (future link)

Related WCAG 2.0 Success Criteria and Techniques (2.4.7)

• 2.4.7 Focus Visible
  • F55: Failure of Success Criteria 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received
  • F78: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator
  • C15: Using CSS to change the presentation of a user interface component when it receives focus (CSS)
  • G195: Using an author-supplied, highly visible focus indicator
  • SCR31: Using script to change the background color or border of the element with focus (Scripting)

Related Information on LVTF wiki

[awkawk]

merged to FPWD_review