Prüfe, ob deine Farben lesbar und barrierearm sind.
Teste Vorder- und Hintergrundfarben, sieh dir das Ergebnis an, prüfe WCAG AA und AAA und kopiere saubere HEX-Werte oder CSS-Variablen.
Lesbare Farbe ist wichtig.
This sample updates as you change the foreground and background colours.
Kopieren the colour pairing
Verwenden this in CSS, a design system, or a quick accessibility note.
:root {
--contrast-text: #111827;
--contrast-background: #FFFFFF;
}
Accessible Beispiele to try
Start from a real Palette or a safe high-contrast pairing, then adjust it for your project.
What the score means
The higher the ratio, the easier the combination is to read for more people and more display conditions.
Verwenden at least 4.5:1 for body copy, navigation, links, buttons and most interface text.
Large text can pass at 3:1, but higher contrast usually still feels clearer and more professional.
7:1 is the stronger target for long reading, critical information, accessibility-first products and dashboards.