Barrierefreiheit-Tool: Unser Palette Tester
Wie barrierefrei sind eure CD-Farben? Mit unserem neuen Tool könnt ihr ganz einfach selbst testen, wie und ob eure Brand-Farben genügend Kontrast schaffen, um Lesbarkeit und Zugänglichkeit zu garantieren.
Barrierefreiheit im DIY-Test
Farben sind eine zentrale Säule für das Design von Branding-Produkten. Doch nicht jede Farbkombination sorgt für eine gute Lesbarkeit. Damit eure Designs nicht nur gut aussehen, sondern auch barrierefrei sind, hilft euch unser neues Tool – der Palette Tester - bei der Überprüfung des Farbkontrasts.
So stellt ihr mit wenigen Klicks sicher, dass eure Farbpalette den etablierten Zugänglichkeitsstandards APCA und WCAG entspricht und gleichzeitig die Lesbarkeit für alle Nutzer*innen steigt. Angesichts der bevorstehenden Barrierefreiheitspflicht für Websites ist dies ein essenzieller erster Schritt.
Hier könnt ihr das Tool direkt testen: https://palette-tester.9elements.com/
Wie funktioniert der Palette Tester?
Unser Palette Tester analysiert Farben einer Palette – etwa aus eurem Corporate Design – und überprüft, ob diese Kombinationen ausreichend Kontrast bieten. Vor allem dann, wenn Textelemente auf Hintergründe gelegt werden, ist dieser Punkt enorm wichtig.
Das Tool hilft euch nicht nur dabei, bestehende Corporate Designs auf Barrierefreiheit zu prüfen, sondern ermöglicht es euch auch, neue Farbpaletten von Anfang an inklusiver zu gestalten.
Im Fokus stehen die Color Cards, die je eine Farbe eurer Palette darstellen und zeigen, wie der Kontrast mit den anderen Farben ausfällt. Links seht ihr den Namen der Vergleichsfarbe, rechts den berechneten Kontrastwert.
Die Farben werden in diese beiden Kategorien eingeteilt:
Geeignet für Fließtext (kleiner als 24px)
Geeignet für größere Schriftgrößen oder Icons
Für die Kontrastwerte gilt ein ganz einfacher Richtwert: Je höher, desto besser. Fallen eure Werte unterhalb der festgelegten Standards, gelten eure Farbkombinationen vermutlich als nicht barrierefrei.
WCAG vs. APCA – zwei Modelle für Kontrastbewertung
Das Tool basiert standardmäßig auf den WCAG 2.1 Richtlinien (Web Content Accessibility Guidelines), die international für Barrierefreiheit anerkannt sind. Zusätzlich steht euch die Möglichkeit zur Verfügung, den Advanced Perceptual Contrast Algorithm (APCA) zu verwenden – ein neueres Modell, das die menschliche Wahrnehmung von Kontrasten realistischer einbezieht.
WCAG 2.1 Kontrastwerte:
Mindestens 4,5:1 für normalen Fließtext
Mindestens 3:1 für große Texte und Icons
APCA Kontrastwerte:
Mindestens 60+ für große Texte
Mindestens 75+ für Fließtext
APCA liefert genauere Ergebnisse, ist aber noch kein offizieller Standard. Während WCAG-Kontrastwerte für regulatorische Konformität sorgen, ermöglicht APCA eine realistischere Bewertung der Lesbarkeit.
Während WCAG für offizielle Standards wichtig ist, bietet APCA eine Einschätzung, die näher an der tatsächlichen Wahrnehmung liegt. Ein Beispiel: Laut WCAG sind schwarze oder dunkelgraue Texte auf orangem Hintergrund akzeptabel – in der Praxis sind sie jedoch oft schwer zu lesen. APCA hingegen empfiehlt weiß als bessere Option, das jedoch wiederum nicht den WCAG-Standards entspricht.
Mehr Barrierefreiheit für bessere Nutzerlebnisse
Mit unserem Palette Tester könnt ihr ganz einfach selbst überprüfen, ob eure Farbpalette den Standards der Barrierefreiheit standhält oder ob hier noch Optimierungsbedarf vorliegt. Diese Betrachtung lohnt sich für euch nicht nur wegen der bevorstehenden gesetzlichen Richtlinien, sondern auch, um eure Inhalte für eine bereitere Zielgruppe zugänglich zu machen.
