Barrierefreiheit: Deinen Text und deine Grafiken vorbereiten
4 min
In diesem Artikel
- Unsere Empfehlungen
- Farbcodes finden
- Farbkontrast anpassen
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.
Wix Editor
Studio Editor
- Öffne deinen Editor.
- Klicke oben im Editor auf 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.