Design

Farbkontrastprüfer

WCAG-Kontrastverhältnis für zwei Farben.

Fast bevor wir es merkten, hatten wir den Boden verlassen.
1.00
Kontrastverhältnis
StandardNormaler TextGroßer Text
WCAG AA
WCAG AAA
WCAG 1.4.11Nicht-Text-/UI-Komponenten (≥3:1): —

Nächstgelegene AA-TextalternativeOKLCH-Alternative wird berechnet…

Dieser Bericht folgt den Anforderungen von WCAG 2.2 an Kontrastverhältnisse. APCA ist weiterhin experimentell und kein Konformitätsergebnis nach WCAG 3.

Farben auswählen? Farbkonverter · Social-Media-Bios: Fancy-Text-Generator · Skalen: Farbschattierungs-Generator.

Verwendung

Wähle eine Text- und eine Hintergrundfarbe. Das Kontrastverhältnis und das Bestehen/Nichtbestehen für jede WCAG-Stufe werden live mit einer Vorschau aktualisiert.

FAQ

Was ist ein gutes Kontrastverhältnis?

WCAG AA verlangt 4.5:1 für normalen Text und 3:1 für großen Text. AAA verlangt entsprechend 7:1 und 4.5:1. WCAG 1.4.11 verlangt außerdem 3:1 für wesentliche Nicht-Text-Grafiken und Grenzen oder Zustände von UI-Komponenten.

Was zählt als großer Text?

Großer Text ist etwa 18pt (24px) oder 14pt (18.66px) fett und größer.

Wie wird das Verhältnis berechnet?

Aus der relativen Leuchtdichte beider Farben: (heller + 0,05) ÷ (dunkler + 0,05), gemäß der WCAG-Formel.

Zuletzt aktualisiert: