Loading...
Loading...
Testen Sie jedes Text- und Hintergrundfarbpaar gegen die WCAG 2.2 AA- und AAA-Kontrastanforderungen, mit sofortigem Pass/Fail-Feedback und einer Live-Vorschau.
Higher ratios are more readable. 21:1 is pure black on white.
See your color pair on both body and heading sizes.
Normal body text at 16 pixels. WCAG 2.2 measures contrast between the foreground text and its immediate background — this preview shows the combination you entered above exactly as a user would see it.
Ein Kontrastprüfer misst den Helligkeitsunterschied zwischen zwei Farben und gibt ihn als Verhältnis zwischen 1:1 (identisch) und 21:1 (reines Schwarz auf reinem Weiß) an. Zugänglichkeitsrichtlinien verwenden dieses Verhältnis, um zu entscheiden, ob Text für Benutzer mit Sehbehinderungen, Farbenblindheit oder Bildschirmen, die im hellen Sonnenlicht betrachtet werden, lesbar ist. Dieses Tool folgt WCAG 2.2 — dem gleichen Standard, auf den sich die ADA in den USA, das Europäische Gesetz über Barrierefreiheit und die meisten Unternehmensdesignsysteme beziehen. Geben Sie zwei beliebige Farben ein und Sie erhalten sofort ein Pass/Fail über die fünf WCAG-Schwellenwerte, plus eine Live-Vorschau sowohl in Körper- als auch in Überschriftengrößen. Alles läuft in Ihrem Browser — kein Upload, kein Tracking, kein Konto.
Fügen Sie einen Hex-Code ein oder verwenden Sie den Farbwähler für die Vordergrundfarbe (Textfarbe). Das Tool akzeptiert auch 3-stellige Abkürzungen wie #03A.
Machen Sie dasselbe für den Hintergrund. Wenn Sie nur die Textfarbe kennen, lassen Sie den Hintergrund auf Weiß (#FFFFFF) für den Standardtest.
Die große Verhältniszahl aktualisiert sich, während Sie tippen. Ein Verhältnis unter 3.0 wird selbst die lockersten WCAG-Schwellenwerte für normalen Text nicht bestehen.
Die fünf Abzeichen zeigen Bestehen/Nichtbestehen für AA normal, AA groß, AAA normal, AAA groß und UI-Komponenten-Schwellenwerte. AA ist das übliche gesetzliche Minimum; AAA ist das verbesserte Ziel für wichtige Inhalte.
Überprüfen Sie, ob die Vorschau bei Überschrift und Fließtext richtig aussieht, und verwenden Sie dann 'CSS kopieren', um `color:` und `background-color:`-Deklarationen für Ihr Stylesheet zu erfassen.
Für jeden Kanal (R, G, B skaliert auf 0–1): c_linear = (c ≤ 0,03928) ? c / 12,92 : ((c + 0,055) / 1,055)^2,4 Relative Helligkeit: L = 0,2126·R_linear + 0,7152·G_linear + 0,0722·B_linear Kontrastverhältnis: ratio = (L_light + 0,05) / (L_dark + 0,05) wobei L_light = max(L1, L2) und L_dark = min(L1, L2)
Die Formel stammt aus WCAG 2.x und wendet eine Gamma-Korrekturkurve auf jeden sRGB-Kanal an, bevor die Helligkeit berechnet wird. Die Gewichte (0.2126, 0.7152, 0.0722) spiegeln die Empfindlichkeit der menschlichen Zapfen gegenüber rotem, grünem und blauem Licht wider. Das Hinzufügen von 0.05 zu beiden Termen verhindert eine Division durch Null, wenn eine Farbe perfektes Schwarz ist. Verhältnisse reichen von 1:1 (identische Farben) bis 21:1 (reines Schwarz auf reinem Weiß).
Referenz: WCAG 2.2 — Kontrast (Minimum) 1.4.3
| Paar | Verhältnis & Urteil |
|---|---|
#000000 auf #FFFFFF | 21:1 — besteht alle Schwellenwerte Der kanonische maximale Kontrast. Wird für Langtext-Leseoberflächen verwendet. |
#1A73E8 auf #FFFFFF | 4.63:1 — besteht AA normal, besteht nicht AAA normal Google Blau auf Weiß. Legal für Fließtext, nicht ganz AAA. |
#808080 auf #FFFFFF | 3.95:1 — besteht nicht AA normal, besteht AA groß Mittleres Grau auf Weiß — gut für Überschriften, zu hell für Absätze. |
Konvertieren Sie zwischen HEX, RGB und HSL mit Live-Farben, Schiebereglern und sofortigem Kopieren.
Berechnen Sie Ihr genaues Alter in Jahren, Monaten und Tagen ab jedem Geburtsdatum.
Überprüfen Sie den Body-Mass-Index anhand von Größe und Gewicht mit metrischen oder imperialen Einheiten.
Berechnen Sie Prozentsätze, prozentuale Änderungen und Prozentsätze eines Gesamtbetrags in Sekunden.
Zuletzt aktualisiert