Farbkontrast-Prüfgerät
| WCAG-Norm | Kleiner Text | Großer Text, UI-Komponenten und grafische Objekte |
|---|---|---|
| AA | - | - |
| AAA | - | - |
Wie man visuell ansprechende Farbkombinationen wählt
DO'S: ✔️ | DON'T: ❌ |
| ✔️ Beginnen Sie mit Ihrer primären Markenfarbe | ❌ Opfern Sie die Lesbarkeit für den Stil |
| ✔️ Verwenden Sie Farben, die mit Bedeutung und Emotionen in Einklang stehen | ❌ Verwenden Sie kontrastarmen Text, er ist anstrengend für die Augen |
| ✔️ Fügen Sie viel Weißraum für bessere Lesbarkeit hinzu | ❌ Verwenden Sie reines Schwarz auf reinem Weiß, das kann die Augen überanstrengen |
| ✔️ Verwenden Sie verschiedene Schattierungen der Farben Ihrer Marke, um Harmonie zu schaffen. | ❌ Verlassen Sie sich nur auf Farbe, um Informationen zu vermitteln |
Haftungsausschluss ❗"Dieses Tool berechnet Kontrastverhältnisse für Volltonfarbenpaare unter Verwendung der WCAG 2.1-Standards. Es berücksichtigt jedoch keine Farbverläufe, Transparenz, Hover-Zustände oder Schriftstile, die die Lesbarkeit dennoch beeinträchtigen können. Testen Sie Farben immer im gesamten Designkontext."
Häufig gestellte Fragen
A color contrast checker is a tool that helps you measure the contrast between two colors, typically text and background, to see if they meet accessibility standards under the WCAG (Web Content Accessibility Guidelines).
Strong contrast makes content easier to read for everyone, especially users with low vision or color blindness. It’s a key part of digital accessibility and is required under WCAG, ADA, and Section 508 laws.
- AA is the minimum recommended level for accessibility.
- AA requires a contrast ratio of:
- 4.5:1 for normal text
- 3:1 for large text
- AAA is more strict and often used in high-accessibility environments.
- AAA requires:
- 7:1 for normal text
- 4.5:1 for large text
WCAG defines large text as 18pt (24px) or 14pt (18.66px) bold and larger. Large text has slightly more lenient contrast requirements.
No. This tool checks only color contrast. Full accessibility includes many other factors like keyboard access, screen reader support, proper semantics, and more.
This tool is designed for solid color backgrounds and text. It does not currently support contrast testing for images, gradients, or patterned backgrounds.
Contrast ratios are calculated using the WCAG-defined luminance formula. Results are accurate for solid color combinations, but always verify contrast in the final design environment.