+ {% include "../21/img/1.4.11-ntc-button-inactive.svg" %}
User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements. An inactive user interface component is visible but not currently operable. An example would be 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.
+ {% include "../21/img/1.4.11-ntc-button-inactive.svg" %}
User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements. An inactive user interface component is visible but not currently operable. An example would be 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.
+ {% include "../21/img/1.4.11-ntc-button-inactive.svg" %}
This success criterion 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 or placeholder text inside a text input is visible and there is no visual indication of the hit area then the success criterion is passed. If a button with text also has a colored border, since the border does not provide the only indication there is no contrast requirement beyond the text contrast (1.4.3 Contrast (Minimum)). 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.
- #949494) adjacent to white.#949494) adjacent to white.For user interface components 'adjacent colors' means the colors adjacent to the component. For example, if an input has a white internal background, dark border, and white external background the 'adjacent color' to the component would be the white external background.
- #767676) and white adjacent color outside the component#767676) and white adjacent color outside the componentIf components use several colors, any color which does not interfere with identifying the component can be ignored for the purpose of measuring contrast ratio. For example, a 3D drop-shadow on an input, or a dark border line between contrasting backgrounds is considered to be subsumed into the color closest in brightness (perceived luminance).
@@ -69,22 +71,25 @@The following example shows an input that has a light background on the inside and a dark background around it. The input also has a dark grey border which is considered to be subsumed into the dark background. The border does not interfere with identifying the component, so the contrast ratio is taken between the white background and dark blue background.
- #003366) is sufficient. There is also a border (silver) on the component that is not required to contrast with either.#003366) is sufficient. There is also a border (silver) on the component that is not required to contrast with either.For visual information required to identify a state, such as the check in a checkbox or the thumb of a slider, that part might be within the component so the adjacent color might be another part of the component.
- #E5E5E5), which has a contrast ratio of 5.6:1 with the purple box (#6221EA).#E5E5E5), which has a contrast ratio of 5.6:1 with the purple box (#6221EA).It is possible to use a flat design where the status indicator fills the component and does not contrast with the component, but does contrast with the colors adjacent to the component.
- #949494) circle. The second and third show the radio button selected and filled with a color that contrasts with the color adjacent to the component. The last example shows the state indicator contrasting with the component colors.#949494) circle. The second and third show the radio button selected and filled with a color that contrasts with the color adjacent to the component. The last example shows the state indicator contrasting with the component colors.Non-text information within controls that uses a change of hue alone to convey the value or state of an input, such as a 1-5 star indicator with a black outline for each star filled with either yellow (full) or white (empty) is likely to fail the Use of color criterion rather than this one.
- 
- #FFF000) to white contrast ratio of 1.2:1.
+ {% include "./img/1.4.11-ntc-star-examples-fail.svg" %}
+ #FFF000) to white contrast ratio of 1.2:1.
- #FFFF00) contrasts with the blue button background (#4189B9).
+ {% include "./img/1.4.11-ntc-focus-inner.svg" %}
+ #FFFF00) contrasts with the blue button background (#4189B9).
- #FFFF00) does not contrast with the white background (#FFF) which the component is on.
+ {% include "./img/1.4.11-ntc-focus-outer-yellow.svg" %}
+ #FFFF00) does not contrast with the white background (#FFF) which the component is on.
+ {% include "./img/1.4.11-ntc-focus-outer-green.svg" %}
#008000) does contrast with the white background (#FFF) which the component is on. It does not need to contrast with both the component background and the component, as visually the effect is that the button is noticeably larger, and it's not necessary for a user to be able to discern this extra border in isolation. Although this passes non-text contrast, it is not a good indicator unless it is very thick. There is a AAA criterion in WCAG 2.2 that addresses this aspect, Focus Appearance.
If an indicator is partly inside and partly outside the component, either part of the indicator could provide contrast.
+ {% include "./img/1.4.11-ntc-focus-inner-outer.svg" %}
#FFFF00) contrasts with the blue button background (#4189B9).
If the focus indicator changes the border of the component within the visible boundary it must contrast with the component. Typically an outline goes around (outside) the visible boundary of the component, in this case changing the border is just inside the visible edge of the component.
+ {% include "./img/1.4.11-ntc-focus-border.svg" %}
#4189B9) to green (#4B933A). This is within the component and does not contrast with the inside background of the component.
+ {% include "./img/1.4.11-ntc-focus-inner-border.svg" %}
#008000) does contrast with the black border, but does not contrast with the blue component background.
+ {% include "./img/1.4.11-ntc-focus-inner-white.svg" %}
Note that this success criterion does not directly compare the focused and unfocused states of a control - if the focus state relies on a change of color (e.g., changing only the background color of a button), this success criterion does not define any requirement for the difference in contrast between the two states.
+ {% include "./img/1.4.11-ntc-focus-background.svg" %}
The language of Non-text Contrast specifically calls out "visual information required to identify...states." When users talk about a hover state, they are normally referring to a visual effect that takes place when the pointer is positioned over a control. However, there are a number of HTML components (such as buttons, checkboxes, radio buttons, and selects) which do not by default display any additional visual effects when the user moves a pointer control over them. The pointer itself, via its location, is the indicator of whether the user is hovering on a component. Therefore, additional author-supplied visual treatments for hover are not "required to identify" the hover state. Those treatments can be considered supplemental and do not themselves need to contrast 3:1 against the background.
- +This is not to say that other hover effects are discouraged. For instance, some native components alter the shape of the pointer when it is hovering over a control; the pointer becomes an I-beam when it hovers over text inputs and text areas. There will be cases where some users may benefit from additional visual hover effects, such as bolding text or use of drop shadows. However, other users may find strong hover effects distracting. The key consideration for any hover effect is that it does not cause a component itself to lose sufficient contrast against adjacent colors, or cause the visual indicators for other states, such as focus or selection, to lose sufficient contrast.
#767676), that indicator must meet 3:1 contrast ratio.
- #767676), that indicator must meet 3:1 contrast ratio.
- #CCC) outline has an insufficient contrast of 1.6:1 against the white (#FFF) background, the cursor/caret which is displayed when the input receives focus does provide a sufficiently strong visual indication.
- #043464).
- #070CD5) has a good contrast with the external white background. Also, the round toggle within (#7AC2FF) contrasts with the internal background.
#6E747B).
#DEDEDE). The black border has a 15:1 contrast ratio with the grey background, so the checkbox continues to have good contrast. Note that the grey hover effect does not itself need to contrast 3:1 with the page background, since the pointer position is the primary indicator of the hover state.
#0D0F13) background. The link's custom underline (#B1262B) is the only way to identify the link. The red underline contrasts less than 3:1 with the background color.
#9D9D9D) has a contrast ratio of 2.7:1 with the white background, which is not sufficient for the visual information required to identify the checkbox.
#AAA) indicator has an insufficient ratio of 2.3:1 with the white (#FFF) adjacent background.
- User Interface Components that are not available for user interaction (e.g., a disabled control in HTML) are not required to meet contrast requirements. An inactive user interface component is visible but not currently operable. An example would be 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.
+ {% include "./img/1.4.11-ntc-button-inactive.svg" %}
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. Although it would be beneficial to some people to discern inactive controls, a one-size-fits-all solution has been very difficult to establish. A method of varying the presentation of disabled controls, such as adding an icon for disabled controls, based on user preferences is anticipated as an advancement in the future.
@@ -412,7 +411,7 @@
+
When text characters are used as symbols – used for their visual appearance, rather than expressing something in human language
– they fall under the definition of non-text content.
+ {% include "./img/1.4.11-ntc-buttons-text-symbols.svg" %}
X, often used for "Close" buttons, and a
>character, to act as a right-pointing arrow — they count as non-text characters/symbols. Their contrast ratio of just above 3:1 passes this success criterion.
There are many possible solutions to ensuring contrast, the example shows the use of borders. Other techniques are to use darker colors for the circle backgrounds, or to add text labels & values for each item.
