Check WCAG 2.2 and APCA contrast. Color-blind simulation, fix suggestions, CSS export — 100% local.
| Text Size | Level | Required | Result |
|---|---|---|---|
| Normal text | AA | 4.5:1 | ✓ Pass |
| Normal text | AAA | 7:1 | ✗ Fail |
| Large text (≥24px / 18.66px bold) | AA | 3:1 | ✓ Pass |
| Large text (≥24px / 18.66px bold) | AAA | 4.5:1 | ✓ Pass |
color: #5b9cff; background-color: #0f1115; /* Contrast ratio: 6.88:1 */
This tool runs 100% in your browser. All computation happens locally on your device — your input is never uploaded to any server. Results are for reference only.
WCAG 2.2 defines contrast as (L₁ + 0.05) / (L₂ + 0.05), where L₁ and L₂ are the relative luminances of the lighter and darker colors. Relative luminance linearizes each sRGB channel (c/12.92 when c ≤ 0.03928, otherwise ((c+0.055)/1.055)^2.4) and blends them as 0.2126R + 0.7152G + 0.0722B. Pass thresholds depend on text size: normal text needs 4.5:1 for AA and 7:1 for AAA, while large text (≥24px, or ≥18.66px bold) only needs 3:1 for AA and 4.5:1 for AAA. The tool computes this ratio live, also reports the APCA Lc perceptual score, simulates protanopia/deuteranopia/tritanopia, and can suggest a passing color.
White on a typical mid-red sits around 2.8:1 — fine for a decorative accent, but far below the 4.5:1 AA floor for body text.
Diego's app uses a red primary button (#ff6b6b) on a white page, and his designer wants to confirm the label passes accessibility standards.
To check contrast: enter foreground and background colors — the tool calculates the WCAG contrast ratio and shows whether it passes AA or AAA accessibility standards.
FreeToolHub Contrast Checker is a free browser-based tool that tests color contrast ratios against WCAG accessibility standards, no signup.
Überprüfen Sie WCAG 2.2- und APCA-Kontrastverhältnisse. Farbenblindensimulation, automatische Korrekturvorschläge, CSS-Export. Kostenloses Barrierefreiheitswerkzeug — keine Anmeldung, 100% browserbasiert.
WCAG (Web Content Accessibility Guidelines) 2.2 erfordert ein Mindestkontrastverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text (18px+ oder 14px+ fett) auf Stufe AA. Stufe AAA erfordert 7:1 für normalen Text und 4,5:1 für großen Text. Nicht konforme Kontraste machen Inhalte für Nutzer mit Sehbehinderungen unlesbar und können zu rechtlichen Schritten unter Barrierefreiheitsgesetzen wie dem ADA führen.
APCA (Accessible Perceptual Contrast Algorithm) ist ein neues Kontrastmodell, das für WCAG 3.0 vorgeschlagen wird. Im Gegensatz zum aktuellen WCAG-Verhältnis, das eine einfache Helligkeitsformel verwendet, berücksichtigt APCA, wie das menschliche Auge Kontraste je nach Textgröße, -gewicht und -polarität (Hell-auf-Dunkel vs. Dunkel-auf-Hell) unterschiedlich wahrnimmt. APCALC-Werte reichen von 0 bis 106+, wobei 75+ für Fließtext empfohlen werden.
Das Werkzeug wendet wissenschaftliche Farbumwandlungsmatrizen an, um zu simulieren, wie Ihre Farben für Nutzer mit Protanopie (Rotblindheit, ~1% der Männer), Deuteranopie (Grünblindheit, ~1% der Männer) und Tritanopie (Blaublindheit, selten) erscheinen. Dies hilft Ihnen zu überprüfen, dass Ihr Design für die ~8% der Männer und ~0,5% der Frauen mit Farbwahrnehmungsstörungen zugänglich ist. Wenn das simulierte Kontrastverhältnis unter 4,5:1 fällt, kann Ihr Design für diese Nutzer unzugänglich sein.
WCAG 2.2 Stufe AA erfordert ein Mindestkontrastverhältnis von 4,5:1 für normalen Text (unter 18px oder unter 14px fett) und 3:1 für großen Text (18px+ oder 14px+ fett). Stufe AAA erfordert 7:1 für normalen Text und 4,5:1 für großen Text. Dieses Werkzeug überprüft automatisch alle vier Stufen.
WCAG verwendet eine einfache Helligkeitsverhältnisformel (0,2126R + 0,7152G + 0,0722B), die das Kontrastverhältnis für bestimmte Farbkombinationen überschätzen kann. APCA ist ein neueres Modell, das die wahrgenommene Kontrastwahrnehmung — wie das menschliche Auge tatsächlich verschiedene Farben wahrnimmt — berücksichtigt und für WCAG 3.0 in Betracht gezogen wird. Dieses Werkzeug zeigt beide Metriken an, damit Sie nach jedem Standard bewerten können.
Ja, dieses Werkzeug akzeptiert alle drei Formate. Geben Sie "#1a0dab" für HEX, "rgb(26, 13, 171)" für RGB oder "hsl(234, 86%, 36%)" für HSL ein. Sie können auch benannte Farben wie "white", "black", "navy" usw. verwenden. Das Werkzeug erkennt das Format automatisch und wandelt zwischen ihnen um.
Wenn Ihr Kontrastverhältnis nicht besteht, schlägt das Werkzeug automatisch die nächstgelegene konforme Farbe vor. Es passt die Helligkeit Ihrer Vordergrundfarbe (bei Beibehaltung von Farbton und Sättigung) an, um die nächstgelegene konforme Alternative zu finden. Klicken Sie auf "Use", um die vorgeschlagene Farbe sofort anzuwenden.
Dieses Tool ist auch unter diesen Aufgaben bekannt — jeder Link öffnet dasselbe Tool mit einem fokussierten Leitfaden:
What do you call a really smart cookie?
No signups, no data sold. Every tool is free to use — the free tier allows 5 downloads or saves per day, and the optional Pro plan ($7/mo, $59/yr) adds unlimited downloads, batch processing, white-label exports and an ad-free experience.
☕Support me on Ko-fi— support the free tier100% of proceeds go towards hosting & building more free tools.