Kontrast prüfen
Contrast Checker
Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.
Prüft ein Paar aus Text- und Hintergrundfarbe sowohl gegen WCAG 2.2 als auch gegen APCA, simuliert die drei Dichromasien und kann eine ganze Palette als Matrix bewerten. Es zeigt beide Standards, weil sie bei realen Paaren uneins sind, und diese Uneinigkeit ist der nützliche Teil.
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
WCAG 2.2
4,54:1
- ERFÜLLTAA — 1.4.3 Kontrast (Minimum), normaler Textbraucht 4,5:1
- VERFEHLTAAA — 1.4.6 Kontrast (erhöht), normaler Textbraucht 7:1
- ERFÜLLT1.4.11 Nicht-Text — Symbole, Rahmen, Fokusringebraucht 3:1
Zählt als normaler Text. Groß beginnt bei 24px, bei Schriftstärke 700 schon bei 18,66px. Das ist der Standard, auf den sich das Barrierefreiheitsrecht derzeit bezieht — EN 301 549 und Section 508 verweisen beide auf WCAG, also ist das die Zahl, mit der eine Prüfung arbeitet.
APCA
Lc 71,6
Dunkler Text auf hellem Hintergrund. Das Vorzeichen ist die Polarität — anders als bei WCAG ändert das Vertauschen der beiden Farben die Antwort.
Erreicht Lc 60 — noch lesbar. In großer Größe lesbar, aber nicht für längeres Lesen in 16px.
16px bei Schriftstärke 400 reicht bei diesem Lc nicht.
| Stufe | bei 400 | bei 700 |
|---|---|---|
| Lc 90 | 14px | 12px |
| Lc 75 | 18px | 14px |
| Lc 60 | 24px | 18px |
| Lc 45 | 36px | 24px |
| Lc 30 | 48px | 36px |
Die beiden Standards widersprechen sich, und zwar absichtlich
Das Verhältnis von WCAG 2 ist eine Formel von 2008: ein Quotient relativer Leuchtdichten mit einem festen Streulichtterm, symmetrisch in seinen beiden Argumenten. APCA bildet die Wahrnehmungsantwort ab — es hängt von der Polarität ab, weil dunkler Text auf hellem Grund bei gleichem Leuchtdichteunterschied tatsächlich besser zu lesen ist als umgekehrt, und es nimmt Schriftgröße und Schriftstärke als Teil der Frage statt als nachträglich angeschraubte Extraregel.
Deshalb widersprechen sie sich bei echten Paaren, und der Widerspruch ist bei keinem von beiden ein Fehler. WCAG 2 lässt manche Kombinationen aus Mittelgrau auf Weiß durch, die wirklich schwer zu lesen sind, und lässt manche Dunkel-auf-Dunkel durchfallen, die in Ordnung sind. WCAG 2.2 ist das, worauf sich das Barrierefreiheitsrecht derzeit bezieht, also ist es das, was eine Prüfung heranzieht. APCA ist das bessere Modell dessen, was eine lesende Person erlebt. Nehmen Sie WCAG, um zu bestehen, und APCA, um unter den bestandenen Varianten zu wählen.
Dieses Paar ist eines davon: WCAG AA sagt bestanden, APCA sagt bei 16px/400 nicht ausreichend.
Farbsehen
Simuliert mit den Viénot–Brettel–Mollon-Projektionen, angewandt im linearen Licht. Wendet man sie auf gamma-kodierte Bytes an — die übliche Abkürzung —, wirkt ein Paar unterscheidbarer, als es ist, und das ist genau die Richtung, in die eine Barrierefreiheitsprüfung nicht falsch liegen darf.
Beispieltext
Protanopie (kein Rotzapfen, ~1 % der Männer) · 4,54:1
Beispieltext
Deuteranopie (kein Grünzapfen, ~1 % der Männer) · 4,54:1
Beispieltext
Tritanopie (kein Blauzapfen, ~0,01 %) · 4,54:1
Beispieltext
Achromatopsie (keine Farbe, ~0,003 %) · 4,54:1
So funktioniert es
Geben Sie die beiden Farben ein
Textfarbe und Hintergrund, in jeder Notation. Der Beispielabsatz über den Urteilen wird in ihnen gezeichnet, in der Größe und dem Gewicht, die Sie setzen.
Setzen Sie die tatsächliche Größe und das Gewicht
WCAG ändert seine Schwelle bei 24px, oder bei 18,66px mit Gewicht 700. APCA nimmt Größe und Gewicht als Teil der Frage und nicht als getrennte Regel. Keine der beiden Antworten bedeutet viel bei der falschen Größe.
Lesen Sie beide Urteile
WCAG, um ein Audit zu bestehen, APCA, um zwischen den Optionen zu entscheiden, die bestehen. Wenn sie uneins sind, sagt die Seite das ausdrücklich.
Prüfen Sie die ganze Palette auf einmal
Fügen Sie Ihre Farben ein, eine pro Zeile, und bekommen Sie eine N×N-Matrix. Sie ist N×N und kein Dreieck, weil APCA nicht symmetrisch ist – dieselben zwei Farben schneiden unterschiedlich ab, je nachdem, welche der Text ist.
Häufige Fragen
Welchem Standard sollte ich folgen?
WCAG 2.2, weil das Gesetz darauf verweist – EN 301 549 und Section 508 zeigen beide darauf, es ist also die Zahl, die ein Audit prüft. APCA ist das bessere Modell dessen, was ein Leser erlebt, verwenden Sie es also, um zwischen den Paaren zu wählen, die bereits bestehen.
Warum sind WCAG und APCA uneins?
Das Verhältnis von WCAG 2 ist eine Formel von 2008: relative Leuchtdichten mit einem festen Streulichtterm, symmetrisch in ihren Argumenten. APCA modelliert Wahrnehmung, ist polaritätsabhängig – dunkel auf hell liest sich tatsächlich besser als umgekehrt – und berücksichtigt Größe und Gewicht. WCAG lässt also manches Mittelgrau auf Weiß bestehen, das schwer zu lesen ist, und manches Dunkel auf Dunkel durchfallen, das in Ordnung ist.
Warum weicht die Farbsehschwäche-Simulation von anderen Werkzeugen ab?
Weil sie in linearem Licht angewendet wird. Die übliche Abkürzung ist, die Projektion auf gammakodierten Bytes laufen zu lassen, was Paare unterscheidbarer aussehen lässt, als sie sind – die falsche Richtung, in der eine Barrierefreiheitsprüfung falsch liegen kann.
Bedeutet bestandener Kontrast, dass der Text lesbar ist?
Es bedeutet, dass er eine messbare Hürde nimmt. Zeilenlänge, Zeilenhöhe, Laufweite, die Schrift selbst und ob der Text auf einem Foto sitzt, spielen alle eine Rolle, und keines davon steckt in einer der beiden Zahlen. Ein bestandenes 4.5:1 in einer dünnen 12px-Schrift ist immer noch harte Arbeit.
Eingabe aus
Farbpalette extrahieren
Palette Extractor
Zieht eine Palette aus N Farben aus einem Bild und exportiert sie als Hex, CSS-Variablen oder ASE-Farbfelder.
Durchschnitts- und Hauptfarbe
Average & Dominant Colour
Liefert eine repräsentative Farbe für ein Bild – Mittelwert, Median oder häufigste Farbe – als Farbwert.
Farbenblindheit-Simulator
Colour Blindness Simulator
Rendert ein Bild so, wie es bei Protanopie, Deuteranopie, Tritanopie oder in Graustufen gesehen würde.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
Farbenblindheit-Simulator
Colour Blindness Simulator
Rendert ein Bild so, wie es bei Protanopie, Deuteranopie, Tritanopie oder in Graustufen gesehen würde.
Farbabstufungen
Tint & Shade Scale
Erzeugt aus einer Farbe eine Helligkeitsskala von 50 bis 950 mit wahrnehmungsgleichen Schritten, fertig als Design-Tokens.
Dark-Mode-Palette
Dark Mode Palette
Baut aus einer Farbe eine Rampe von 50 bis 950 und spiegelt sie in eine dunkle, sodass jedes Token-Paar seinen Kontrast behält.
Palettengenerator
Palette Generator
Baut aus einer Grundfarbe eine harmonische Palette nach Komplementär-, Triaden- und Analogregeln.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.