Colour Contrast Analyser (CCA): WCAG-Kontraste präzise prüfen

Farbkontrast ist einer der häufigsten WCAG-Verstöße im Web – und einer der am einfachsten zu behebenden. Der Colour Contrast Analyser macht die Prüfung trivial: Vordergrundfarbe und Hintergrundfarbe eingeben oder per Pipette aufnehmen, das Tool berechnet das Verhältnis und zeigt sofort an, ob WCAG AA und AAA erfüllt sind. Kein anderes Tool macht Kontrastprüfung so schnell und präzise.

Was prüft der Colour Contrast Analyser?

Der CCA prüft das Luminanz-Kontrastverhältnis zweier Farben nach der WCAG-2.1-Formel. Die WCAG definiert zwei Schwellenwerte:

4.5:1 – Mindestkontrast für normalen Text (unter 18 pt bzw. unter 14 pt fett). Dies ist WCAG Level AA und damit BFSG-Pflicht.

3:1 – Mindestkontrast für großen Text (ab 18 pt bzw. ab 14 pt fett) und für grafische Elemente wie Icons, Eingabefeld-Rahmen und Fokusindikatoren (WCAG 1.4.11, Non-text Contrast).

Der CCA zeigt für jede Farbkombination an, ob sie die Schwellenwerte für normalen Text, großen Text und grafische Elemente besteht – jeweils getrennt für Level AA und AAA. Das Ergebnis wird mit Pass/Fail und dem exakten Verhältnis angezeigt (z.B. "7.42:1 Pass").

Bedienung: Pipette und Farbwerte

Der CCA bietet zwei Wege zur Farbeingabe: manuelle Eingabe von Hex-, RGB- oder HSL-Werten oder Aufnahme per Bildschirm-Pipette. Die Pipette ist besonders nützlich: Sie kann jede Farbe auf dem Bildschirm aufnehmen – auch aus Bildern, PDFs oder anderen Anwendungen, nicht nur aus dem Browser.

Der Workflow ist simpel: (1) Pipette für Vordergrundfarbe aktivieren, Textfarbe auf der Webseite anklicken. (2) Pipette für Hintergrundfarbe aktivieren, Hintergrund anklicken. (3) Ergebnis ablesen. Bei unzureichendem Kontrast kann man die Farben direkt im CCA anpassen und das Verhältnis in Echtzeit beobachten, bis der Schwellenwert erreicht ist.

Einschränkung: Die Pipette nimmt die gerenderte Pixelfarbe auf. Bei Text auf Hintergrundbildern oder Verläufen muss man die hellste und dunkelste Stelle des Hintergrunds separat prüfen.

Simulation von Farbfehlsichtigkeit

Ein besonderes Feature des CCA ist die Simulation verschiedener Farbfehlsichtigkeiten. Das Tool kann darstellen, wie eine Farbkombination für Menschen mit folgenden Seheinschränkungen aussieht:

• Protanopie (Rotblindheit): Rot wird nicht wahrgenommen, ca. 1 % der Männer betroffen.
• Deuteranopie (Grünblindheit): Grün wird nicht wahrgenommen, ca. 6 % der Männer betroffen.
• Tritanopie (Blaublindheit): Blau wird nicht wahrgenommen, sehr selten.
• Achromatopsie (vollständige Farbenblindheit): Nur Graustufen.

Diese Simulation hilft Designern zu verstehen, warum Farbe allein nie als einziges Unterscheidungsmerkmal dienen darf (WCAG 1.4.1, Use of Color). Fehler sollten nie nur durch Rotfärbung, sondern zusätzlich durch Icons oder Text signalisiert werden.

Wann reicht der CCA nicht aus?

Der CCA prüft statische Farbpaare. Für folgende Szenarien braucht man ergänzende Werkzeuge:

Text auf Bildern: Der Kontrast variiert je nach Bildbereich. Hier muss die ungünstigste Stelle gemessen werden – oder besser: ein semi-transparenter Farboverlays über dem Bild eingesetzt werden.

Dynamische Farbthemen: Bei Dark Mode, Hochkontrast-Modus oder benutzerdefinierten Farbschemata muss jede Kombination separat geprüft werden. Tools wie axe-core prüfen den gerenderten Kontrast automatisch.

Fokusindikatoren: WCAG 2.4.11 (Focus Appearance, Level AAA) und 2.4.7 (Focus Visible, Level AA) stellen Anforderungen an Fokusindikatoren, die über reinen Farbkontrast hinausgehen – etwa eine Mindestgröße des Fokusrahmens.

Für Webseiten-weite automatisierte Kontrastprüfung sind axe-core oder Lighthouse besser geeignet. Der CCA ist das Werkzeug für gezielte, präzise Einzelprüfungen.

Alternativen zum CCA

Neben dem CCA gibt es zahlreiche Kontrast-Prüfwerkzeuge:

• WebAIM Contrast Checker (webaim.org/resources/contrastchecker): Browser-basiert, schnell, keine Installation nötig.
• Stark (getstark.co): Figma- und Sketch-Plugin für Designer, prüft Kontraste direkt im Design-Tool.
• Accessible Colors (accessible-colors.com): Schlägt automatisch die nächste WCAG-konforme Farbe vor.
• Chrome DevTools: Zeigen Kontrastverhältnisse direkt im Element-Inspektor an (bei Textfarben).

Der CCA bleibt jedoch das präziseste Desktop-Tool, weil er jede Bildschirmfarbe per Pipette aufnehmen kann – unabhängig von Browser oder Anwendung. Für professionelle Barrierefreiheits-Audits ist er unverzichtbar.