Kontrast-Checker
Wähle eine Vorder- und Hintergrundfarbe, um den Kontrastwert live zu sehen und zu prüfen, ob er die WCAG-Richtlinien AA und AAA für normalen und großen Text erfüllt. Eine Live-Vorschau zeigt die Kombination in der Praxis.
So funktioniert’s
Wähle deine Vorder- und Hintergrundfarbe über die Farbauswahl oder gib einen Hex-Code ein. Der Kontrastwert wird aus der relativen Leuchtdichte beider Farben berechnet und mit den WCAG-Schwellenwerten für normalen Text (4,5:1 für AA, 7:1 für AAA) und großen Text (3:1 für AA, 4,5:1 für AAA) verglichen.
Tipp
Schlägt eine Kombination fehl, versuche die dunklere Farbe abzudunkeln oder die hellere aufzuhellen — schon kleine Anpassungen können den Wert über die nächste Schwelle heben.
Was gilt als „großer Text“?
Die WCAG definiert großen Text als mindestens 18pt (24px) oder 14pt (~18,5px) fett — Überschriften und ähnlich auffälliger Text dürfen die großzügigeren Schwellenwerte für großen Text nutzen.
Weitere Tools aus dieser Kategorie
Belichtungsrechner
Finde äquivalente Kamerabelichtungen für Blende, Verschlusszeit und ISO.
Seitenverhältnis-Rechner
Skaliere ein Bild oder Video proportional und finde das vereinfachte Verhältnis.
CSS-Verlaufsgenerator
Erstelle einen linearen oder radialen CSS-Verlauf und kopiere den generierten Code.
Farbpaletten-Generator
Verwandle jede Grundfarbe in komplementäre, analoge und triadische Farbpaletten.
Farbformat-Konverter
Wandle jede Farbe sofort zwischen HEX, RGB, HSL und CMYK um – mit Ein-Klick-Kopieren für jedes Format.
Typografie-Skalen-Generator
Erzeuge aus einer Basisschriftgröße und einem Skalenverhältnis eine stimmige Reihe von Schriftgrößen, fertig zum Kopieren als CSS Custom Properties.