Farbkontrast-Prüfer
Prüfen Sie Farbkontrastverhältnisse für WCAG 2.1-Konformität. Validieren Sie AA- und AAA-Standards sofort.
Was ist das WCAG-Kontrastverhältnis?
Das WCAG-Kontrastverhältnis misst den Leuchtdichteunterschied zwischen Vorder- und Hintergrundfarben. Es reicht von 1:1 bis 21:1.
Was sind die WCAG AA- und AAA-Anforderungen?
WCAG AA erfordert mindestens 4.5:1 für normalen Text und 3:1 für großen Text. AAA erfordert 7:1 bzw. 4.5:1.
Was gilt als großer Text?
Großer Text ist definiert als 18pt (24px) oder größer, oder 14pt (18.66px) fett oder größer.
Warum ist Farbkontrast wichtig?
Ausreichender Kontrast stellt sicher, dass Text für Menschen mit Sehbehinderungen lesbar ist und verbessert die Lesbarkeit für alle.
Wie berechne ich das Kontrastverhältnis?
Es wird mit den relativen Leuchtdichtewerten berechnet. Die Formel lautet (L1 + 0.05) / (L2 + 0.05).
Was ist der Mindestkontrast für UI-Elemente?
WCAG erfordert mindestens 3:1 für UI-Komponenten und grafische Objekte.
Kann ich jede Farbkombination verwenden?
Nicht alle Kombinationen erfüllen Barrierefreiheitsstandards. Verwenden Sie diesen Prüfer zur Validierung.
Was ist relative Leuchtdichte?
Sie ist die wahrgenommene Helligkeit einer Farbe, von 0 (Schwarz) bis 1 (Weiß). Berechnet mit dem sRGB-Farbraum.
Muss ich den Kontrast von Bildern prüfen?
Text in Bildern muss dieselben Anforderungen erfüllen. Für dekorative Bilder gilt dies nicht.
Welche Tools helfen bei Kontrast?
Verwenden Sie Browser-Entwicklertools, Design-Plugins oder Online-Prüfer wie diesen.
So verwenden Sie Farbkontrast-Prüfer
Prüfe sofort, ob Text- und UI-Kontrast die AA- und AAA-Schwellen von WCAG 2.1 erfüllen — komplett im Browser. Gib zwei Farben ein, das Verhältnis wird lokal berechnet und nichts verlässt dein Gerät.
- Tippe die Textfarbe ins Feld Foreground Color oder füge sie ein — HEX, RGB und weitere unterstützte Formate sind möglich.
- Trage in Background Color die Farbe hinter dem Text ein, um das Kontrastverhältnis zu berechnen.
- Lies das ermittelte Verhältnis sowie die AA- und AAA-Bestehungsanzeige für normalen und großen Text.
- Justiere eine der Farben, bis das Verhältnis 4,5:1 für Fließtext bzw. 3:1 für großen Text und UI-Komponenten übertrifft.
- Tausche die Werte von Foreground Color und Background Color, um die umgekehrte Kombination zu prüfen, etwa helle Schrift auf dunklem Theme.
AAA (7:1) ist ein lobenswertes Ziel für lange Texte, doch 4,5:1 (AA) ist die Untergrenze, die die meisten Accessibility-Richtlinien verlangen.
Verwandte Tools
- Farbpipette Wählen Sie jede Farbe vom Bildschirm mit der Pipette. Kopieren Sie HEX-, RGB-, HSL-Codes sofort. Kostenloses Online-Tool.
- Farbpaletten-Generator Erstellen Sie sofort schöne, harmonische Farbpaletten mit unserem kostenlosen Online-Generator. Unterstützt monochromatische, analoge, komplementäre, triadische, split-komplementäre und tetradische Modi. Passen Sie Farben mit HSL-Reglern an, sperren Sie Favoriten und exportieren Sie als CSS, Tailwind, JSON oder SVG. 100% browserbasiert, Ihre Daten verlassen nie Ihr Gerät.
- Farbenblindheits-Simulator Kostenloser Online-Farbenblindheits-Simulator. Testen Sie Designs für Protanopie, Deuteranopie, Tritanopie und andere Typen. 100% privat, läuft im Browser.
- GIF Frames Extrahieren Extrahieren und laden Sie einzelne Bilder aus GIF-Animationen als PNG oder Sprite-Sheet herunter. Kostenloses Online-Tool mit Vorschau und ZIP-Export.
- GIF Rückwärts Kehren Sie die Abspielreihenfolge von GIF-Animationen kostenlos online um. Hochladen, Vorschau und sofort herunterladen.
- GIF-Geschwindigkeitsänderer Ändern Sie die GIF-Animationsgeschwindigkeit online. Beschleunigen oder verlangsamen Sie GIF-Dateien sofort.
- Video zu GIF Konvertieren Sie Video online in animierte GIFs. Passen Sie Qualität, Bildrate und Auflösung direkt im Browser an – kein Upload erforderlich.
- Meme Generator Kostenloser Online Meme-Generator. Fügen Sie jedem Bild klassische oben/unten-Texte hinzu, verschieben Sie sie frei und laden Sie Ihr Meme sofort als PNG oder JPEG herunter.