Understanding 1.4.11 Non-Text Contrast (Level AA)

[nrhsinclair]

Post suggested revisions here.

[Sylduch-Conseil]

Following sentence sounds long and complicated to me. I am not sure to understand it very well, so I have no suggestions to improve it.
"If only the text (or icon) is visible and there is no visual indication of the hit area, then there is no contrast requirement beyond the text contrast (1.4.3 Contrast (Minimum)) or icon contrast covered by the Graphical Objects portion of this Success Criteria. Note that for people with cognitive disabilities it is recommended to delineate the boundary of controls to aid in the recognition of controls and therefore the completion of activities."

Moreover, success criteria should be corrected in success criterion as there is only one criterion.

[vmmiller]

+1 @Sylvie42 - I agree. The paragraph is quite complicated. I'll dare have a go to simplify it below but I am not sure that it helps.

Current:
This success criteria does not require that controls have a visual boundary indicating the hit area, but if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast. If text (or an icon) within a button is visible and there is no visual indication of the hit area, or the visual indication does not provide the only indication, then there is no contrast requirement beyond the text contrast (1.4.3 Contrast (Minimum)) or icon contrast covered by the Graphical Objects part of this Success Criteria. Note that for people with cognitive disabilities it is recommended to delineate the boundary of controls to aid in the recognition of controls and therefore the completion of activities.

Suggested change:
This success criteria does not require that controls have a visual boundary to indicate the "hit" or "link" area. However, if the visual indicator for the control is the only way to identify it, then that indicator must have sufficient contrast. If there is understandable text (or an icon) within a button and there is no visual indication of the "hit" or "link" boundary, or if the visual indication provides other additional information, then there is no contrast requirement beyond the text contrast (1.4.3 Contrast (Minimum)) or icon contrast covered by the Graphical Objects part of this Success Criteria. Note that for people with cognitive disabilities it is recommended to delineate the boundary of controls to aid in the recognition of controls and therefore the completion of activities.

[vmmiller]

Paragraph starting "The Use of Color ..."
Changed "needs to ensure" to "it is necessary to"

Current:
For example, a text link that only differs from adjacent text using color and there is no other visual indication that the text is linked (e.g. the link underline is removed) needs to ensure that the link color meets the 3:1 luminosity contrast ratio relative to the non-linked text color in order to meet the related Success Criteria 1.4.1.

Suggested change:
For example, a text link that only differs from adjacent text using color and there is no other visual indication that the text is linked (e.g. the link underline is removed), it is necessary to ensure that the link color meets the 3:1 luminosity contrast ratio relative to the non-linked text color in order to meet the related Success Criteria 1.4.1.

[vmmiller]

The following link is broken:

Link to 1.4.3 Contrast Minimum

• https://www.w3.org/WAI/WCAG21/Understanding/visual-audio-contrast-contrast

[vmmiller]

For consistency, maybe the following title could be changed to add "Examples":

Inactive User Interface Components Examples

[vmmiller]

Under the title "Inactive User Interface Components"

Current:

User Interface Components that are not available for user interaction (eg: a disabled control in HTML) are not required to meet contrast requirements in WCAG 2.1. An inactive user interface component is visible but not currently operable. 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.

Suggested change:
User Interface Components that are not available for user interaction, such as a disabled control in HTML, are not required to meet contrast requirements in WCAG 2.1. For example, a submit button at the bottom of a form is visible but not currently operable because it cannot be activated until all the required fields in the form are completed.

[vmmiller]

(Following on from above paragraph)

Current:
Inactive components, such as disabled controls in HTML, are not available for user interaction. The decision to exempt inactive controls from the contrast requirements was based on a number of considerations:

Suggested change is to eliminate the first sentence as it is already in the paragraph introducing this section.

Suggested change:
The decision to exempt inactive controls from the contrast requirements was based on a number of considerations:

[vmmiller]

Minor change. Bullet point "Variations in significance"

Current:
Two examples can illustrate.

Suggested change:
Two examples can illustrate this.

[vmmiller]

Paragraph before "Graphical Objects".

Current:
A one-size fits all solution has been very difficult to establish, a method of varying the presentation of disabled controls, or adding an icon for disabled controls, based on user preferences is anticipated as an advancement in future.

Suggested change:
A "one-size fits all solution" to include, for example, a method of varying the presentation of disabled controls or adding an icon for disabled controls based on user preferences has been very difficult to achieve. It is anticipated in the future.

[vmmiller]

Under "Notes",

• first bullet point: changed "contrast ration grater" to "contrast ratio greater"

Current:
The orange background and the white icon have a contrast ration grater than 3:1, which passes.

Suggested change:
The orange background and the white icon have a contrast ratio greater than 3:1, which passes.

[vmmiller]

Under "Gradients"

Editorial: remove the "s" from "principles"

