Barrierefreiheit: Deinen Text und deine Grafiken vorbereiten
3 Min. Lesezeit
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.
In diesem Artikel erfährst du mehr über folgende Themen:
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, Editor usw.).
Studio Editor
Wix Editor
ADI
- Wähle das entsprechende Element aus (Text, Streifenhintergrund, Container-Box usw.).
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen
. - Klicke auf Design
. - Klicke auf das Farbfeld, um die Farbauswahl zu öffnen.
- Fahre mit der Maus über die Farbe, um den Code 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 nutzen, um niedrige Farbkontraste auf deinen Website-Seiten zu finden und anzupassen. Der Wizard ist ein Tool, das deine Website auf mögliche Probleme mit der Barrierefreiheit überprüft und es dir ermöglicht, erweiterte Einstellungen zu aktivieren, um die Barrierefreiheit deiner Website weiter zu verbessern.
Was du wissen solltest:
Der Wizard ist nur im Wix Editor verfügbar.Du kannst hier für den Wizard für Barrierefreiheit im Studio Editor abstimmen
Um den Kontrast anzupassen:
- Wähle Einstellungen.
- Wähle Wizard für Barrierefreiheit.
- Wähle Meine Website durchsuchen.
- Wähle Karten mit dem Titel Farbkontrast.
- Verwende den Schieberegler, um die Text- und Hintergrundfarbe anzupassen.
- Wähle Änderungen übernehmen.
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.
War das hilfreich?
|