WCAG AAA: Empfehlung Priorität: Gering
Text erreicht nicht den erhöhten Kontrast (AAA)
Manche Texte erfüllen den Basis-Kontrast, aber nicht die strengere Stufe: 7:1 für normalen und 4.5:1 für großen Text. Das ist eine Empfehlung über WCAG AA hinaus, keine Pflichtanforderung.
Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.
Warum das für Ihre Kunden wichtig ist
Höherer Kontrast hilft Kundinnen und Kunden mit mittlerer Sehschwäche, älteren Menschen und allen, die das Smartphone in der Sonne lesen. Preise und Buttons werden für alle leichter lesbar, ein Fehlen ist aber kein Verstoß gegen die Stufe AA, auf die sich das Gesetz stützt.
Wen es betrifft
- Menschen mit Sehschwäche
- ältere Kundinnen und Kunden
- Menschen mit Farbsehschwäche
- Mobilnutzer bei hellem Licht
So beheben Sie es
Erhöhen Sie, wo praktikabel, den Kontrast auf 7:1 für normalen und 4.5:1 für großen Text (24px oder 18.66px fett), beginnend mit Fließtext, Preisen und Checkout. Machen Sie Textfarben in den Design-Tokens oder im CSS dunkler oder Hintergründe heller. Beheben Sie zuerst die Basis-Kontrastprobleme mit 4.5:1 (Regel color-contrast); diese Prüfung ist nur ein zusätzlicher Hinweis.
Bei Shopify
Meist durch das Farbschema des Themes bestimmt. Wählen Sie in den Farbeinstellungen des Theme-Editors dunklere Textfarben; sind Farben fest im Code hinterlegt, ändern Sie sie im CSS des Themes.
Bei Shoptet (CZ)
Meist durch das gewählte Template und seine Farbeinstellungen bestimmt. Wählen Sie in den Template-Einstellungen dunklere Textfarben oder fügen Sie eigenes CSS über die Optionen für eigenen Code in Shoptet hinzu.
Bei PrestaShop
Meist im CSS des Themes definiert. Überschreiben Sie die Farben in der eigenen CSS-Datei des Themes oder in einem Child-Theme; manche Themes bieten Farboptionen in ihrem Konfigurationsmodul.
Bei WooCommerce
Meist durch das aktive Theme oder den Page Builder festgelegt. Passen Sie die Farben im Customizer oder in den globalen Stilen an oder überschreiben Sie sie im CSS eines Child-Themes.
Standards
| Standard | Abschnitt |
|---|---|
| WCAG 2.2 | 1.4.6 (AAA) Contrast (Enhanced) |
| WCAG 2.1 | 1.4.6 (AAA) Contrast (Enhanced) |
| WCAG 2.0 | 1.4.6 (AAA) Contrast (Enhanced) |
Automatische Prüfung: axe-core-Regel color-contrast-enhanced.
dequeuniversity.com, github.com, www.w3.org
Ähnliche Prüfungen
-
Text erreicht nicht den erhöhten Kontrast (AAA)
WCAG 1.4.6 AAA
-
Links mit gleichem Text führen zu verschiedenen Zielen
WCAG 2.4.9 AAA
-
Die Seite lädt sich nach einer Wartezeit selbst neu, auch nach langer
WCAG 2.2.4 AAA