PRAKTISCHE RATGEBER · Web und Codes
Textkontrast prüfen, ohne einen Grenzwert schönzurunden
Zwei unterschiedliche Farben können schwer lesbaren Text ergeben. Messen Sie das tatsächliche Paar und prüfen Sie Textgröße, Hintergrund und Zustände der Oberfläche.
1. Die tatsächlichen Farben ermitteln
Bestimmen Sie Textfarbe und unmittelbaren Hintergrund. Eine allgemeine Palette reicht nicht, wenn derselbe Text auf mehreren Oberflächen erscheint.
Das Werkzeug vergleicht zwei deckende Hexfarben. Es untersucht keine ganze Seite und rekonstruiert keine Transparenzen, Hintergrundbilder oder Verläufe.
2. Das passende Textkriterium wählen
WCAG AA fordert mindestens 4,5:1 für normalen und 3:1 für großen Text. Die Kategorie richtet sich nach definierter Größe und Stärke, nicht danach, ob der Text eine Überschrift ist.
Für lateinische Schrift bedeutet groß mindestens 18 Punkt normal oder 14 Punkt fett, mit Entsprechungen für andere Schriften. Prüfen Sie im Zweifel die strengere Anforderung.
Kontrast-Checker für WCAG3. Verhältnis und Urteil zusammen lesen
Geben Sie beide Farben ein und beachten Sie das Urteil der passenden Kategorie. Zwei angezeigte Dezimalstellen können einen Unterschied nahe dem Grenzwert verdecken.
Runden Sie einen unzureichenden Wert nicht nach oben. Das Werkzeug prüft vor der Anzeigerundung; lesen Sie deshalb das Urteil zusätzlich zur Zahl.
DIESEN SCHRITT AUSPROBIEREN
Kontrast-Checker für WCAG
Nutzen Sie hier den vollständigen Rechner: Laden Sie die Beispielwerte, ändern Sie jeweils eine Eingabe und vergleichen Sie das Ergebnis mit den Schritten im Ratgeber.
Ein nachvollziehbares Beispiel
Laden Sie #777777 auf #FFFFFF: etwa 4,48:1, nicht ausreichend für AA bei normalem Text. Ändern Sie nur die Textfarbe zu #767676: etwa 4,54:1, ausreichend für diese Grenze. Das Urteil beruht auf dem ungerundeten Verhältnis.
Ergebnis
Ihr Ergebnis erscheint hier.
4. Beispiel: zwei benachbarte Grautöne
Auf Weiß ergibt #777777 ungefähr 4,48:1 und besteht AA für normalen Text nicht. #767676 ergibt etwa 4,54:1 und erfüllt diese Schwelle. Der sichtbare Unterschied ist klein, die Bedingung exakt.
Zwei Grautöne auf demselben Weiß
- Ausgangsdaten
- Hintergrund #FFFFFF; Text #777777 oder #767676
- Ergebnis
- Etwa 4,48:1: AA normal nicht erfüllt. Etwa 4,54:1: erfüllt.
Die Farbfelder sind Beispiele. Beschriftungen nennen Farben, Verhältnisse und Ergebnisse, damit das Verständnis nicht allein vom Aussehen abhängt.
-
#777777 auf #FFFFFF
Etwa 4,48:1 – unter AA für normalen Text.
-
#767676 auf #FFFFFF
Etwa 4,54:1 – diese Schwelle erfüllt.
5. Designs und Zustände getrennt prüfen
Prüfen Sie Fließtext, Links, Nebeninformationen und Schaltflächen auf ihren echten Hintergründen. Wiederholen Sie das für dunkles Design und relevante Zustände; Farben einfach umzukehren reicht nicht immer.
Bei wechselnden Hintergründen zählen die tatsächlichen Kombinationen einschließlich der ungünstigsten. Eine einzige Bildprobe steht nicht für die ganze Fläche.
| Kriterium | Mindestverhältnis |
|---|---|
| AA normal | 4,5:1 |
| AA groß | 3:1 |
| AAA normal | 7:1 |
6. Lesbarkeit über den Quotienten hinaus bewerten
Ein ausreichender Quotient beweist keine vollständige Barrierefreiheit. Größe, Strichstärke, Abstände, Bedeutung und ausschließliche Farbkodierung brauchen weitere Prüfung.
Planen Sie bei knapper Erfüllung möglichst mehr Abstand zur Schwelle ein. Kommuniziert Farbe ein Ergebnis, sollten Text oder Form dieselbe Information vermitteln.
Dies sind Beispielwerte, keine Messungen eines realen Falls. Die Berechnung verwendet denselben Rechenkern wie das vollständige Werkzeug. Vergleichen Sie das Ergebnis mit den Rechenschritten und haken Sie die Prüfungen danach ab.
Quellen und Methode
Häufige Fragen
Bestätigt ein Bestehen die WCAG-Konformität?
Nein. Es betrifft den geprüften Kontrast mit diesen Farben und Bedingungen. Andere Anforderungen benötigen eigene Bewertungen.
Kann ich eine transparente Farbe eingeben?
Benötigt wird die effektive Farbe nach der Überlagerung auf dem Hintergrund. Der Test deckender Farben rekonstruiert nicht die ganze Seite.