Barrierefreiheit: Deinen Text und deine Grafiken vorbereiten
8 min
In diesem Artikel
- Unsere Empfehlungen
- Farbcodes finden
- Farbkontrast anpassen
- Farbkontrast manuell überprüfen
Für Besucher mit Sehbehinderungen kann es schwierig sein, den Unterschied zwischen dem Vordergrund und dem Hintergrund der Seiten einer Website zu erkennen. Wir empfehlen daher, den Farbkontrast auf deiner Website zu überprüfen und bei Bedarf anzupassen.
Unsere Empfehlungen
Um die Barrierefreiheit für Besucher mit unterschiedlichen Sehanforderungen zu erhöhen, empfehlen wir Folgendes:
- Die Text- und Hintergrundfarbe des Kontrasts zu einem Verhältnis von 4.5:1 für normalen Text und 3:1 für großen Text ändern.
- Ein Kontrastverhältnis von mindestens 3:1 für Grafiken und Komponenten der Benutzeroberfläche (z. B. Eingabefelder, Platzhalter usw.).
- Level AAA erfordert ein höheres Kontrastverhältnis von mindestens 7:1 für normalen Text und 4.5:1 für großen Text.
Gut zu wissen:
Großer Text ist definiert als über 14 Punkte (ca. 18px) und fett oder 18 Punkte (ca. 24px).
Farbcodes finden
Du findest die Farbcodes in dem von dir verwendeten Website-Builder (Studio Editor oder Wix Editor).
Wix Editor
Studio Editor
- Wähle das entsprechende Element (Text, Streifenhintergrund, Container-Box usw.) und öffne die Farbauswahl.
- Fahre mit der Maus über eine der Farben, um den Farbcode zu sehen.
Farbkontraste testen
Es gibt zahlreiche Websites und Browser-Plugins wie Contrast Checker, das den Farbkontrast testet, indem es die Vordergrund- und Hintergrundfarben vergleicht (anhand der Farbcodes). Um den Farbkontrast für den Text über einem Hintergrundbild zu überprüfen, empfehlen wir dir den Colour Contrast Analyser zu verwenden, mit dem du die Hintergrundfarbe auswählen und testen kannst.
Farbkontrast anpassen
Du kannst den Wizard für Barrierefreiheit in deinem Editor verwenden, um niedrige Farbkontraste auf einer Website zu finden und anzupassen, egal ob du den Wix Editor oder den Studio Editor verwendest. Der Assistent überprüft deine Website auf mögliche Probleme mit der Barrierefreiheit und zeigt Möglichkeiten auf, die Barrierefreiheit der Website zu verbessern.
Bei den meisten Elementen kannst du Änderungen innerhalb des Wizards selbst vornehmen. Einige Elemente (z. B. App-Elemente) sind derzeit nicht vollständig in den Wizard integriert und müssen manuell überprüft oder angepasst werden.
Wix Editor
Studio Editor
- Öffne deinen Editor.
- Klicke oben im Editor auf Einstellungen.
- Wähle Wizard für Barrierefreiheit.
- Wähle Website durchsuchen.
- Klicke auf den Tab Gefundene Probleme.
- Wähle eine Seite aus der Liste aus.
- Klicke auf Farbkontrast verbessern.
- Wähle das entsprechende Element aus und passe es nach Bedarf an:
Kontrast im Assistenten anpassen
Kontrast manuell anpassen
.
Farbkontrast manuell überprüfen
Es kann Farbkontraste auf der Website geben, die der Wizard für Barrierefreiheit nicht erkennt. Wir empfehlen, den Inhalt deiner Website mit dem Contrast Checker von Wix manuell zu überprüfen und den Kontrast nach Bedarf anzupassen.
Du kannst den Contrast Checker in deinem Website-Builder (Wix Editor oder Studio Editor) installieren und verwenden. Wenn die Elemente den Anforderungen nicht entsprechen, kannst du auch neue Seitenverhältnisse mit der Auswahl testen.
Wix Editor
Studio Editor
Den Kontrast überprüfen:
- (Nur beim ersten Mal) Installiere die Erweiterung in deinem Editor.
- Klicke oben rechts im Editor auf Tools
. - Klicke auf Editor-Erweiterungen.
- Klicke auf Contrast Checker.
- Verwende die Farbfelder, um die Farbe des Elements und des Hintergrunds im Checker auszuwählen, oder füge die entsprechenden Farbcodes ein.
Um den Kontrast anzupassen:
- Passe die Vordergrund- und Hintergrundfarbe im Contrast Checker auf das empfohlene Seitenverhältnis an.
- Kopiere die Codes der Farben von unten rechts in der Auswahl.
- Wähle das entsprechende Element in deinem Editor aus.
- Öffne die Farbauswahl in den Designeinstellungen des Elements.
- Klicke neben Meine Farben auf Hinzufügen.
- Füge den kopierten Code in das Feld ein.
Tipp:
Wie du die Designeinstellungen öffnest, hängt vom Element ab. In der Regel findest du sie jedoch, indem du das Element auswählst und dann auf das Symbol für Design klickst 
.
.Hast du Diagramme oder Daten auf deiner Website?
Kontrastreiche Farben sind eine großartige Möglichkeit, Daten auf deiner Website anzuzeigen. Wir empfehlen jedoch auch die andere Indikatoren zu verwenden (z. B. Texturen und Muster), um zwischen den Informationen zu unterscheiden.
Nächster Schritt:
Gehe zurück zur Checkliste für Barrierefreiheit, um die Barrierefreiheit deiner Website weiter zu verbessern.