Zum Hauptinhalt springen
Tooletto

Farbkontrast-Prüfer

Eine Voreinstellung von Farbwähler und -konverter

Prüfen Sie, ob eine Textfarbe auf ihrem Hintergrund gegen WCAG-2.1-Schwellen lesbar ist. Kontrast ist der häufigste Barrierefreiheitsfehler im Web, und auch der am einfachsten zu behebende — normalerweise durch leichtes Abdunkeln einer Farbe.

  • Dateien verlassen niemals Ihr Gerät
  • Kostenlos, keine Anmeldung
  • Keine Wasserzeichen
  • Funktioniert nach dem Laden auch offline
Loading tool…

So verwenden Sie Farbwähler und -konverter

  1. 1

    Eine Farbe wählen

    Nutzen Sie die Farbfläche, oder tippen Sie direkt einen HEX- oder RGB-Wert.

  2. 2

    Jedes Format kopieren

    HEX, RGB, HSL, HSV und CMYK werden alle gleichzeitig angezeigt.

  3. 3

    Kontrast prüfen

    Legen Sie einen Hintergrund fest, um zu sehen, ob der Text WCAG AA und AAA besteht.

Warum Kontrast der häufigste Barrierefreiheitsfehler im Web ist

Automatisierte Barrierefreiheitsprüfungen finden konsistent unzureichenden Farbkontrast als häufigste einzelne Verletzung auf gescannten Websites, vor allen anderen Barrierefreiheitsproblem-Kategorien zusammen — und anders als viele Barrierefreiheitsprobleme, die strukturelle oder semantische Markup-Änderungen zur Behebung brauchen, wird ein Kontrastfehler normalerweise durch leichtes Abdunkeln oder Aufhellen einer Farbe gelöst, ohne dass irgendeine Änderung an Struktur, Markup, oder Design der Seite überhaupt nötig ist. Diese Kombination — extrem häufig, aber vergleichsweise billig zu beheben, sobald identifiziert — ist genau, warum es sich lohnt, direkt vor der Veröffentlichung einen dedizierten Kontrastprüfer bei einer bestimmten Farbpaarung einzusetzen, statt sich darauf zu verlassen, dass ein vollständiges Barrierefreiheits-Audit es danach erkennt.

Die AA- und AAA-Schwellen, und welche wirklich gilt

WCAG definiert zwei Konformitätsstufen mit unterschiedlichen numerischen Schwellen, und welche gilt, hängt sowohl vom Niveau ab, zu dem sich ein Projekt verpflichtet hat, als auch von der Größe des spezifisch geprüften Textes. Das AA-Niveau — das Niveau, auf das sich die meisten rechtlichen Barrierefreiheitsanforderungen und Organisationsrichtlinien beziehen — verlangt ein Verhältnis von 4,5:1 für normal großen Text, entspannt sich aber auf 3:1 für großen Text, definiert als 18pt oder 14pt fett und größer, da größere Glyphen bei geringerem Kontrast lesbar bleiben als kleine. Das AAA-Niveau, ein strengerer Standard, erhöht diese gleichen Schwellen auf 7:1 bzw. 4,5:1. Die meisten Projekte zielen auf AA als praktische Basislinie; AAA ist Inhalten vorbehalten, die speziell auf Nutzer mit deutlicherer Sehschwäche zielen, wo die strengere Schwelle die zusätzliche Designeinschränkung wert ist, die sie auferlegt.

Häufig gestellte Fragen

Was ist der Unterschied zwischen HEX, RGB und HSL?

HEX und RGB beschreiben dasselbe in unterschiedlicher Notation — wie viel Rot, Grün und Blau zu mischen. HSL formuliert es als Farbton, Sättigung und Helligkeit um, was viel einfacher zu durchdenken ist: Um eine Farbe aufzuhellen, ändern Sie eine Zahl statt drei zu erraten.

Was bedeutet das Kontrastverhältnis?

Es vergleicht die relative Leuchtdichte zweier Farben auf einer Skala von 1 (identisch) bis 21 (schwarz auf weiß). WCAG verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text auf AA-Niveau, steigend auf 7:1 und 4,5:1 bei AAA.

Warum scheitert meine Farbe am Kontrast, obwohl sie mir gut aussieht?

Weil das Verhältnis aus der relativen Leuchtdichte berechnet wird, nicht daraus, wie unterschiedlich zwei Farben aussehen. Zwei lebendige Farben ähnlicher Helligkeit — Orange auf Rot, sagen wir — sehen unterschiedlich aus, tragen aber fast keinen Leuchtdichte-Kontrast, und werden für jeden mit Sehschwäche oder auf einem Bildschirm in der Sonne unlesbar.

Ist die CMYK-Konvertierung für den Druck präzise?

Es ist die arithmetische Standardkonvertierung, ein Ausgangspunkt statt eines farbverwalteten Ergebnisses. Echte Druckarbeit braucht ein ICC-Profil für die spezifische Druckmaschine und das Papier, weil CMYK viele leuchtende RGB-Farben überhaupt nicht reproduzieren kann.