Page URL
https://www.telekom.de/unterwegs/aktionen

Issues List

Page Notes and General Remarks
Non-text Content 1.1.1 (A)
Non-text content without purpose equivalent text alternative
Info and Relationships 1.3.1 (A)
Visual presentation of heading structure does not match code markup
Info and Relationships 1.3.1 (A)
Heading structure not appropriate
Info and Relationships 1.3.1 (A)
Improper use of semantic HTML list elements
Info and Relationships 1.3.1 (A)
Visually conveyed heading structure not programmatically determinable
Meaningful Sequence 1.3.2 (A)
Visual hierarchy does not match code markup
Use of Color 1.4.1 (A)
Buttons use color to differentiate states
Contrast (Minimum) 1.4.3 (AA)
Text content does not have enough color contrast
Resize text 1.4.4 (AA)
Text cannot be doubled in font-size
Images of Text 1.4.5 (AA)
Text is displayed on image instead of as text
Non-text Contrast 1.4.11 (AA)
Buttons do not have enough contrast to background
Text Spacing 1.4.12 (AA)
Changing text spacing lets parts of text spill out of their containers
Keyboard 2.1.1 (A)
Interactive element, operable by mouse, not accessible by keyboard
Keyboard 2.1.1 (A)
Footnote dialog window does not receive keyboard focus on open
Focus Order 2.4.3 (A)
Carousel navigation / pagination focused after content
Focus Order 2.4.3 (A)
User-activated dynamic content not in correct focus order
Headings and Labels 2.4.6 (AA)
SEO content headings do not describe content purpose
Focus Visible 2.4.7 (AA)
Focus on Tab ("Galaxy Highlights") not visible
Focus Not Obscured (Minimum) 2.4.11 (AA)
Activated footnote dialog windows obscure element focus
Target Size (Minimum) 2.5.8 (AA)
Interactive element does not meet minimum target size
Parsing 4.1.1 (A)
Multiple (nested) main landmarks found
Name, Role, Value 4.1.2 (A)
Interactive element does not use correct semantic HTML
Name, Role, Value 4.1.2 (A)
Section with generic role with ARIA label
Unrelated to Success Criteria / Best Practice
Links have title attribute set
Priority: Critical Significant Page: Aktionen Observation Permalink
Observation Details

Page was edited after initial audit. Some issue observations may refer to non-existing content. As the observed issues and the noted details still are relevant to future edits, they will remain in the issue list.

Priority: Moderate High Page: Aktionen Observation Permalink
Observation Details

Text elements use px values for font-size, making it impossible to resize text to 200%.

Remediation Notes

Text content must not use fixed px values for font sizes. Instead, use relative units (rem, em) to set font sizes.

Even better, evaluate the use of a responsive fluid type scale. More information about fluid type scales can be found at utopia.fyi.

Priority: Serious High Page: Aktionen Observation Permalink
Accompanying Files
Observation Details

Some text, when text spacing is changed, spills out of its parent containers, making some text hard, other text impossible to read.

Remediation Notes

Containers of any type (e.g. badges, teasers, stages) must not use fixed dimensions, if they contain text content.

Priority: Moderate Unknown Page: Aktionen Observation Permalink
Observation Details

When opening a footnote dialog window, the keyboard focus is not set to said dialog window. This leads to multiple issues:

  • The contents of the dialog window are not accessible via keyboard.

  • The dialog window can not be closed with the keyboard (easily or at all).

  • While the dialog window is open, keyboard navigation of the underlying page is still possible; the dialog window however blocks the view.

  • Since keyboard navigation stays possible, opening multiple dialog windows above each other also is possible.

Remediation Notes

Opening a dialog window with the keyboard must set the focus into the dialog window. Preferably onto the close button as the first interactive element in the dialog window. The focus must also be trapped inside the dialog window so the underlying page cannot be reached by keyboard while the dialog window is opened.

A better approach would be to use a <dialog> element for dialog windows.

Priority: Serious Low Page: Aktionen Observation Permalink
Accompanying Files
Priority: Moderate High Page: Aktionen Observation Permalink
Observation Details

