Kontrastrechner
Prüfen Sie Vorder- und Hintergrundfarben anhand der Kontrastschwellen von WCAG 2.2 AA und AAA. Beziehen Sie Transparenz auf einem ausdrücklich gewählten Untergrund ein, sehen Sie eine Textvorschau und exportieren Sie einen Bericht.
Auch bekannt alsFarbkontrast prüfen · Kontrast prüfen · Contrast Checker · WCAG-Kontrast prüfen · Kontrast-Checker · Kontrastverhältnis berechnen
Verwenden Sie einen CSS-Farbnamen, HEX, RGB/RGBA oder HSL/HSLA. Transparente Farben werden vor der Berechnung auf dem gewählten Untergrund zusammengesetzt.
| Verwendung | Mindestwert | Ergebnis |
|---|---|---|
| Normaler Text · AA | 4.5:1 | Bestanden |
| Normaler Text · AAA | 7:1 | Bestanden |
| Großer Text · AA | 3:1 | Bestanden |
| Großer Text · AAA | 4.5:1 | Bestanden |
| Wesentliche UI-Elemente und Grafiken · AA | 3:1 | Bestanden |
Bestanden/Nicht bestanden beruht auf dem ungerundeten Verhältnis. Großer Text bedeutet mindestens 24 CSS-px oder etwa 18,67 CSS-px bei fettem Text. Der UI-Kontrast hängt von den tatsächlich angrenzenden Farben ab; dieses Farbpaar allein kann keine vollständige WCAG-Konformität belegen.
Machen Sie jedes Wort gut lesbar.
Die Vorschau verwendet die Schwellenwerte für normalen Text. Effektiver Hintergrund: #FFFFFF (für die Anzeige gerundet).
Drei kleine Schritte.
- Geben Sie Text- und Hintergrundfarbe als CSS-Farbnamen, HEX, RGB oder HSL ein.
- Wählen Sie den deckenden Untergrund hinter transparenten Farben und prüfen Sie dann die Kontrastergebnisse.
- Sehen Sie sich normalen oder großen Text in der Vorschau an, tauschen Sie die Farben und kopieren Sie den Bericht oder laden Sie ihn herunter.
Ein paar Dinge, die Sie wissen sollten.
Verwendet die WCAG-Berechnung der relativen Luminanz in sRGB mit ungerundeten Verhältnissen für bestanden/nicht bestanden. Großer Text hat mindestens 24 CSS-Pixel oder, wenn fett, etwa 18,67 Pixel. Geprüft wird ein Paar aus Volltonfarben; Verläufe, Bilder, die tatsächliche Schriftdarstellung, angrenzende UI-Farben und die vollständige Barrierefreiheitskonformität erfordern eine gesonderte Prüfung.
So funktioniert Ihr Datenschutz →Etwas mehr Klarheit.
Warum fällt 4,50:1 manchmal durch?
Das angezeigte Verhältnis ist auf zwei Dezimalstellen gerundet. Die Entscheidung verwendet den vollständigen, ungerundeten Wert, sodass ein Verhältnis knapp unter 4,5 die AA-Schwelle für normalen Text trotzdem nicht erreicht.
Wie wirkt sich Transparenz auf das Ergebnis aus?
Zuerst wird der Hintergrund auf dem gewählten deckenden Untergrund zusammengesetzt. Dann wird der Text auf diesem effektiven Hintergrund zusammengesetzt, bevor der Kontrast berechnet wird. Ein anderer Untergrund kann das Ergebnis ändern.
Ähnliche Suchanfragenkontrast prüfen barrierefrei · wcag kontrast prüfen · bfsg kontrast prüfen · kontrastrechner wcag