Kostenloser WCAG-Farbkontrastprüfer: Testen Sie Text- und Hintergrundfarben in Ihrem Browser auf AA- und AAA-Konformität. Geben Sie Hex- oder RGB-Werte ein, sehen Sie sich das Kontrastverhältnis an und prüfen Sie sofort, ob die Prüfung bestanden oder nicht bestanden wurde. Kein Login, kein Upload.
Es berechnet das WCAG 2.x-Kontrastverhältnis zwischen einer Vordergrundfarbe (Textfarbe) und einer Hintergrundfarbe unter Verwendung der relativen sRGB-Luminanz. Sie erhalten ein numerisches Verhältnis (z. B. 4,52:1) plus Bestehen/Nichtbestehen für die WCAG AA- und AAA-Schwellenwerte für normalen Text und großen Text. Es handelt sich um ein Design-QA-Hilfsmittel – nicht um eine vollautomatische Prüfung der Barrierefreiheit Ihrer gesamten Website.
Hex (#RGB, #RRGGBB, #RRGGBBAA), rgb() und rgba(). Fügen Sie Markenpalettenwerte aus Figma-Tokens, CSS-Variablen oder Designdokumenten ein. Kurzes Hex wie #fff wird zu #ffffff erweitert, bevor die Luminanz berechnet wird.
AA ist die gemeinsame Rechts- und Produktbasislinie: 4,5:1 für normalen Text, 3:1 für großen Text. AAA ist strenger: 7:1 normal, 4,5:1 groß. Viele Marketingseiten zielen auf AA für Fließtexte und AAA nur für herausragende Schlagzeilen oder risikoreiche Benutzeroberflächen ab. Dieses Tool zeigt beides, sodass Sie ein verteidigungsfähiges Ziel mit Design auswählen können.
Großer Text hat eine normale Schriftstärke von mindestens 18 Punkt (24 CSS-Pixel) oder eine Fettschrift von mindestens 14 Punkt (ca. 18,66 CSS-Pixel). Schaltflächen, Bildunterschriften und Kleingedrucktes entsprechen oft nicht der AA-Qualität, selbst wenn die Überschriften bestehen – überprüfen Sie jede Größe, die Sie versenden, nicht nur das H1-Muster.
Nein. Parsing und Luminanzberechnung laufen vollständig in Ihrem Browser. Unveröffentlichte Palettenexperimente und Kunden-NDA-Farben bleiben auf Ihrem Gerät. Löschen Sie die Felder auf gemeinsam genutzten Computern, wenn Sie fertig sind.
rgba- und #RRGGBBAA-Werte werden analysiert, der Kontrast wird jedoch auf undurchsichtigen sRGB-Kanälen ausgewertet – der Prüfer führt keinen Alpha-Composite-Text über fotografische Hintergründe durch. Probieren Sie für Text auf Bildern zunächst die effektive Farbe hinter der Kopie aus oder verwenden Sie eine einfarbige Überlagerung und überprüfen Sie sie dann erneut.
Ja. Kostenlos, ohne Anmeldung für das Kernverhältnis und den Pass/Fail-Pfad.