Opening a footnote dialog window can obscure underlying focused elements (partially AND completely). Since the footnote dialog window cannot be closed via ESC in that situation, the underlying element cannot be made visible without removing the keyboard focus from it.

Remediation Notes

Footnotes must be made accessible. They must trap the keyboard focus when opened and must not allow scrolling of the page and focusing of underlying interactive elements. This will remediate the obscuring of focused elements.

Priority: Moderate Unknown Page: Aktionen Observation Permalink
Accompanying Files
Observation Details

Text "UNLIMITED" and "Galaxy S25 Ultra Galaxy AI" are built-in to image instead of being text content.

Remediation Notes

Use text elements to display text. Issues with non-equivalent text alternatives will be noted in 1.1.1 Non-text content.

Priority: Best Practice Low Page: Aktionen Observation Permalink
Accompanying Files
Observation Details

E.g. "Jetzt entdecken" Link in the "UNLIMITED" tile or "Mehr erfahren" links at the page bottom.

Remediation Notes

Links should usually not use the title attribute.

The title attribute would be useful for additional information to the link that at the same time are not important enough to have before following the link, making situations where it should be used incredibly rare.

Also, as long as a link has text content, the content will overwrite the title (description) in the accessibility tree, even making the title being ignored by assistive technology. (see screenshot)

Priority: Moderate Unknown Page: Aktionen Observation Permalink
Accompanying Files
Observation Details

Landmarks often are used to navigate the rough page structure. Using multiple (or nested) main landmarks can cause problems in finding the actual main content.

Remediation Notes

Ensure, only using one single main landmark per page. The main landmark should also be at the top level. No content should live outside of landmarks.

Priority: Moderate Low Page: Aktionen Observation Permalink
Observation Details

Section "Smartphone Highlights" uses aria-labelledby with a non-existing element ID smarphone-highlights-heading.

<section 
  id="smartphone-highlights" 
  class="SmartphoneHighlightsSmartphoneHighlights_3U6z0" 
  aria-labelledby="smarphone-highlights-heading"
>
Remediation Notes

If a section is supposed to be labelled by a heading, chances are the section element is not needed at all, since the heading serves the purpose of structuring this part of the content already.

However in the example above, this simply is a typo in the element ID. Ensure using the correct element ID smartphone-highlights-heading for the section to become role "region" instead of "generic" or remove its aria-labelledby attribute to solve this issue, since the heading already structures the content.

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

Visually, we find a heading structure in the upper page area as follows:

1 UNLIMITED
  2 Die neuen Samsung Galaxy Highlights

In code, we find the following heading structure:

1 Aktuelle Angebote & Aktionen
  2 Die neuen Samsung Galaxy Highlights

Content that is visually displayed as the main heading is no heading at all, and the main heading is significantly less visually prominent than the heading level 2.

Remediation Notes

Match visual display and code structure, styling headings accordingly or changing the heading structure / outline to match the desired display.

Priority: Serious Low Page: Aktionen Observation Permalink
Observation Details

Heading structure is as follows:

1 Aktuelle Angebote & Aktionen
  2 Die neuen Samsung Galaxy Highlights
  2 YoungAngebot
    3 MeinMagenta App
    3 Magenta Moments
    3 Handy­versicherung
  2 Entdecken Sie unsere Telekom-Aktionen

Nesting <h3> headings under "YoungAngebot" heading does not appropriately introduce the following contents.

Remediation Notes

Ensuring a fitting heading structure / outline is key to a baseline accessible website/page. Looking at the contents, using heading levels to group / nest, makes navigation through the page easy.

A possible structure could be, dividing the content into "new" or "limited" and "evergreen" offers.

1 Angebote & Aktionen
  2 <-- "Aktuelles"
    3 Die neuen Samsung Galaxy Highlights
    3 YoungAngebot
  2 <-- "Dauerbrenner"
    3 MeinMagenta App
    3 Magenta Moments
    3 Handy­versicherung
    3 Entdecken Sie unsere Telekom-Aktionen

Ensure, using the right heading levels and also displaying the headings appropriately (<h1> being the main heading, etc.)

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

