Aktionen (1 issues)

Buttons do not have enough contrast to background

Alle Geräte (3 issues)

Product color options do not always have enough contrast
Rocket Icon in Product card badge has weak color contrast
Checkmark Icon in Sidebar has weak color contrast

Handyversicherung (1 issues)

Icon does not have enough color contrast

Kider Uhr GPS Oneshop (3 issues)

Watch band color button "Gleich ausprobieren" does not have strong enough color contrast
"Play" buttons for video pop-ups do not have strong enough color contrast
Icon not marked as decorative use weak color contrast

Kids-Watch (3 issues)

Watch band color buttons "Gleich ausprobieren" do not have strong enough color contrast
"Play" buttons for video pop-ups do not have strong enough color contrast
Icons not marked as decorative use weak color contrast

Magenta Tarife Young (1 issues)

Buttons do not have enough contrast to background

Mobile Router (1 issues)

Product color options do not always have enough contrast

Mobilfunk Netzausbau (1 issues)

Map layers' color difference not meeting minimum contrast

Roaming Optionen (1 issues)

Icon does not have enough color contrast

Senioren Smartwatch (1 issues)

"Play" buttons for video pop-ups do not have strong enough color contrast

Smartphones (1 issues)

Product color options do not always have enough contrast

Smartwatch mit Gesundheitsfunktionen (1 issues)

"Play" buttons for video pop-ups do not have strong enough color contrast

Smartwatches (1 issues)

Product color options do not always have enough contrast

Sport Megasport Option (1 issues)

Selection (Radio) "MagentaTV-Kunde" has weak contrast between selected and unselected state
Product color options do not always have enough contrast

Telefonieren SMS Ins Ausland (1 issues)

Pagination dot does not have enough color contrast

Vertragsverlängerung (2 issues)

Product color option does not have enough color contrast
Interactive element does not have enough color contrast
Priority: Best Practice Low Page: Alle Geräte Observation Permalink
Accompanying Files
Remediation Notes

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.

Accompanying Files
Observation Details

Rocket icon (white) on badge (green) has insufficient color contrast ratio of 2.9:1.

Remediation Notes

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.

Priority: Critical Low Page: Alle Geräte Observation Permalink
Accompanying Files
Observation Details

The display of a product's color options is not using high enough contrast.

As the information conveyed is necessary to understand the content, the color contrast ratio must be at least 3:1. Some color options barely reach color contrast ratio of 1.1:1.

Please note: The accompanying screenshot is showing one example product card. This observation spans multiple products. Ensure, all options meet required minimum contrast ratio.

Remediation Notes

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.

Priority: Critical Significant Page: Mobilfunk Netzausbau Observation Permalink
Accompanying Files
Observation Details

Options in map layers rely on color alone to be identified. Doing so, while not meeting contrast ratio minimum (3:1) is an accessibility issue.

Remediation Notes

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.

Accompanying Files
Observation Details

