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
So verwenden Sie Farbwähler und -konverter
- 1
Eine Farbe wählen
Nutzen Sie die Farbfläche, oder tippen Sie direkt einen HEX- oder RGB-Wert.
- 2
Jedes Format kopieren
HEX, RGB, HSL, HSV und CMYK werden alle gleichzeitig angezeigt.
- 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.
Das könnte Sie auch interessieren
QR-Code-Generator
Erstellen Sie QR-Codes für Links, Text, WLAN und mehr
Farbpaletten-Extraktor
Extrahieren Sie die dominanten Farben eines Bildes
CSS-Formatierer
Stylesheets verschönern oder minifizieren
Barcode-Generator
Code-128-Barcodes als skalierbares SVG
Rechnungsgenerator
Erstellen und laden Sie eine professionelle Rechnung als PDF herunter
Passwort-Generator
Erstellen Sie starke zufällige Passwörter und Passphrasen
Lebenslauf-Generator
Erstellen Sie einen sauberen, ATS-freundlichen Lebenslauf und laden Sie ihn als PDF herunter
UUID-Generator
UUID v4 und v7 in großen Mengen generieren