The shown image has "UNLIMITED" as its accessible name and text alternative. The following significant parts of the image are missing in the text alternative:

  • Infinity symbol, symbol for "unlimited"

  • Smartphones / devices

  • "Galaxy S25 Ultra - Galaxy AI" wording

As the image is meant to be a Samsung Galaxy S25 Ultra offer teaser, the given text alternative "UNLIMITED" does not serve an equivalent purpose.

Assistive technology will announce "UNLIMITED" without any further context, possibly rendering the contents of the image completely inaccessible to blind or otherwise visually impaired screen reader users.

Remediation Notes

Ensure, the text alternative for the image serves an equivalent purpose to the image. Given the specific offer character of the image, the text alternative must include all offer details, conveyed by the image.

It is worth mentioning, that for sighted users as well, "UNLIMITED" might not be an appropriate heading or page introduction as well. Structuring the content for all users, introducing the "unlimited" offer first, will be helpful for all users. The "UNLIMITED" wording, without clicking through to other pages, is not resolved at all on the page.

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

Visual hierarchy of stage area presented as

  1. 30 Jahre

  2. Wir feiern mit tollen Angeboten und Aktionen

  3. Nur im Juni

Visual order is presented in code markup as

  1. Nur im Juni

  2. 30 Jahre Telekom

  3. Wir feiern mit tollen Angeboten und Aktionen

Visual hierarchy is more important for understanding than order in code markup. The order is used e.g. for announcements by assistive technology

Remediation Notes

Ensure content structure is presented accurately in code markup. Visual order can be manipulated, e.g. by using CSS

  • order: -1;

  • flex-direction: column-reverse;.

Priority: Critical Medium Page: Aktionen Observation Permalink
Observation Details

Anchor links in "Seiten-Sektionen Navigation" navigation use <button> instead of semantic link element.

The navigation code markup is structured as follows:

<nav aria-label="Seiten-Sektionen Navigation">
  <section aria-roledescription="carousel">
    <div>
      <div>
        <div>
          <div role="group" aria-roledescription=slide" aria-label="Slide X von 4"> <!-- nav item -->
            <div>
              <button 
                type="button" 
                title="Springe zur Sektion ..." 
                aria-label="Springe zur Sektion ..."
              >
                <span aria-hidden="true">
                  <img alt="..." />
                  <img alt="..." />
                  <!-- more images -->
                <span>
                  <span> <!-- visible label -->
                  <span>
                    <span aria-hidden="true">
                      <svg role="img" focusable="false"> <!-- caret icon -->
                  <span> <!-- duplicating visible label -->
...

Observations:

  • Navigation structure

    • Navigation label includes "Navigation"; each navigation is announced by assistive technology as "navigation" already, adding same wording to a navigation's label will duplicate announcement as "Seiten-Sektionen Navigation, navigation"

    • Section element used in uniquely identified navigation landmark without any sibling elements

    • Multiple levels of <div> elements

    • Navigation does not use semantic HTML list element to list navigation items

    • Navigation items are links but use HTML button element; button does not set correct focus, so clicking (by keyboard or assistive technology) will scroll the page but the focus remains on the triggering element

  • ARIA

    • aria-roledescription

      • does not add functionality

      • "carousel" and "slide" is not in main page language

    • Role "group" used for single interface object (as opposed to intended use to "identify a set of user interface objects", see MDN ARIA group role)

    • "Slide" labels "Slide X von 4" do not convey valuable information

  • Button

    • Attributes

      • <button type="button"> is redundant

      • uses title attribute

      • labeled by aria-label

      • title duplicated aria-label

    • Images

      • Hidden from assistive technology by use of aria-hidden="true"

    • Visible label

      • Includes aria-hidden="true" <span> element which then includes an SVG with role="img"

      • Duplicated by visually hidden text

      • Not at all used, because it is overwritten by aria-label on the button element


All interactive elements that do not use the correct interactive HTML elements must be built in a way, that semantic information is provided and updates to semantic information are accessible via assistive technology. Building interactive components with incorrect HTML elements results in inaccessible content. These accessibility issues might occur:

  • Interactivity of element is not announced → user will not know, that element is interactive

  • Changes to states (e.g. collapsed/expanded) is not announced → user will not know of the change

  • Target resource is not announced → e.g. user will not know, where a link leads to

  • Interactive action is not announced → e.g. user will not know, that a dialog window will be opened

