diff --git a/css/base.css b/css/base.css index be7d1dd2e0..089f292a34 100644 --- a/css/base.css +++ b/css/base.css @@ -203,9 +203,9 @@ margin: 1.2em 0; align-items: stretch; } -#site-header.minimal-header .minimal-header-name, -#site-header.minimal-header .minimal-header-subtitle, -#site-header.minimal-header .minimal-header-link +#site-header.minimal-header .minimal-header-name, +#site-header.minimal-header .minimal-header-subtitle, +#site-header.minimal-header .minimal-header-link { display: flex; flex-direction: column; @@ -411,7 +411,7 @@ font-size: 95%; .standalone-resource-about a, .standalone-resource-pager a, .standalone-resource-about span, -.standalone-resource-pager span +.standalone-resource-pager span { margin-left:.8em; margin-right:.8em; @@ -444,6 +444,11 @@ figure svg { border: 1px solid var(--line-grey); } +figure svg[role*="image"] { + display: block; + max-inline-size: 100%; +} + figcaption { font-weight: initial; border-bottom: initial; diff --git a/understanding/21/img/1.4.11-ntc-checkbox-purple.svg b/understanding/21/img/1.4.11-ntc-checkbox-purple.svg new file mode 100644 index 0000000000..c02aae8309 --- /dev/null +++ b/understanding/21/img/1.4.11-ntc-checkbox-purple.svg @@ -0,0 +1,6 @@ + + A purple box with a light grey check. + + + + diff --git a/understanding/21/img/1.4.11-ntc-focus-background.svg b/understanding/21/img/1.4.11-ntc-focus-background.svg new file mode 100644 index 0000000000..f07b8f20cf --- /dev/null +++ b/understanding/21/img/1.4.11-ntc-focus-background.svg @@ -0,0 +1,16 @@ + + Three blue buttons, the center button is a darker blue than the others. + + + + Example + + + + Example + + + + Example + + diff --git a/understanding/21/img/1.4.11-ntc-focus-border.svg b/understanding/21/img/1.4.11-ntc-focus-border.svg new file mode 100644 index 0000000000..3a9cb9cbd5 --- /dev/null +++ b/understanding/21/img/1.4.11-ntc-focus-border.svg @@ -0,0 +1,17 @@ + + Three blue buttons on a white background, the center button has a green border exactly on the outer boundary of the button. + + + + Example + + + + + Example + + + + Example + + diff --git a/understanding/21/img/1.4.11-ntc-focus-inner-border.svg b/understanding/21/img/1.4.11-ntc-focus-inner-border.svg new file mode 100644 index 0000000000..bb93e737a6 --- /dev/null +++ b/understanding/21/img/1.4.11-ntc-focus-inner-border.svg @@ -0,0 +1,20 @@ + + Three blue buttons with a black border on a white background, the center button has a green border inside, adjacent to the inner background and black border. + + + + + Example + + + + + Example + + + + + + Example + + diff --git a/understanding/21/img/1.4.11-ntc-focus-inner-outer.svg b/understanding/21/img/1.4.11-ntc-focus-inner-outer.svg new file mode 100644 index 0000000000..bad9972845 --- /dev/null +++ b/understanding/21/img/1.4.11-ntc-focus-inner-outer.svg @@ -0,0 +1,20 @@ + + Three blue buttons on a white background, the middle has the outline of a yellow rectangle that is partly inside the button’s boundary, and partly outside on the white background. + + + + + Example + + + + + Example + + + + + + Example + + diff --git a/understanding/21/img/1.4.11-ntc-focus-inner-white.svg b/understanding/21/img/1.4.11-ntc-focus-inner-white.svg new file mode 100644 index 0000000000..c57656f5df --- /dev/null +++ b/understanding/21/img/1.4.11-ntc-focus-inner-white.svg @@ -0,0 +1,20 @@ + + Three blue buttons with a black border on a white background, the center button has a white border inside, adjacent to the inner background and black border. + + + + + Example + + + + + Example + + + + + + Example + + diff --git a/understanding/21/img/1.4.11-ntc-focus-inner.svg b/understanding/21/img/1.4.11-ntc-focus-inner.svg new file mode 100644 index 0000000000..deea21237a --- /dev/null +++ b/understanding/21/img/1.4.11-ntc-focus-inner.svg @@ -0,0 +1,20 @@ + + Three blue buttons, the middle has a thick yellow outline well inside the border of the button. + + + + + Example + + + + + Example + + + + + + Example + + diff --git a/understanding/21/img/1.4.11-ntc-focus-outer-green.svg b/understanding/21/img/1.4.11-ntc-focus-outer-green.svg new file mode 100644 index 0000000000..8266993e66 --- /dev/null +++ b/understanding/21/img/1.4.11-ntc-focus-outer-green.svg @@ -0,0 +1,17 @@ + + Three blue buttons on a white background, the middle has a dark green outline outside of the button's non-focused boundary. + + + + Example + + + + + Example + + + + Example + + diff --git a/understanding/21/img/1.4.11-ntc-focus-outer-yellow.svg b/understanding/21/img/1.4.11-ntc-focus-outer-yellow.svg new file mode 100644 index 0000000000..d64c7a3dc4 --- /dev/null +++ b/understanding/21/img/1.4.11-ntc-focus-outer-yellow.svg @@ -0,0 +1,20 @@ + + Three blue buttons on a white background, the middle has a light yellow outline outside of the button’s non-focused boundary. + + + + + Example + + + + + Example + + + + + + Example + + diff --git a/understanding/21/img/1.4.11-ntc-minimal-button.svg b/understanding/21/img/1.4.11-ntc-minimal-button.svg new file mode 100644 index 0000000000..1ba6c50ac7 --- /dev/null +++ b/understanding/21/img/1.4.11-ntc-minimal-button.svg @@ -0,0 +1,11 @@ + + Two buttons, the first with no visual indicator except text saying 'button'. The second is the same but with an added grey border. + + + Button + + + + Button + + diff --git a/understanding/21/img/1.4.11-ntc-radio-custom.svg b/understanding/21/img/1.4.11-ntc-radio-custom.svg new file mode 100644 index 0000000000..6bc13cfc64 --- /dev/null +++ b/understanding/21/img/1.4.11-ntc-radio-custom.svg @@ -0,0 +1,21 @@ + + Four radio buttons, the first is a plain circle labelled 'Not selected'. The second shows the circle filled with a darker color than the border. The third is filled with the same color as the border. The fourth has an inner filled circle with a gap between it and the outer border. + + + + Not selected + + + + Selected + + + + Selected + + + + + Selected + + diff --git a/understanding/21/img/1.4.11-ntc-star-examples-fail.svg b/understanding/21/img/1.4.11-ntc-star-examples-fail.svg new file mode 100644 index 0000000000..69a2b3799b --- /dev/null +++ b/understanding/21/img/1.4.11-ntc-star-examples-fail.svg @@ -0,0 +1,11 @@ + + Two star ratings, the first uses 5 stars with a black outline and a yellow or white fill, where yellow indicates checked. The second uses only pale yellow stars on white. + + + + + + + + + diff --git a/understanding/21/img/1.4.11-ntc-star-examples-pass.svg b/understanding/21/img/1.4.11-ntc-star-examples-pass.svg new file mode 100644 index 0000000000..1d69b32bb9 --- /dev/null +++ b/understanding/21/img/1.4.11-ntc-star-examples-pass.svg @@ -0,0 +1,14 @@ + + Two star ratings, one uses a black outline (on white) with a black fill to indicate it is checked. The second has a yellow fill and a thicker dark border. + + + + + + + + + + + + diff --git a/understanding/21/img/1.4.11-ntc-text-input-background-border.svg b/understanding/21/img/1.4.11-ntc-text-input-background-border.svg new file mode 100644 index 0000000000..26e3550335 --- /dev/null +++ b/understanding/21/img/1.4.11-ntc-text-input-background-border.svg @@ -0,0 +1,9 @@ + + A text box with a dark background and light border, with a white background. + + + Name + + + + diff --git a/understanding/21/img/1.4.11-ntc-text-input-background.svg b/understanding/21/img/1.4.11-ntc-text-input-background.svg new file mode 100644 index 0000000000..e6873f7bd8 --- /dev/null +++ b/understanding/21/img/1.4.11-ntc-text-input-background.svg @@ -0,0 +1,8 @@ + + A label with a text input shown by a dark blue page background, and white box. + + + Name + + + diff --git a/understanding/21/img/1.4.11-ntc-text-input-default.svg b/understanding/21/img/1.4.11-ntc-text-input-default.svg new file mode 100644 index 0000000000..82ea0232c7 --- /dev/null +++ b/understanding/21/img/1.4.11-ntc-text-input-default.svg @@ -0,0 +1,8 @@ + + Standard text input with a label, white internal and external background with a dark border. + + + Name + + + diff --git a/understanding/21/img/1.4.11-ntc-text-input-focus.svg b/understanding/21/img/1.4.11-ntc-text-input-focus.svg new file mode 100644 index 0000000000..2bf292f478 --- /dev/null +++ b/understanding/21/img/1.4.11-ntc-text-input-focus.svg @@ -0,0 +1,10 @@ + + A label with a text input with a faint gray outline and a visible cursor/caret. + + + Name + + + + + diff --git a/understanding/21/img/1.4.11-ntc-text-input-minimal.svg b/understanding/21/img/1.4.11-ntc-text-input-minimal.svg new file mode 100644 index 0000000000..ee195aef83 --- /dev/null +++ b/understanding/21/img/1.4.11-ntc-text-input-minimal.svg @@ -0,0 +1,12 @@ + + A label with a text input shown by a bottom border and faint grey background. + + + Name + + + + + + + diff --git a/understanding/21/img/minimal-button.png b/understanding/21/img/minimal-button.png deleted file mode 100644 index c21c3d4470..0000000000 Binary files a/understanding/21/img/minimal-button.png and /dev/null differ diff --git a/understanding/21/img/ntc-focus-background.png b/understanding/21/img/ntc-focus-background.png deleted file mode 100644 index 32b480ebc2..0000000000 Binary files a/understanding/21/img/ntc-focus-background.png and /dev/null differ diff --git a/understanding/21/img/ntc-focus-border.png b/understanding/21/img/ntc-focus-border.png deleted file mode 100644 index dc374b654a..0000000000 Binary files a/understanding/21/img/ntc-focus-border.png and /dev/null differ diff --git a/understanding/21/img/ntc-focus-inner-border.png b/understanding/21/img/ntc-focus-inner-border.png deleted file mode 100644 index 5d564ffce7..0000000000 Binary files a/understanding/21/img/ntc-focus-inner-border.png and /dev/null differ diff --git a/understanding/21/img/ntc-focus-inner-outer.png b/understanding/21/img/ntc-focus-inner-outer.png deleted file mode 100644 index cfc69d0af8..0000000000 Binary files a/understanding/21/img/ntc-focus-inner-outer.png and /dev/null differ diff --git a/understanding/21/img/ntc-focus-inner-white.png b/understanding/21/img/ntc-focus-inner-white.png deleted file mode 100644 index 9ca6d0ed5b..0000000000 Binary files a/understanding/21/img/ntc-focus-inner-white.png and /dev/null differ diff --git a/understanding/21/img/ntc-focus-inner.png b/understanding/21/img/ntc-focus-inner.png deleted file mode 100644 index 8d633ded9d..0000000000 Binary files a/understanding/21/img/ntc-focus-inner.png and /dev/null differ diff --git a/understanding/21/img/ntc-focus-outer-green.png b/understanding/21/img/ntc-focus-outer-green.png deleted file mode 100644 index e6d64cdfe7..0000000000 Binary files a/understanding/21/img/ntc-focus-outer-green.png and /dev/null differ diff --git a/understanding/21/img/ntc-focus-outer-yellow.png b/understanding/21/img/ntc-focus-outer-yellow.png deleted file mode 100644 index b8266cac0f..0000000000 Binary files a/understanding/21/img/ntc-focus-outer-yellow.png and /dev/null differ diff --git a/understanding/21/img/text-input-background-border.png b/understanding/21/img/text-input-background-border.png deleted file mode 100644 index 45051d8478..0000000000 Binary files a/understanding/21/img/text-input-background-border.png and /dev/null differ diff --git a/understanding/21/img/text-input-background.png b/understanding/21/img/text-input-background.png deleted file mode 100644 index 8776771426..0000000000 Binary files a/understanding/21/img/text-input-background.png and /dev/null differ diff --git a/understanding/21/img/text-input-default.png b/understanding/21/img/text-input-default.png deleted file mode 100644 index 033604eeda..0000000000 Binary files a/understanding/21/img/text-input-default.png and /dev/null differ diff --git a/understanding/21/img/text-input-focus.png b/understanding/21/img/text-input-focus.png deleted file mode 100644 index 51e41fb881..0000000000 Binary files a/understanding/21/img/text-input-focus.png and /dev/null differ diff --git a/understanding/21/img/text-input-minimal.png b/understanding/21/img/text-input-minimal.png deleted file mode 100644 index 5fff64b394..0000000000 Binary files a/understanding/21/img/text-input-minimal.png and /dev/null differ diff --git a/understanding/21/non-text-contrast.html b/understanding/21/non-text-contrast.html index ab57416b16..1f08b68ac0 100644 --- a/understanding/21/non-text-contrast.html +++ b/understanding/21/non-text-contrast.html @@ -53,14 +53,14 @@