Current:
The general principles is to identify

Change to:
The general principle is to identify

[vmmiller]

Under "Dynamic gradients"

Editorial: add "that"

Current:
In order for someone to discern the graphics exist at all,
Change to:
In order for someone to discern that the graphics exist at all,

[vmmiller]

Under "Infographics"

Current:
Infographics can mean any graphic conveying data, such as a chart or diagram. On the web it is often used to indicate a large graphic with lots of statements, pictures, charts or other ways of conveying data. In the context of graphics contrast, each item within such an infographic should be treated as a set of graphical objects, regardless of whether it is in one file or separate files.

Suggested change:
Infographics can mean any graphic conveying data, such as a chart or diagram. Infographics are often used to indicate a large graphic containing lots of statements, pictures, charts or other ways of conveying data. In the context of graphics contrast, each item within such an infographic should be treated as a set of graphical objects, regardless of whether it is in one file or separate files.

[a11ycob]

I have a lot of comments. As these documents are quite long (and occasionally excessively wordy) I think one of the goals should be to condense them as much as possible, while maintaining the integrity of the information.

Current:
"Low contrast controls are more difficult to perceive, and may be completely missed by people with a visual impairment. Similarly, if a graphic is needed to understand the content or functionality of the webpage then it should be perceivable by people with low vision or other impairments without the need for contrast-enhancing assistive technology."

Suggestion:
"Low contrast controls are more difficult to perceive and may be completely missed by people with a visual impairment. Similarly, if a graphical content is required to understand content or functionality, then it should be perceivable by people without the need for contrast-enhancing assistive technology."

[a11ycob]

Current:
Active User Interface Components

For active controls on the page, such as buttons and form fields, any visual information provided that is necessary for a user to identify that a control exists and how to operate it must have sufficient contrast with the adjacent background. Also, the visual effects which are implemented in order to indicate state, such as whether a component is selected or focused, must also ensure that the information used to identify the control in that state has a minimum 3:1 contrast ratio.

Suggestion:
Active User Interface Components

Visual information which identifies the purpose and usage of a control must also maintain sufficient contrast against its adjacent background. Visual effects which define control state, for example, selected or focused must also have a minimum contrast ratio of 3:1.

[a11ycob]

For this excerpt I wanted to experiment with bullets to chunk the core information from an information dense paragraph. Open to comments regarding efficacy of this approach.

Current:
This success criteria does not require that controls have a visual boundary indicating the hit area, but if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast. If text (or an icon) within a button is visible and there is no visual indication of the hit area, or the visual indication does not provide the only indication, then there is no contrast requirement beyond the text contrast (1.4.3 Contrast (Minimum)) or icon contrast covered by the Graphical Objects part of this Success Criteria. Note that for people with cognitive disabilities it is recommended to delineate the boundary of controls to aid in the recognition of controls and therefore the completion of activities.

The visual focus indicator for a component must have sufficient contrast against the adjacent background when the component is focused, except where the appearance of the component is determined by the user agent and not modified by the author.

Suggestion:
Regarding visual boundaries, this success criteria:
• does not require that controls have a visual boundary indicating hit area, unless it is the only way to identify the control;
• does not demand for additional contrast measures beyond current text contrast (1.4.3 Contrast Minimum) if text or iconography within a button is visible but provides no visual indication of the hit area, the visual indication does not provide the only indication;
• does recommend control boundaries to aid in the recognition of controls and therefore the completion of activities for those with cognitive disabilities.

When focused, the visual focus indicator for a component must have sufficient contrast against the adjacent background, except where the appearance of the component is determined by the user agent and not modified by the author.

[Amace41]

While I appreciate the information about why inactive UI components are exempt, the listing all of the considerations is quite a big section. I can't think of any other Understanding doc which lists this type of info or at least not so much of it. The document is already pretty lengthy with so much to cover.

[fstorr]

The term "active" is really confusing as it's a CSS pseudo class for styling an element that is active, that it is: it has been clicked by the user. Is there a reason WCAG can't adopt the HTML "interactive" definition, which covers links, buttons, inputs, etc.?

[fstorr]

I would like the term "boundary" clarified. According to the dictionary on my laptop, it's "a line that marks the limits of an area; a dividing line". Does this criterion define a boundary as a border around an object (e.g. a button with a 2px blue border) or does it also include the boundary of an element with a background color but no border. Doesn't that background color define the visual boundary? Grabbing two images from the success criterion, does the "focus" button have a boundary where the blue background color meets the white of the page?

If a boundary is just a border, then why is that? And, again, if it is just a border, then isn't that a loophole where people will simply remove the border from an element and add a very-subtle background color instead? Or am I missing something?

[charleshalldesign]

Please be aware of open issues in the /WCAG repo:
w3c/wcag#681
w3c/wcag#551

There are some redundant comments as well as some conflicting one.