Issues in 4.1.2 Name, Role, Value often occur together with other issues e.g. in 2.1.1 Keyboard and 2.4.7 Focus Visible.

Remediation Notes

Ensure proper functionality by using the correct semantic HTML elements. If used correctly, there is no need for added complexity via use of ARIA. Please refer to First Rule of ARIA Use. Please also refer to observation 1.3.1 Info and Relationships – "Semantic HTML" for general remarks about the use of semantic HTML.

A simplified navigation structure (side note: wordings are not taken into account) could be to

  • label navigation by existing text which provides explicit content for all users

  • use the semantic list element, removing necessity of labelling item count ("Slide X von 4")

  • use a single <a href="#XYZ"> element per navigation item, labelled by existing content and correctly linking and scrolling to wanted section

  • keep images visible for users of assistive technology and use purpose equivalent text alternatives to describe e.g. categories that can be found in the section; e.g. category "Mobilfunk" has "Smartphones" and "Smartwatches"

  • remove all duplicated content, like visually hidden text when visible label is the same, unnecessary hierarchy levels, adding element attributes to hidden elements, etc.

Example structure:

<nav aria-labelledby="nav-sections">
  <h2 id="nav-sections">Welche Angebote sind für Sie interessant?</h2>
  <p id="nav-anchor-intro" aria-hidden="true">Springe zu den Angeboten für</p>
  <ul>
    <li>
      <a 
        href="#section-mobilfunk" 
        id="nav-mobilfunk" 
        aria-labelledby="nav-anchor-intro nav-mobilfunk"
      >
        <span id="nav-mobilfunk-text">
          Mobilfunk <svg aria-hidden="true">...</svg>
        </span>
        <div id="nav-mobilfunk-img">
          <img alt="Smartphones" src="..." />
          <img alt="Smartwatches" src="..." />
        </div>
      </a>
    </li>

    <!-- more navigation items -->

  </ul>
</nav>
Priority: Critical Low Page: Aktionen Observation Permalink
Observation Details

Navigation links using button elements. Clicking navigation links will result in scrolling page to section but keeping focus on triggering element (button).

Interactive element can be operated by mouse but not by keyboard. The issue may occur when:

  • Semantic HTML elements are mis-used (e.g. <a> used as a button, or <button> used as a link)

Remediation Notes

Ensure, choosing the proper elements, depending on purpose (e.g. links, using <a href=""> to link to resources, and <button> to perform actions).

This way, the need for added JavaScript (e.g. on click events / event handlers) and ARIA methodologies is reduced to a minimum, which will ensure clean and simple code and backwards compatibility, will future-proof functionality, and will avoid issues with keyboard navigation or other assistive technology (see also 4.1.2 Name, Role, Value).

Priority: Moderate Low Page: Aktionen Observation Permalink
Observation Details

Given the visual main heading "30 Jahre Telekom.Wir feiern mit tollen Angeboten und Aktionen" and the main heading in code markup "Aktuelle Angebote & Aktuelles", headings

  • "Feiern Sie mit: 30 Jahre Telekom mit exklusiven Jubiläumsaktionen"

  • "Entdecken Sie unsere Telekom-Aktionen"

do not accurately describe content purpose and duplicating existing section content. Both headings would describe the whole page content and as such would be better suited as main heading.

Remediation Notes

Priority: Critical Low Page: Aktionen Observation Permalink
Observation Details

The visually presented heading structure of the page does not match the use of semantic HTML heading elements. The visually presented structure is as follows:

