Barrierefreier WCAG-Farbpaletten-Generator
Erzeugen Sie eine Palette zufälliger Farben und filtern Sie diejenigen heraus, die mit weißem oder schwarzem Text tatsächlich ein WCAG-Kontrastverhältnis der Stufe AA oder AAA erreichen. Luminanz und Kontrastverhältnis werden direkt in Ihrem Browser berechnet.
So funktioniert es
Wer eine Markenpalette nur nach ihrer Ästhetik auswählt, erhält oft Farben, die den Barrierefreiheitstest nicht mehr bestehen, sobald Text darüber liegt. Dieses Tool zieht zufällige Farben, berechnet ihre relative Luminanz nach der WCAG-Formel und vergleicht dann das Kontrastverhältnis mit weißem und mit schwarzem Text, um (auf Wunsch) nur diejenigen beizubehalten, die die Stufe AA oder AAA erreichen.
Wie wird das Kontrastverhältnis berechnet?
Die Berechnung folgt der offiziellen WCAG-Formel: Jede Farbe wird in eine relative Luminanz umgerechnet (ein Maß für die wahrgenommene Helligkeit, das die Empfindlichkeit des menschlichen Auges für jeden Rot-, Grün- und Blaukanal berücksichtigt). Das Verhältnis ergibt sich dann aus dem Vergleich der Luminanz der helleren mit der der dunkleren Farbe. Ein Verhältnis von 21:1 entspricht dem größtmöglichen Kontrast (reines Schwarz auf reinem Weiß).
Warum steht bei manchen Farben „Weißer Text“ und bei anderen „Schwarzer Text“?
Das Tool berechnet das Verhältnis in beide Richtungen und wählt automatisch die Textfarbe (Weiß oder Schwarz) mit dem besseren Kontrast auf dem erzeugten Hintergrund. Diese Kombination sollten Sie verwenden, wenn Sie die Farbe als Hintergrund in Ihrer Oberfläche einsetzen.
Die gesamte Berechnung von Luminanz und Kontrast läuft in JavaScript in Ihrem Browser ab: Keine erzeugte Farbe wird an einen Server gesendet.