Farbkontrast für Veranstaltungsseiten prüfen
Datum, Anfahrt oder Ticket-Schaltfläche können schwer lesbar sein, wenn Vorder- und Hintergrund zu ähnlich sind. Der Rechner bestimmt den Kontrast zweier deckender Farben. Prüfe anschließend die veröffentlichte Seite: Ein bestandener Farbvergleich bestätigt nicht die Barrierefreiheit der ganzen Website.
Boletolibre-Redaktion
Veröffentlicht
Interaktiven Rechner verwenden
Interaktiven Kontrastrechner öffnen (Englisch)
Gib sechsstellige Hex-Werte für Vorder- und Hintergrund ein oder verwende die Farbauswahl. Das Werkzeug zeigt Verhältnis und Ergebnisse für normalen und großen Text, erhöhte Anforderungen sowie notwendige grafische Bedienelemente. Es bewertet den ungerundeten Wert, auch wenn nur zwei Dezimalstellen angezeigt werden. Prüfe die Farben von Datum, Preis, Hinweisen, Links und Fehlermeldungen.
Grenzwerte richtig lesen
WCAG 2.2 verlangt beim Mindestkontrast 4,5:1 für normalen und 3:1 für großen Text. Die erhöhte Stufe verlangt 7:1 beziehungsweise 4,5:1. Notwendige visuelle Informationen in Bedienelementen und Grafiken brauchen im Allgemeinen 3:1 gegenüber benachbarten Farben. Als groß gilt mindestens 18 Punkt normal oder 14 Punkt fett. Ein knapp zu niedriger Wert darf nicht aufgerundet werden.[1][2][3]
Den tatsächlichen Veranstaltungsweg prüfen
Kontrolliere Termin, Ort, Preis, Ticketauswahl, Formular, Fehler, Bestätigung und Hilfe auf der echten Seite in mobilen und großen Ansichten. Der Rechner berücksichtigt keine Fotos, Verläufe oder Transparenz; prüfe dort den am schlechtesten lesbaren Bereich. Auch Fokus-, Hover- und Fehlerzustände sind wichtig. Ein externer Bezahlvorgang braucht eine eigene Prüfung.[1][3]
Korrekturen dokumentieren
Halte URL, Zustand, Farben, Verhältnis, Kriterium, zuständige Person und erneute Prüfung fest. Ein gemeinsam genutzter Farbwert kann viele Seiten betreffen. Bei Veranstaltungen auf Boletolibre.com prüfe die sichtbaren Angaben und den Ticketweg aus Sicht der Besucher; Veranstalterseite und externer Checkout bleiben gesonderte Aufgaben.
Quellen und weiterführende Informationen
- Understanding SC 1.4.3 Contrast (Minimum)W3C WAI · Abgerufen
- Understanding SC 1.4.6 Contrast (Enhanced)W3C WAI · Abgerufen
- Understanding SC 1.4.11 Non-text ContrastW3C WAI · Abgerufen