Farbkontrast-Prüfer Online — WCAG AA & AAA
Überprüfen Sie, ob Ihre Text- und Hintergrundfarben den WCAG-2.1-Barrierefreiheitsstandards entsprechen. Prüfen Sie AA- und AAA-Konformität für normalen und großen Text mit Live-Vorschau.
Ausgezeichnet Kontrast
WCAG 2.1 Kontrastverhä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
Vorschau
NORMALER TEXT (16px)
The quick brown fox jumps over the lazy dog
GROßER TEXT (24px)
The quick brown fox jumps over the lazy dog
KLEINER TEXT (12px)
The quick brown fox jumps over the lazy dog
WCAG-2.1-Kontrastanforderungen
Die Web Content Accessibility Guidelines (WCAG) definieren Mindestkontrastverhältnisse, um sicherzustellen, dass Text für Menschen mit Sehbehinderung oder Farbenblindheit lesbar ist.
| Stufe | Texttyp | Mindestverhältnis |
|---|---|---|
| AA | Normaler Text (unter 18pt / 14pt fett) | 4.5:1 |
| AA | Großer Text (18pt+ / 14pt+ fett) | 3:1 |
| AAA | Normaler Text | 7:1 |
| AAA | Großer Text | 4.5:1 |
Kontrastverhältnisskala
- 1:1 — Kein Kontrast (gleiche Farbe)
- 3:1 — Minimum für großen Text (AA)
- 4,5:1 — Minimum für normalen Text (AA)
- 7:1 — Verbesserter Kontrast für normalen Text (AAA)
- 21:1 — Maximaler Kontrast (Schwarz auf Weiß)
Warum es wichtig ist
Etwa 8 % der Männer und 0,5 % der Frauen haben eine Form von Farbsehschwäche. Ausreichender Kontrast hilft allen — im hellen Sonnenlicht, auf minderwertigen Bildschirmen oder bei Erschöpfung.
Verwandte Werkzeuge
Farbmischer & Farbverlauf-Generator
Mischen Sie zwei Farben mit einem Verhältnisregler. Erhalten Sie eine vollständige Farbverlaufspalette.
CSS-Farbnamen — Alle 148 Farben
Durchsuche alle 148 CSS-Farbnamen mit ihren HEX- und RGB-Werten.
Material-Design-Farbtabelle & Palette
Material-Design-Farbpalette — 19 Farbfamilien × 10 Abstufungen.
Minecraft-Farbcodes & Formatierung
Alle Minecraft-§-präfixierten Farb- und Formatierungscodes mit Vorschau.
Roblox-Farbcodes & BrickColor-IDs
Vollständige Roblox-BrickColor-Palette mit Farb-IDs und RGB-Werten.
Farbpaletten-Generator
Harmonische Farbpaletten aus einer Basisfarbe generieren — komplementär, triadisch und analog.
Farbformat-Konverter
Farben sofort zwischen HEX, RGB, HSL, HSV, CMYK und CSS-Farbnamen umwandeln.
Farbton-Generator
10-stufige Farbtonpalette (50–900) aus einer Basisfarbe generieren wie Tailwind CSS. HEX, RGB und CSS-Variablen kopieren.
Farbverlauf-Paletten-Generator
Gleichmäßige RGB-Farbverläufe zwischen zwei Farben mit 3–20 Schritten. HEX, CSS linear-gradient oder Tailwind-Array kopieren.
Farbkontrast-Analysator
WCAG-2.1-Kontrastverhältnisse prüfen. Bestanden/Nicht bestanden für AA und AAA — plus automatische Vorschläge und Live-Textvorschau.
Farbblindheits-Simulator
Bild hochladen und sehen, wie es bei Protanopie, Deuteranopie, Tritanopie und Achromatopsie aussieht.
Online-Farbwähler — HEX, RGB & HSL
Wählen Sie visuell jede Farbe mit einem Canvas-basierten HSV-Wähler. Exportieren Sie als HEX, RGB oder HSL.
Farbrad Online — interaktiver HSL-Farbwähler
Interaktives HSL-Farbrad. Klicken Sie auf jeden Punkt, um seinen Farbton und die Sättigung auszuwählen.
Bild-Farbwähler — Farben aus Fotos
Laden Sie ein beliebiges Bild hoch und klicken Sie, um Farben direkt aus Pixeln zu entnehmen.
HEX zu RGB Farbkonverter
Wandle HEX-Farbcodes sofort in RGB-, HSL-, HSV- und CMYK-Werte um.
RGB zu HEX Farbkonverter
Stelle R-, G-, B-Werte mit Schiebereglern oder Eingaben ein und erhalte die HEX- und HSL-Ausgabe.