24 issues found for 1.4.11 Non-text Contrast

No remediation necessary, as the icon is not adamant to the content's understanding, if the icon is declared purely decorative by using a null alt attribute.

Icon could get an outline with sufficient (3:1) color contrast to improve legibility.

If the icon is declared purely decorative by using a null alt attribute or an empty <title> element, no remediation is necessary, as the icon is not adamant to the content's understanding.

As it does not and as such is accessible to screen readers, the icon must meet color contrast of 3:1.

Ideally, the colors would be described as text.

If this is not possible, ensure a minimum contrast ratio of 3:1. The easiest way to achieve this is by using a simple outline on the color variant circle:

.variantCircle {
  outline: .1px solid;
}

This way, the contrast ratio is not calculated to the background color but to the outline color.

Preferably another mechanism, additionally to color, is used to differentiate the option layers. See observation for 1.4.1 Use of Color for more information about this. Ideally, remediation of both criteria is done at the same time.

To remediate 1.4.11 on its own, ensure all used layer colors meet minimum contrast ratio of 3:1 to all other layer colors, and to the default background color(s). This is a lot harder to do, as the map base layer can even switch to satellite view which adds more background colors to it. Thus, remediating 1.4.11 Non-text Contrast and 1.4.1 Use of Color together is the preferred method.

Ensure color contrast minimum ratios are met for all states of interactive elements, so that a default and selected state is easily perceivable.

By marking decorative icons correctly as decorative, this issue can be remediated. See observation for 1.1.1 Non-text Content.

If the icons should remain marked non-decorative, ensure enough color contrast of the icon to the background color.

Ensure high enough color contrast of all interactive elements. In case of the color choice buttons, the possible remediation steps would be to

• choose background color to meet contrast ratio minimum, or

• use outline for buttons that does meet contrast ratio minimum

Side note: the buttons do have visible focus outlines when navigated to by keyboard. Ensure, when setting a button outline for the default un-focused and un-selected state, the color contrast ratio minimum is also met between un-focused and focused state, to not run into failure of 2.4.7 Focus Visible.

Ensure high enough color contrast of all interactive elements. In case of the video play buttons, the possible remediation could be to make the button non-transparent and add a different color outer outline. The so-called "oreo-outline" ensures visibility on both light and dark backgrounds:

outline: 1px solid white;
box-shadow: 0 0 0 3px black;
background-color: white;

Side note: the buttons do have visible focus outlines when navigated to by keyboard. Ensure, when setting a button outline for the default un-focused and un-selected state, the color contrast ratio minimum is also met between un-focused and focused state, to not run into failure of 2.4.7 Focus Visible.

Ensure high enough color contrast of all interactive elements. In case of the video play buttons, the possible remediation could be to make the button non-transparent and add a different color outer outline. The so-called "oreo-outline" ensures visibility on both light and dark backgrounds:

outline: 1px solid white;
box-shadow: 0 0 0 3px black;
background-color: white;

To make this work, the play button must be created, using an SVG icon inside the button. You can see an example for this in the video players on audit sample page "Kids Watch".

Ensure high enough color contrast of all interactive elements. In case of the video play buttons, the possible remediation could be to make the button non-transparent and add a different color outer outline. The so-called "oreo-outline" ensures visibility on both light and dark backgrounds:

outline: 1px solid white;
box-shadow: 0 0 0 3px black;
background-color: white;

To make this work, the play button must be created, using an SVG icon inside the button. You can see an example for this in the video players on audit sample page "Kids Watch".

Ideally, the colors would be described as text.

If this is not possible, ensure a minimum contrast ratio of 3:1. The easiest way to achieve this is by using a simple outline on the color variant circle:

.variantCircle {
  outline: .1px solid;
}

This way, the contrast ratio is not calculated to the background color but to the outline color.

Please note: Ensure, all color options meet required minimum contrast ratio. It is not recommended, trying remediation of single color options individually.

For interactive elements (non-text), ensure a color contrast ratio of at least 3:1 to its background.

For icons, not declared purely decorative, ensure a color contrast ratio of at least 3:1 to its background.

Ensure minimum color contrast ratio for all interactive elements is 3:1 or higher.

• The easiest way to achieving this is to provide a high enough contrast outline or border that meets contrast ratio minimum.

