1:1 bis 21:1 · AA · AAA
Kontrastrechner
Schwarz auf Weiß hat ein WCAG-Kontrastverhältnis von 21:1, dem höchstmöglichen, und Weiß auf #0060fd hat 5.13:1. Gib eine Textfarbe und einen Hintergrund ein, um deine zu prüfen.
- #000000 on #ffffff = 21.00:1
- #ffffff on #0060fd = 5.13:1
- #767676 on #ffffff = 4.54:1
- #777777 on #ffffff = 4.47:1
Das Verhältnis und die fünf Prüfungen aktualisieren sich beim Tippen. Ein Verhältnis wird auf zwei Dezimalstellen abgeschnitten, nie aufgerundet, 4.499 erscheint also als 4.49:1 und besteht die Prüfung auf 4.5:1 nicht.
Scanned by 
NortonTM Safe Web
Auf einen Blick
- Preis
- Ohne Kosten
- Konto
- Nicht nötig
- Upload
- Entfällt – du tippst Farben, nichts wird irgendwohin gesendet
- Formel
- (hellere Luminanz + 0.05) ÷ (dunklere Luminanz + 0.05)
- Schwellenwerte
- AA 4.5:1 für normalen und 3:1 für großen Text; AAA 7:1 für normalen und 4.5:1 für großen Text; 3:1 für Teile einer Oberfläche
- Standard
- WCAG-2.2-Definitionen von relativer Luminanz und Kontrastverhältnis
Kontrastverhältnisse bekannter Paare
Diese Zeilen wurden vom selben Code erzeugt wie der Rechner. Ein Haken bedeutet, dass das Paar die Anforderung erfüllt; ein Kreuz, dass es sie nicht erfüllt.
| Textfarbe | Hintergrund | Verhältnis | AA normal | AA groß | AAA normal | AAA groß | Bedienelemente |
|---|---|---|---|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| #ffffff | #0060fd | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #767676 | #ffffff | 4.54:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #777777 | #ffffff | 4.47:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| #0060fd | #ffffff | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #ffffff | #ffffff | 1.00:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| Prüfung | Mindestverhältnis |
|---|---|
| AA, normaler Text | 4.5:1 |
| AA, großer Text | 3:1 |
| AAA, normaler Text | 7:1 |
| AAA, großer Text | 4.5:1 |
| AA, Teile einer Oberfläche und Grafiken | 3:1 |
So prüfst du ein Farbpaar
Beide Farben eingeben
Gib die Textfarbe und die Hintergrundfarbe in einer beliebigen CSS-Schreibweise ein oder nutz die Farbauswahl. Die Tauschen-Taste vertauscht sie, was bei hellem Text auf dunklem Hintergrund praktisch ist.
Das Verhältnis ablesen
Das Verhältnis reicht von 1:1 (identische Farben) bis 21:1 (Schwarz auf Weiß). Die Vorschau unter den Feldern zeigt das Paar in 16 px und in 24 px, sodass du das Ergebnis mit eigenen Augen beurteilen kannst.
Die fünf Prüfungen ansehen
Jede Kachel zeigt Bestanden oder Nicht bestanden für eine WCAG-Anforderung: AA und AAA für normalen Text, AA und AAA für großen Text und AA für Teile einer Oberfläche. Besteht normaler Text AA nicht, schlägt die Seite die nächste Textfarbe vor, die besteht.
Wie das Kontrastverhältnis berechnet wird
WCAG misst Kontrast über die relative Luminanz, die Helligkeit einer Farbe von 0 (Schwarz) bis 1 (Weiß). Jeder Rot-, Grün- und Blaukanal wird durch 255 geteilt; ein Wert bis 0.04045 wird durch 12.92 geteilt, ein größerer Wert wird potenziert: (Wert + 0.055) geteilt durch 1.055, dann hoch 2.4. Die Luminanz ist dann 0.2126 mal Rot plus 0.7152 mal Grün plus 0.0722 mal Blau, was widerspiegelt, wie stark das Auge auf jede Farbe anspricht. Das Kontrastverhältnis ist die hellere Luminanz plus 0.05, geteilt durch die dunklere Luminanz plus 0.05.
WCAG 2 verlangt auf Stufe AA mindestens 4.5:1 für normalen Text und 3:1 für großen Text, auf Stufe AAA 7:1 und 4.5:1. Großer Text hat mindestens 18 Punkt, das sind 24 CSS-Pixel, oder mindestens 14 Punkt fett, etwa 18.66 Pixel. Erfolgskriterium 1.4.11 verlangt 3:1 für die Teile einer Oberfläche und die Grafiken, die ein Leser sehen muss, etwa einen Feldrahmen oder eine Diagrammlinie. Das Verhältnis wird ohne Rundung mit jedem Schwellenwert verglichen. Hat eine Farbe Transparenz, wird ein transparenter Hintergrund vor dem Messen über Weiß und eine transparente Textfarbe über den Hintergrund gelegt. Diese Seite setzt nur WCAG 2.x um; APCA, das für eine spätere Version der Richtlinien diskutiert wird, berechnet sie nicht.
Fragen zum Kontrast
Welches Kontrastverhältnis verlangt WCAG für Text?
Auf Stufe AA braucht normaler Text mindestens 4.5:1 und großer Text mindestens 3:1. Auf Stufe AAA sind es 7:1 für normalen Text und 4.5:1 für großen Text. Das Verhältnis wird zwischen der Textfarbe und der Farbe direkt dahinter gemessen.
Was gilt als großer Text?
WCAG definiert großen Text als mindestens 18 Punkt, das sind 24 CSS-Pixel, oder mindestens 14 Punkt fett, das sind etwa 18.66 CSS-Pixel. Alles Kleinere gilt als normaler Text und braucht das höhere Verhältnis.
Welches ist das hellste Grau, das auf Weiß AA besteht?
#767676 auf Weiß hat ein Verhältnis von 4.54:1 und besteht die Prüfung auf 4.5:1 für normalen Text. Das nächsthellere Grau, #777777, erreicht 4.47:1 und besteht nicht. Für 7:1 (AAA) ist das hellste Grau #595959 mit 7.00:1.
Warum fällt 4.49 durch, obwohl es wie 4.5 aussieht?
Die Prüfungen vergleichen das exakte Verhältnis mit dem Schwellenwert. Ein Verhältnis von 4.499 liegt unter 4.5, besteht also nicht, und die Seite zeigt es als 4.49:1 an, statt aufzurunden. Reines Rot auf Weiß ist ein echtes Beispiel: 3.99:1 besteht die Prüfung auf 4.5:1 für normalen Text nicht, obwohl es nah dran ist.
Welchen Kontrast brauchen Symbole, Rahmen und Formularfelder?
Erfolgskriterium 1.4.11 Nicht-Text-Kontrast, in WCAG 2.1 ergänzt, verlangt mindestens 3:1 zwischen den Teilen einer Oberfläche oder Grafik, die ein Leser sehen muss, etwa einem Feldrahmen, einem Fokusring oder einer Diagrammlinie, und den Farben daneben. Deaktivierte Bedienelemente und rein dekorative Grafiken sind ausgenommen.
Macht ein bestandenes Verhältnis eine Seite barrierefrei?
Nein. Kontrast ist nur eine Anforderung unter vielen. Auch Schriftgröße und -stärke, Zeilenabstand, Farbe als alleiniger Bedeutungsträger, sichtbarer Fokus, Text über Bildern und Verläufen sowie die Wahrnehmung von Menschen mit unterschiedlichem Farbsehen spielen eine Rolle. Nutz dieses Ergebnis als einen Anhaltspunkt und teste die Seite mit echten Inhalten.