Barrierefreie Farbpalette
Farbpalette auf WCAG-Kontrast prüfen: Kontrastmatrix, passende Text-Hintergrund-Paare und Anpassung auf AA oder AAA.
Die barrierefreie Farbpalette prüft eine Palette auf WCAG-Kontrast. Du trägst bis zu acht Farben ein, wählst Hintergrund und Zielstufe (AA oder AAA) und siehst sofort, welche Farben als Text bestehen. Eine Kontrastmatrix zeigt alle Kombinationen. Nicht bestandene Farben lassen sich mit minimaler Änderung anpassen, oder du erzeugst eine passende Palette aus einer Farbe.
Palette
Text auf Weiß
3 von 5 Farben erreichen 4,5 : 1.
| Farbe | Kontrast | Ergebnis | Vorschlag |
|---|---|---|---|
| #2563eb | 5,1 : 1 | Bestanden | – |
| #16a34a | 3,2 : 1 | Nicht bestanden | |
| #dc2626 | 4,8 : 1 | Bestanden | – |
| #f59e0b | 2,1 : 1 | Nicht bestanden | |
| #7c3aed | 5,6 : 1 | Bestanden | – |
Kontrastmatrix
Zeile = Textfarbe, Spalte = Hintergrund. Kürzel: AAA, AA, „AA groß“ oder – für unter 3 : 1.
| Text \ Hintergrund | Farbe 1 | Farbe 2 | Farbe 3 | Farbe 4 | Farbe 5 | Weiß | Schwarz |
|---|---|---|---|---|---|---|---|
| Farbe 1 | – | Aa 1,5 · – | Aa 1 · – | Aa 2,4 · – | Aa 1,1 · – | Aa 5,1 · AA | Aa 4 · AA groß |
| Farbe 2 | Aa 1,5 · – | – | Aa 1,4 · – | Aa 1,5 · – | Aa 1,7 · – | Aa 3,2 · AA groß | Aa 6,3 · AA |
| Farbe 3 | Aa 1 · – | Aa 1,4 · – | – | Aa 2,2 · – | Aa 1,1 · – | Aa 4,8 · AA | Aa 4,3 · AA groß |
| Farbe 4 | Aa 2,4 · – | Aa 1,5 · – | Aa 2,2 · – | – | Aa 2,6 · – | Aa 2,1 · – | Aa 9,7 · AAA |
| Farbe 5 | Aa 1,1 · – | Aa 1,7 · – | Aa 1,1 · – | Aa 2,6 · – | – | Aa 5,6 · AA | Aa 3,6 · AA groß |
| Weiß | Aa 5,1 · AA | Aa 3,2 · AA groß | Aa 4,8 · AA | Aa 2,1 · – | Aa 5,6 · AA | – | Aa 21 · AAA |
| Schwarz | Aa 4 · AA groß | Aa 6,3 · AA | Aa 4,3 · AA groß | Aa 9,7 · AAA | Aa 3,6 · AA groß | Aa 21 · AAA | – |
:root {
--color-1: #2563eb;
--color-2: #16a34a;
--color-3: #dc2626;
--color-4: #f59e0b;
--color-5: #7c3aed;
}Was macht eine Palette barrierefrei?
Eine barrierefreie Palette enthält Farbpaare mit ausreichendem Kontrast, damit Text, Icons und Bedienelemente auch bei eingeschränktem Sehvermögen erkennbar bleiben. Die WCAG fordern für Text mindestens 4,5 : 1 (AA), für große Schrift und UI-Elemente 3 : 1.
Zielwerte
| Stufe | Kontrast | Gilt für |
|---|---|---|
| AA | 4,5 : 1 | Normaler Text |
| AAA | 7 : 1 | Normaler Text, erhöhte Anforderung |
| AA groß / UI | 3 : 1 | Große Schrift, Icons, Rahmen von Eingabefeldern |
So gehst du vor
- Farben und Hintergrund festlegen, Zielstufe wählen.
- Nicht bestandene Farben anpassen lassen.
- Einzelne Paare vertiefst du im Farbkontrast-Prüfer. Wie die Palette bei Farbsehschwäche wirkt, zeigt der Farbenblindheit-Simulator.
Beispiel
Ein Gelb wie #f59e0b erreicht auf Weiß nur etwa 2,1 : 1 und ist als Text zu blass.
Der Vorschlag dunkelt es auf einen kräftigeren Bernsteinton ab, der auf Weiß 4,5 : 1 erreicht. Als
Flächenfarbe mit dunklem Text funktioniert das ursprüngliche Gelb dagegen sehr gut.
Häufige Fragen
Welche Stufe sollte ich wählen?
AA (4,5 : 1) ist die übliche Anforderung für normalen Text. AAA (7 : 1) bietet mehr Reserve für längere Texte. Große Schrift und UI-Elemente kommen mit 3 : 1 aus.
Wie wird eine Farbe angepasst?
Der Generator verändert nur die Helligkeit im OKLCH-Farbraum, bis das Ziel erreicht ist. Farbton und Sättigung bleiben erhalten, die Farbe bleibt also erkennbar, wird aber heller oder dunkler.
Wozu dient die Kontrastmatrix?
Sie zeigt für jedes Farbpaar das Kontrastverhältnis. So erkennst du, welche Farben als Text auf welchem Hintergrund funktionieren, zum Beispiel weißer Text auf deinem Blau oder dunkler Text auf Gelb.
Reicht Kontrast allein für Barrierefreiheit?
Nein. Informationen sollten nie nur über Farbe vermittelt werden, etwa Fehler nur durch Rot. Ergänze Symbole oder Text. Das Tool prüft nur den Kontrast und ersetzt weder eine vollständige Prüfung noch Rechtsberatung, etwa zum BFSG.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.