Globales Tool Hub
Aktuelle Sprache: German
Zurück zu den Ratgebern

Ratgeber

WCAG-Kontrastverhältnis einfach erklärt

Was Kontrastverhältnisse bedeuten und wie du AA/AAA-Ziele praktisch in UI-Workflows anwendest.

Kontrastzahlen wirken anfangs abstrakt. Dieser Guide erklärt sie ohne Fachjargon und mit klarem Praxisbezug.

What a contrast ratio represents

It compares how different a text color is from its background.

Higher ratios generally mean easier reading.

AA and AAA in simple terms

AA is the common practical baseline for most web interfaces.

AAA is stricter and useful where maximum readability is needed.

Normal text vs large text

Large text can pass at lower ratios than normal body text.

Always classify text size correctly before deciding pass/fail.

How to apply this in a workflow

Check planned color pairs before development.

Retest final UI states after implementation.

When to read this

  • Starting accessibility reviews.
  • Training designers and developers.
  • Creating color QA checklists.

Use ratios as a decision tool

You do not need to memorize every rule. Use a checker and know which threshold applies to your text size.

Passende Tools

Kontrast-Prüfer

Vergleiche Text- und Hintergrundfarben, um Kontrastwerte und WCAG-Stufen zu prüfen.

Open Contrast Checker

Weitere Ratgeber

Sieh dir einen weiteren kurzen Artikel zu einem ähnlichen Workflow an.