Was ist ein großer Text?

18pt + (24px) regelmäßiges Gewicht oder 14pt + (18,66px) fett. Die meisten h1/h2-Elemente qualifizieren sich.

Was ist mit Nicht-Text-UI-Elementen?

WCAG 2.1 erfordert einen Kontrast von 3:1 für UI-Komponenten (Tastengrenzen, Formularfeldumrisse) und aussagekräftige Symbole. Das aa large-abzeichen nähert sich diesem.

Farbkontrastprüfer (WCAG)

Wählen Sie eine Vordergrund- und Hintergrundfarbe und sehen Sie sofort das WCAG 2.1 Kontrastverhältnis mit Pass/Fail-Abzeichen für AA und AAA, normalen und großen Text. Enthält eine Live-Vorschau.

Foreground (text)

Background

Contrast ratio

21.0:1

AA Normal

—

≥ 4.5:1

AA Large

—

≥ 3:1

AAA Normal

—

≥ 7:1

AAA Large

—

≥ 4.5:1

Normal body text — The quick brown fox jumps over the lazy dog.

Large heading — Sample preview

Large text = 18pt+ or 14pt+ bold. WCAG 2.1 thresholds.

Was this tool helpful?

Send output to:

How to use Color Contrast Checker

Wählen Sie Vorder- und Hintergrundfarben.
Lesen Sie das Kontrastverhältnis und Pass / Fail-Abzeichen.
Verwenden Sie Swap oder Invert FG, um Alternatives zu testen.

Was ist Farbkontrast-Prüfer?

WCAG 2.1 definiert Kontrastminimum für lesbaren Text: 4,5:1 für normalen Text (AA), 3:1 für großen Text (AA), 7:1 für normal (AAA), 4,5:1 für große (AAA). Großer Text ist definiert als 18pt+ oder 14pt+ fett. Dieses Tool berechnet das Verhältnis mit der Formel der relativen Leuchtdichte aus der WCAG-Spezifikation.

FAQ

Was ist ein großer Text?: 18pt + (24px) regelmäßiges Gewicht oder 14pt + (18,66px) fett. Die meisten h1/h2-Elemente qualifizieren sich.
Was ist mit Nicht-Text-UI-Elementen?: WCAG 2.1 erfordert einen Kontrast von 3:1 für UI-Komponenten (Tastengrenzen, Formularfeldumrisse) und aussagekräftige Symbole. Das aa large-abzeichen nähert sich diesem.

Related tools

Author

Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Color Contrast Checker on Wikipedia·Developer Tools on Wikipedia·Color Contrast Checker on Britannica

People also use

← Back to Developer Tools · All tags

Farbkontrastprüfer (WCAG)

Something went wrong

How to use Color Contrast Checker

Was ist Farbkontrast-Prüfer?

FAQ

Related tools

Author

People also use

Ad blocker detected

Keyboard shortcuts