h1 30 Jahre (Telekom). Wir feiern mit tollen Angeboten und Aktionen
  h2 Unsere Top Deals
    h3 iPhone 16 128 GB
    h3 MagentaTV Smart für 0 €
    h3 240 € Wechselbonus
    h3 Kids Watch für 1 €
  h2 Unsere Smartphone-Highlights von Apple
    h3 Apple iPhone 16 128 GB
    h3 Apple iPhone 15 128 GB
    h3 Apple iPhone 16 Pro 128 GB
    h3 Apple iPhone 15 Pro Max 256 GB
  h2 Weitere Top Smartphones im Angebot
    ...
  h2 Unsere Mobilfunk-Deals zum Jubiläum
    ...
  h2 Unsere TV & Internet-Geburtstags-Angebote
    ...
  h2 Zubehör-Highlights von Apple
    ...
  h2 Unsere Magenta Moments
    h3 Exklusive Geschenke, Angebote und Gewinnspiele für unsere Kunden
    ...
  h2 Feiern Sie mit: 30 Jahre Telekom mit exklusiven Jubiläumsaktionen
  h2 Entdecken Sie unsere Telekom-Aktionen

The programmatically determinable heading structure, using HTML heading elements is as follows:

h1 Aktuelle Angebote & Aktionen
  h2 Unsere Top Deals
  h2 Unsere Smartphone-Highlights von Apple
  h2 Weitere Top Smartphones im Angebot
  h2 Unsere Mobilfunk-Deals zum Jubiläum
  h2 Unsere TV & Internet-Geburtstags-Angebote
  h2 Zubehör-Highlights von Apple
  h2 Unsere Magenta Moments
  h2 Feiern Sie mit: 30 Jahre Telekom mit exklusiven Jubiläumsaktionen
  h2 Entdecken Sie unsere Telekom-Aktionen

Observations for heading structure:

  • Visual main heading not used as heading at all

  • SEO headings

    • "Feiern Sie mit" repeats content (offers) from other sections

    • "Entdecken Sie unsere Telekom-Aktionen" introduces content that introduces the whole page

  • No headings are used for actual offers; as navigation by heading structure is used most by users of assistive technology, the individual offers will be more difficult to reach for certain user groups

Remediation Notes

Ensure, visually presented heading structure matches programmatically determinable heading structure by only using HTML heading elements for heading content and using HTML heading elements for all heading content.

Side note: This criterion does not specifically look at proper heading content (i.e. wordings, usefulness of headings). See 2.4.6 Headings and Labels for this.

Priority: Serious Low Page: Aktionen Observation Permalink
Observation Details

What is arguably list content, is not using semantic list elements. See

  • Deal / offer sections

When navigating list content, the use of semantic list elements will greatly increase user experience for users of assistive technology. The current structure does not allow, getting an overview of deals, number of offers, etc. By using semantic list elements, it is possible for users of assistive technology to navigate to a section, directly know the count of deals / offers (that sighted users can work out by visible cards and pagination buttons), and to navigate each of those deals individually.

Remediation Notes

Do use semantic list elements for all list content. An example structure for a deal section could be:

<div> <!-- no need for section element, as heading will label section already -->
  <h2>Unsere Smartphone-Highlights von Apple</h2>

  <ul>
    <li>
      <!-- IDs must be unique -->
      <article aria-labelledby="heading price statt" class="card">
        <h3 id="heading">Apple iPhone 16 128 GB</h3>
        <dl>
          <!-- terms could be visually hidden -->
          <div>
            <dt>Angebotspreis</dt>
            <dd id="price">1 €</dd>
          </div>
          <div>
            <dt>Alter Preis</dt>
            <dd id="statt">statt <s>449,95</s> €</dd>
            <dt>Ersparnis</dt>
            <dd id="ersparnis">448,95 €</dd>
          </div>
          <div>
            <dt>Tarif</dt>
            <dd id="tarif">im Tarif MagentaMobil L mit Smartphone</dd>
          </div>
          <div>
            <dt>Ankaufsbonus</dt>
            <dd id="ankauf">100 €</dd>
          </div>
          <div>
            <dt>Wechselbonus</dt>
            <dd id="wechsel">240 €</dd>
          </div>
        </dl>
        <p>
        <a aria-labelledby="cta heading price" id="cta" href="...">Zum Angebot</p>
      </article>
    </li>

    ...

  </ul>
</div>

A robust card structure allows for every styling option as well.

Priority: Serious Low Page: Aktionen Observation Permalink
Observation Details

The navigation and pagination buttons for offer carousels are focused after the carousel content, rendering them a lot less useful to users of keyboard navigation and assistive technology. While the focus order "content → navigation" is not per se a failure of this criterion, it arguably defies the navigation's purpose, to access it after the content.

See e.g.

The focus order in the carousel should be appropriate to the work task.

BFIT-Bund Handreichung "Accessible design of user interface elements – Carousel"

or, while not being the same use-case still can be applied here:

The rotation control button is the first element in the screen reader reading order.

ARIA Authoring Practices Guide (APG) "Auto-Rotating Image Carousel Example with Buttons for Slide Control"

Priority: Serious Medium Page: Aktionen Observation Permalink
Observation Details

Footnote trigger (star icon) does not meet minimum target size.


Interactive elements must have a target size of at least 24×24px. Minimum target size is required also for single icon buttons, stand-alone interactive icons and links. When target size is smaller, it will make it difficult for people to reliably interact with the elements. This includes people with motor disabilities, people using devices like styluses, people in moving vehicles, and mobile users altogether. Especially considering its use inside other interactive elements (e.g. footnote in badge) or multiple small interactive elements next to each other (e.g. social icons in a list).

Remediation Notes

Ensure, all interactive elements' target size is at least 24×24px.

While this does not necessarily mean, e.g. an icon itself must be 24×24px, the clickable area around it counts as the target size, if there is no overlapping interactive element in that area. Ideally, the element's visual boundaries adhere to the minimum target size of 24×24px itself.

Priority: Serious High Page: Aktionen Observation Permalink
Observation Details

When dynamically added content can be activated by the user, correct focus order must be ensured. This includes:

  • Opening a dialog window

  • Expanding an accordion item

  • Dynamically loading more content (e.g. more products in a product list) via "Load more" button

Adding and removing dynamic content must not remove focus from the triggering element. E.g. a footnote or info icon opening (adding) a dialog window. When the dialog window is closed (removed) again, focus must be on the triggering element.

Remediation Notes

Ensure, for all dynamically added content that can be activated by user,

  • focus cannot be set to focusable elements inside content, before content is being visually added (e.g. collapsed accordion items, or not yet opened dialog windows)

  • dynamic content should be placed directly below the triggering element in the DOM order

  • Opening e.g. a dialog window, will set the focus on the first focusable element inside the dialog window

  • Activating a "Load more" button must ensure, focus, after content is loaded, either

    • is set to the first focusable element of newly loaded content or

    • is set to the first preceding focusable element of newly loaded content.

Ensure, for all dynamically added and then removed content that can be activated by user,

  • keyboard focus

    • remains (e.g. collapsing/expanding accordion items) on the triggering element or

    • is set to (e.g. opening and closing a dialog window) the triggering element again.

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.

Priority: Critical Low Page: Aktionen Observation Permalink
Observation Details

Carousel pagination buttons rely on color difference to differentiate button states. Color contrast ratio between selected and unselected button is 2.9:1, thus not meeting minimum requirement of 3:1.

Remediation Notes

Different states of interactive elements like buttons should not solely rely on color difference. Ideally another visual indicator like border or shape is used in addition to change of color.

If no other indicator is used, the different colors must meet minimum contrast ratio of 3:1.

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

Text content must meet minimum color contrast ratio of 4.5:1 to its background. Large text (>24px) content must meet minimum color contrast ratio of 3:1 to its background. The following text content does not meet the required minimum contrast ratios:

  • Images of text: "iphone 16" in "Top Deals" section uses image of text. Text "Entwickelt für Apple Intelligence. Jetzt auf Deutsch verfügbar." does not meet minimum color contrast ratio

Remediation Notes

Ensure, all text content is clearly visible, using color contrast ratios of 4.5:1 and higher. For large text content a reduced contrast ratio of 3:1 is acceptable, but not recommended.

Especially color variants that barely meet color contrast ratio requirements for default background colors are subsceptible to fail minimum color contrast ratio, when used on non-default background colors. When a certain color barely meets color contrast ratio on default white background, ensure, this color variant is only used on said background color and provide a different foreground color variant for darker background colors.

Ideally, aim for enhanced contrast ratio 7:1 (see 1.4.6 Contrast (Enhanced) (Level AAA)), to often ensure passing minimum contrast ratio, even on non-default background colors.