Barrierefreier Farbpaletten-Generator nach WCAG (AA/AAA)

Barrierefreie Farbpalette: WCAG-Kontraste und Beispiel

Aus einer Basisfarbe erstellt das Tool eine Palette mit 5 Rollen (Fläche, Primär, Akzent, dunkles Neutral, zarter Ton) und misst den Kontrast jeder Farbe auf Weiß und auf dem dunklen Hintergrund #0f172a. Das Abzeichen folgt den WCAG-Schwellen: 7:1 für AAA, 4,5:1 für AA, 3:1 für großen Text (Abzeichen „AA großer Text“).

Methode

• Die Basisfarbe wird in HSL umgerechnet (Farbton, Sättigung und Helligkeit behalten ihre Nachkommastellen; nur das RGB-Ergebnis wird gerundet). Jede Harmonie legt 5 Farben fest: im Komplementärmodus Fläche (gleicher Farbton, 95 % Helligkeit), Primär (Helligkeit zwischen 35 und 65 %), Akzent (Farbton + 180°, 50 % Helligkeit), dunkles Neutral (15 % Sättigung, 20 % Helligkeit) und ein zarter Akzentton (92 %).
• Relative Leuchtdichte nach WCAG: Jeder sRGB-Kanal c = Wert ÷ 255 wird linearisiert (c ÷ 12,92 bei c ≤ 0,04045, sonst ((c + 0,055) ÷ 1,055)^2,4), dann L = 0,2126 R + 0,7152 G + 0,0722 B.
• Kontrast = (hellere L + 0,05) ÷ (dunklere L + 0,05).

Nachgerechnetes Beispiel

Basis #3b82f6, Komplementärmodus (HSL 217,2°, 91,2 %, 59,8 %). Die Primärfarbe bleibt #3b82f6, da ihre Helligkeit bereits zwischen 35 und 65 % liegt: 3,68:1 auf Weiß, also nur AA großer Text, und 4,85:1 auf #0f172a (AA). Der orange Akzent #f29b0d funktioniert nur auf dunklem Grund (8,05:1, AAA; 2,22:1 auf Weiß). Das Neutral #2b313b erreicht 13,08:1 auf Weiß.

Grenzen

• Getestet werden nur zwei Hintergründe; der Kontrast zwischen zwei Palettenfarben wird nicht gemessen. Um eine einzelne Farbe zwischen HEX, RGB, HSL und CMYK umzurechnen und ihren Kontrast auf Weiß und Schwarz abzulesen, nutzen Sie besser den Farbkonverter.
• Die Schwelle 3:1 gilt für großen Text (18 pt oder 14 pt fett) und für Bedienelemente (Kriterium 1.4.11), nicht für Fließtext.
• Der Tailwind-Export führt die 5 Farben als surface, primary, accent, dark und support.

Quellen und Stand: W3C, WCAG 2.2 (Kriterien 1.4.3, 1.4.6 und 1.4.11, Glossar „relative luminance“), Empfehlung vom 12.12.2024; Linearisierungsschwelle 0,04045 (vor Mai 2021: 0,03928, ohne Auswirkung auf 8-Bit-Werte) (geprüft am 14.10.2026).

Häufig gestellte Fragen

Welchen Kontrast verlangt die WCAG für Text?

Stufe AA verlangt mindestens 4,5:1 für Fließtext und 3:1 für großen Text (18 pt oder 14 pt fett). Stufe AAA hebt die Werte auf 7:1 und 4,5:1 an.

Warum besteht Blau #3b82f6 auf Weiß nicht AA?

Sein Kontrast auf Weiß liegt bei etwa 3,7:1 und damit unter 4,5:1 für Fließtext. Für einen Button oder eine große Überschrift (3:1) reicht er, für einen Absatz nicht.

Ist weißer Text auf kräftigen Farben immer lesbar?

Nein. Weiß hat die relative Leuchtdichte 1, ein Orange wie #f29b0d erreicht damit nur 2,2:1. Auf dem dunklen Hintergrund #0f172a kommt dasselbe Orange auf 8:1.

Welche WCAG-Version wendet das Tool an?

Die Kontrastschwellen und die Leuchtdichteformel der WCAG 2.2, W3C-Empfehlung vom 12. Dezember 2024, die hier mit WCAG 2.1 übereinstimmen. Die Linearisierung nutzt die Schwelle 0,04045.

Ist das Tool wirklich kostenlos?

Ja, alle Werkzeuge auf Kristools sind zu 100% kostenlos und ohne Registrierung zugänglich.

Sind meine Daten geschützt?

Ja. Die gesamte Verarbeitung erfolgt sicher und direkt in Ihrem Browser. Es werden keine persönlichen Daten an unsere Server gesendet.