In section "Buchen Sie die ganze Welt des Sports bei MagentaTV", the radio button / selection "Ich bin MagentaTV-Kunde / Ich bin noch kein MagentaTV-Kunde" does not use high enough contrast between selected and unselected states. The color difference between selected (#D9D9D9) and unselected (#FFFFFF) is 1.4:1. The minimum required contrast is 3:1. Using this weak a contrast between states, makes it impossible for certain user groups to perceive the difference, thus making it impossible to know which option is selected.

Remediation Notes

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

Accompanying Files
Observation Details

Decorative icons in background in section "Neugierig auf eine andere Kinderuhr mit GPS und Telefonfunktion?" are not marked as decorative and as such can be navigated to via assistive technology like screen readers. While not marked decorative, color contrast minimum shall be met. Color contrast of icons is below minimum (1.2:1 < 3:1).

Remediation Notes

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.

Priority: Critical Low Page: Kids-Watch Observation Permalink
Accompanying Files
Observation Details

Colored circles are used as interactive elements to choose watch band color in the watch graphic. Colors green (#BAD937) and pink (#EE84A0) do not have high enough color contrast ratio against the white background (1.6:1 and 2.5:1 respectively). A color contrast minimum of 3:1 must be met for all interactive elements, including buttons.

Remediation Notes

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.

Priority: Critical Low Page: Kids-Watch Observation Permalink
Accompanying Files
Observation Details

The play buttons in video pop-up thumbnails are used as interactive elements to start the video playback. Their colors do not have high enough color contrast ratio against the colored background. A color contrast minimum of 3:1 must be met for all interactive elements, including buttons. The contrast ratio should be met for the whole interactive element as well.

Remediation Notes

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.

Accompanying Files
Observation Details

The play buttons in video pop-up thumbnails are used as interactive elements to start the video playback. Their colors do not have high enough color contrast ratio against the colored background. A color contrast minimum of 3:1 must be met for all interactive elements, including buttons. The contrast ratio should be met for the whole interactive element as well.

Remediation Notes

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".

Accompanying Files
Observation Details

The play buttons in video pop-up thumbnails are used as interactive elements to start the video playback. Their colors do not have high enough color contrast ratio against the colored background. A color contrast minimum of 3:1 must be met for all interactive elements, including buttons. The contrast ratio should be met for the whole interactive element as well.

Remediation Notes

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".

Observation Details

The display of a product's color options is not using high enough contrast.

As the information conveyed is necessary to understand the content, the color contrast ratio must be at least 3:1. Some color options barely reach color contrast ratio of 1.1:1.

Please note: This observation describes one example product with example color option(s). This observation spans multiple products.

Remediation Notes

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.

Observation Details

Interactive element –pagination button below product carousel– does not have high enough color contrast ratio to its background.

Remediation Notes

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

Accompanying Files
Observation Details

Icon does not have high enough color contrast ratio to its background.

  • Partnernetze dialog window → checkmark icons

Remediation Notes

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

Accompanying Files
Observation Details

Carousel navigation and pagination buttons do not meet minimum color contrast ratio (3:1):

  • Navigation arrows: 2:1

  • Pagination dots (grey): 1.5:1

(Navigation arrow disabled has 1.4:1 ratio, which is not a failure of this criterion if the button is disabled to all users properly)

Remediation Notes

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.

Priority: Critical Low Page: Aktionen Observation Permalink
Accompanying Files
Observation Details

Carousel pagination buttons do not meet minimum color contrast ratio (3:1):

  • Pagination dots (grey): 1.6:1

(Navigation arrow disabled has 2.4:1 ratio, which is not a failure of this criterion if the button is disabled to all users properly)

Remediation Notes

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.

Accompanying Files
Observation Details

The display of a product's color options is not using high enough contrast.

As the information conveyed is necessary to understand the content, the color contrast ratio must be at least 3:1. Some color options barely reach color contrast ratio of 1.1:1.

Remediation Notes

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.

Priority: Critical Low Page: Smartphones Observation Permalink
Accompanying Files
Observation Details

The display of a product's color options is not using high enough contrast.

As the information conveyed is necessary to understand the content, the color contrast ratio must be at least 3:1. Some color options barely reach color contrast ratio of 1.1:1.

Please note: The accompanying screenshot is showing one example product card. This observation spans multiple products. Ensure, all options meet required minimum contrast ratio.

Remediation Notes

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.

Priority: Critical Low Page: Smartwatches Observation Permalink
Accompanying Files
Observation Details

The display of a product's color options is not using high enough contrast.

As the information conveyed is necessary to understand the content, the color contrast ratio must be at least 3:1. Some color options barely reach color contrast ratio of 1.1:1.

Please note: The accompanying screenshot is showing one example product card. This observation spans multiple products. Ensure, all options meet required minimum contrast ratio.

Remediation Notes

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.

Priority: Critical Low Page: Tablets Observation Permalink
Accompanying Files
Observation Details

The display of a product's color options is not using high enough contrast.

As the information conveyed is necessary to understand the content, the color contrast ratio must be at least 3:1. Some color options barely reach color contrast ratio of 1.1:1.

Please note: The accompanying screenshot is showing one example product card. This observation spans multiple products. Ensure, all options meet required minimum contrast ratio.

Remediation Notes

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.

Accompanying Files
Observation Details

Decorative icon in background in section "Schulmodus bei der Kinderuhr mit GPS" is not marked as decorative and as such can be navigated to via assistive technology like screen readers. While not marked decorative, color contrast minimum shall be met. Color contrast of icons is below minimum (1.2:1 < 3:1).

Remediation Notes

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.

Accompanying Files
Observation Details

Colored circles are used as interactive elements to choose watch band color in the watch graphic. Color green (#9FBF54) does not have high enough color contrast ratio against the white background (2.1:1). A color contrast minimum of 3:1 must be met for all interactive elements, including buttons.

Remediation Notes

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.

Accompanying Files
Observation Details

The play buttons in video pop-up thumbnails are used as interactive elements to start the video playback. Their colors do not have high enough color contrast ratio against the colored background. A color contrast minimum of 3:1 must be met for all interactive elements, including buttons. The contrast ratio should be met for the whole interactive element as well.

Remediation Notes

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.

Accompanying Files
Observation Details

Icon does not have high enough color contrast ratio to its background.

  • Section "Unser nachhaltiger Smartphone-Kreislauf" cards' arrow icons, contrast ratio 1.4:1

Remediation Notes

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.

Accompanying Files
Observation Details

Carousel Pagination Dot does not have high enough color contrast ratio to its background.

Remediation Notes

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.