Kontrast-Rechner (WCAG)

Kontrast-Rechner (WCAG): Barrierefreiheit für deine Farben

Gute Lesbarkeit ist kein Geschmack, sondern messbar. Die Web Content Accessibility Guidelines definieren ein Kontrastverhältnis zwischen Vorder- und Hintergrundfarbe, das Text zugänglich macht. Dieser Kontrast-Rechner berechnet das Verhältnis nach dem offiziellen sRGB-Luminanz-Verfahren und prüft deine Farbkombination sofort gegen die Stufen AA und AAA, jeweils für normalen und großen Text.

Die Richtwerte sind klar definiert: Für normalen Text muss das Kontrastverhältnis mindestens 4,5 zu 1 betragen, für großen Text ab 18 Punkt mindestens 3 zu 1. Die AAA-Stufe verlangt 7 zu 1 beziehungsweise 4,5 zu 1 für großen Text. So kannst du in Sekunden herausfinden, ob deine Farben die Anforderungen für Barrierefreiheit erfüllen.

So funktioniert es

Der Rechner wandelt beide Farben in relative Luminanz um, basierend auf dem offiziellen WCAG-sRGB-Verfahren. Die Formel lautet Kontrast = (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere und L2 die dunklere Luminanz ist. Beispiel: Weiß auf Schwarz ergibt (1,0 + 0,05) / (0 + 0,05) = 21 zu 1. Ein Hellgrau auf Weiß ergibt ein deutlich niedrigeres Verhältnis und kann die AA-Stufe verfehlen.

Was das Tool kann und was nicht

Der Rechner berechnet das Kontrastverhältnis zuverlässig und prüft gegen die WCAG-Stufen AA und AAA. Er erkennt, ob deine Farbkombination den Anforderungen genügt. Er kann jedoch nicht prüfen, ob die Schriftart selbst lesbar ist, ob die Schriftgröße ausreicht oder ob das Design in der Praxis wirklich barrierefrei ist. Das Kontrastverhältnis ist nur ein Teil der Barrierefreiheit.

Warum lokale Verarbeitung im Browser

Alle Berechnungen laufen vollständig in deinem Browser. Deine Farbwerte werden nicht an einen Server übertragen und nicht gespeichert. Das bedeutet volle Datenschutzkonformität: keine Konten, keine Registrierung, keine Datenübertragung. Du kannst beliebige Farbkombinationen testen und den Browser schließen, ohne eine Spur deiner Arbeit zu hinterlassen.

Kreative Einsatzmöglichkeiten

• Design-System-Aufbau: Stelle sicher, dass alle Farbkombinationen in deinem Design-System die WCAG-Anforderungen erfüllen.
• Barrierefreiheits-Audit: Prüfe bestehende Websites systematisch auf Kontrastprobleme und identifiziere Verbesserungspotenziale.
• Markenrichtlinien: Überprüfe, ob deine Markenfarben auch in kleineren Schriftgrößen lesbar bleiben.
• Portfolio-Präsentation: Stelle sicher, dass deine Arbeiten für alle Betrachter zugänglich sind, unabhängig von ihrer Sehfähigkeit.
• Lernen über Barrierefreiheit: Verstehe, wie das WCAG-Kontrastsystem funktioniert, indem du verschiedene Farbkombinationen testest.
• Lehrmaterial: Erstelle Beispiele für Workshops zur digitalen Inklusion und Zeige Kontrastprobleme anschaulich.

Ein kleiner Beitrag zum Klimaschutz

Jede Berechnung auf deinem Gerät vermeidet eine Serveranfrage im Internet. Ein Kontrastcheck verbraucht nur den Bruchteil der Energie, die für eine Datenübertragung nötig wäre. Die Internationale Energieagentur schätzt, dass Rechenzentren 2024 etwa 415 Terawattstunden verbrauchten, rund 1,5 Prozent des weltweiten Strombedarfs. Indem du lokale Werkzeuge nutzt, reduzierst du den Datenverkehr.

Häufige Fragen