• Ideally the element's color itself would meet contrast ratio minimum.

Ensure minimum color contrast ratio for all interactive elements is 3:1 or higher.

• The easiest way to achieving this is to provide a high enough contrast outline or border that meets contrast ratio minimum.

• Ideally the element's color itself would meet contrast ratio minimum.

Ideally, the colors would be described as text.

If this is not possible, ensure a minimum contrast ratio of 3:1. The easiest way to achieve this is by using a simple outline on the color variant circle:

.variantCircle {
  outline: .1px solid;
}

This way, the contrast ratio is not calculated to the background color but to the outline color.

Ideally, the colors would be described as text.

If this is not possible, ensure a minimum contrast ratio of 3:1. The easiest way to achieve this is by using a simple outline on the color variant circle:

.variantCircle {
  outline: .1px solid;
}

This way, the contrast ratio is not calculated to the background color but to the outline color.

Ideally, the colors would be described as text.

If this is not possible, ensure a minimum contrast ratio of 3:1. The easiest way to achieve this is by using a simple outline on the color variant circle:

.variantCircle {
  outline: .1px solid;
}

This way, the contrast ratio is not calculated to the background color but to the outline color.

Ideally, the colors would be described as text.

If this is not possible, ensure a minimum contrast ratio of 3:1. The easiest way to achieve this is by using a simple outline on the color variant circle:

.variantCircle {
  outline: .1px solid;
}

This way, the contrast ratio is not calculated to the background color but to the outline color.

I marked this issue priority 4 – Minor, as the icon most likely was intended to be used decoratively, like the other icons.

By marking decorative icons correctly as decorative, this issue can be remediated. See observation for 1.1.1 Non-text Content.

If the icons should remain marked non-decorative, ensure enough color contrast of the icon to the background color.

Ensure high enough color contrast of all interactive elements. In case of the color choice buttons, the possible remediation steps would be to

• choose background color to meet contrast ratio minimum, or

• use outline for buttons that does meet contrast ratio minimum

Side note: the buttons do have visible focus outlines when navigated to by keyboard. Ensure, when setting a button outline for the default un-focused and un-selected state, the color contrast ratio minimum is also met between un-focused and focused state, to not run into failure of 2.4.7 Focus Visible.

Ensure high enough color contrast of all interactive elements. In case of the video play buttons, the possible remediation could be to make the button non-transparent and add a different color outer outline. The so-called "oreo-outline" ensures visibility on both light and dark backgrounds:

outline: 1px solid white;
box-shadow: 0 0 0 3px black;
background-color: white;

Side note: the buttons do have visible focus outlines when navigated to by keyboard. Ensure, when setting a button outline for the default un-focused and un-selected state, the color contrast ratio minimum is also met between un-focused and focused state, to not run into failure of 2.4.7 Focus Visible.

For icons, not declared purely decorative, ensure a color contrast ratio of at least 3:1 to its background.

If the icon is purely decorative and declared as such, e.g. by using a null alt attribute on HTML image element or properly hiding an HTML SVG element by setting aria-hidden="true", meeting a 3:1 color contrast ratio, while providing better user experience overall, is not a requirement.

Ideally the contrast ratio from button to background will meet color contrast ratio 3:1.

Another option is to outline the button and let the outline meet the color contrast ratio requirements instead. On light background colors, the button can simply take a outline: 1px solid black to meet required minimum contrast ratio. The ratio is then calculated from this outline to the background color instead of the muted gray button itself.

For icons, not declared purely decorative, ensure a color contrast ratio of at least 3:1 to its background. If the icon is purely decorative and declared as such, e.g. by using a null alt attribute on HTML image element or properly hiding an HTML SVG element by setting aria-hidden="true", meeting a 3:1 color contrast ratio, while providing better user experience overall, is not a requirement.

Ideally, the colors would be described as text.

If this is not possible, ensure a minimum contrast ratio of 3:1. The easiest way to achieve this is by using a simple outline on the color variant circle:

.variantCircle {
  outline: .1px solid;
}

This way, the contrast ratio is not calculated to the background color but to the outline color.

Please note: Ensure, all color options meet required minimum contrast ratio. It is not recommended, trying remediation of single color options individually.