Boundaries

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.

- Two buttons, the first with no visual indicator except text saying 'button'. The second is the same but with an added grey border. -
Pass: A button without a visual boundary, and the same button with a focus indicator that is a defined visual boundary of grey (#949494) adjacent to white.
+ {% include "./img/1.4.11-ntc-minimal-button.svg" %} +
Pass: A button without a visual boundary, and the same button with a focus indicator that is a defined visual boundary of grey (#949494) adjacent to white.

Adjacent colors

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.

- Standard text input with a label, white internal and external background with a dark border. + {% include "./img/1.4.11-ntc-text-input-default.svg" %}
Pass: A standard text input with a grey border (#767676) and white adjacent color outside the component
@@ -69,21 +69,21 @@

Adjacent colors

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.

- A text box with a dark background and light border, with a white background. + {% include "./img/1.4.11-ntc-text-input-background-border.svg" %}
Pass: The contrast of the input background (white) and color adjacent to the control (dark blue #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.

- A purple box with a light grey check. + {% include "./img/1.4.11-ntc-checkbox-purple.svg" %}
Pass: A customized checkbox with light grey check (#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.

- Four radio buttons, the first is a plain circle labelled 'Not selected'. The second shows the circle filled with a darker color than the border. The third is filled with the same color as the border. The fourth has an inner filled circle with a gap between it and the outer border. + {% include "./img/1.4.11-ntc-radio-custom.svg" %}
Pass: The first radio button shows the default state with a grey (#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.
@@ -94,12 +94,12 @@

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.

- Two star ratings, one uses a black outline (on white) with a black fill to indicate it is checked. The second has a yellow fill and a thicker dark border. + {% include "./img/1.4.11-ntc-star-examples-pass.svg" %}
Pass: Two examples which pass this success criterion, using either a solid fill to indicate a checked-state that has contrast, or a thicker border as well as yellow fill.
- Two star ratings, the first uses 5 stars with a black outline and a yellow or white fill, where yellow indicates checked. The second uses only pale yellow stars on white. + {% include "./img/1.4.11-ntc-star-examples-fail.svg" %}
Fail: The first example fails the Use of color criterion due to relying on yellow and white hues. The second example fails the Non-text contrast criterion due to the yellow (#FFF000) to white contrast ratio of 1.2:1.
@@ -120,20 +120,20 @@
- Three blue buttons, the middle has a thick yellow outline well inside the border of the button. + {% include "./img/1.4.11-ntc-focus-inner.svg" %}
Pass: The internal yellow indicator (#FFFF00) contrasts with the blue button background (#4189B9).
- Three blue buttons on a white background, the middle has a light yellow outline outside of the button's non-focused boundary. + {% include "./img/1.4.11-ntc-focus-outer-yellow.svg" %}
Fail: The external yellow indicator (#FFFF00) does not contrast with the white background (#FFF) which the component is on.
- Three blue buttons on a white background, the middle has a dark green outline outside of the button's non-focused boundary. + {% include "./img/1.4.11-ntc-focus-outer-green.svg" %}
Pass: The external green indicator (#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.
@@ -142,7 +142,7 @@

If an indicator is partly inside and partly outside the component, either part of the indicator could provide contrast.

- Three blue buttons on a white background, the middle has the outline of a yellow rectangle that is partly inside the button's boundary, and partly outside on the white background. + {% include "./img/1.4.11-ntc-focus-inner-outer.svg" %}
Pass: The focus indicator is partially inside, partially outside the button. The internal part of the yellow indicator (#FFFF00) contrasts with the blue button background (#4189B9).
@@ -151,21 +151,21 @@

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.

- Three blue buttons on a white background, the center button has a green border exactly on the outer boundary of the button. + {% include "./img/1.4.11-ntc-focus-border.svg" %}
Fail: The border of the control changes from blue (#4189B9) to green (#4B933A). This is within the component and does not contrast with the inside background of the component.
- Three blue buttons with a black border on a white background, the center button has a green border inside, adjacent to the inner background and black border. + {% include "./img/1.4.11-ntc-focus-inner-border.svg" %}
Fail: An inner border of dark green (#008000) does contrast with the black border, but does not contrast with the blue component background.
- Three blue buttons with a black border on a white background, the center button has a white border inside, adjacent to the inner background and black border. + {% include "./img/1.4.11-ntc-focus-inner-white.svg" %}
Pass: An inner border of white contrasts with the black border and the blue component background.
@@ -174,7 +174,7 @@

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.

- Three blue buttons, the center button is a lighter blue than the others. + {% include "./img/1.4.11-ntc-focus-background.svg" %}
Not in scope: The change of background within the component is not in scope of non-text contrast. However, this would not pass Use of color.
@@ -183,7 +183,7 @@

Hover states

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.

@@ -219,28 +219,28 @@

User Interface Component Examples

Text input (minimal) Where a text-input has a visual indicator to show it is an input, such as a bottom border (#767676), that indicator must meet 3:1 contrast ratio. - A label with a text input shown by a bottom border and faint grey background. + {% include "./img/1.4.11-ntc-text-input-minimal.svg" %} Text input Where a text-input has an indicator such as a complete border (#767676), that indicator must meet 3:1 contrast ratio. - A label with a text input shown by a complete border. + {% include "./img/1.4.11-ntc-text-input-default.svg" %} Text input focus style A focus indicator is required. While in this case the additional gray (#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. - A label with a text input with a faint gray outline and a visible cursor/caret. + {% include "./img/1.4.11-ntc-text-input-focus.svg" %} - + Text input using background color Text inputs that have no border and are differentiated only by a background color must have a 3:1 contrast ratio to the adjacent background (#043464). - A label with a text input shown by a dark blue page background, and white box. + {% include "./img/1.4.11-ntc-text-input-background.svg" %} @@ -412,7 +412,7 @@

Dynamic Examples

- A pie chart with one slice highlighted and a box hovering next to it that shows the data and indicates the source in the key. + A pie chart with one slice highlighted and a box hovering next to it that shows the data and indicates the source in the key.
A dynamic chart where the current 'slice' is hovered or focused, which activates the associated text display of the values and highlights the series
@@ -450,7 +450,7 @@

Essential Exception

  • Logotypes and flags: The brand logo of an organization or product is the representation of that organization and therefore exempt. Flags may not be identifiable if the colors are changed to have sufficient contrast.
  • Sensory: There is no requirement to change pictures of real life scenes such as photos of people or scenery.
    • -
  • Representing other things: If you cannot represent the graphic in any other way, it is essential. Examples include: +
  • Representing other things: If you cannot represent the graphic in any other way, it is essential. Examples include:
    • Screenshots to demonstrate how a website appeared.
    • Diagrams of medical information that use the colors found in biology (example medical schematic from Wikipedia).
      • @@ -484,7 +484,7 @@

      Testing Principles

      - +
      @@ -539,7 +539,7 @@

      Infographics

      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.

      - +

      Resources