Pugin ist in einer frühen Alpha Version Alpha 0.0.9-2

Kontrastchecker – Farbenrechner für barrierefreies Design

Farben einfach prüfen, Vorgaben einhalten und professionell auftreten – genau das macht unser Kontrastchecker – Farbenrechner möglich. Ob Webseite, Online-Shop oder Werbematerial: Mit diesem Tool lässt sich zuverlässig feststellen, ob eure gewählten Farben barrierefrei und lesefreundlich sind – auf dem Bildschirm und im Druck.

Was der Kontrastchecker leistet

Der Farbenrechner prüft eure Farben direkt im Browser. Ihr gebt die gewünschte Text- und Hintergrundfarbe ein – zum Beispiel als HEX oder RGB – und erhaltet sofort Rückmeldung. Bewertet wird die Farbkombination anhand der aktuellen WCAG 2.1 Standards (Stufe AA und AAA) sowie anhand der APCA-Methode, die sich stärker an der menschlichen Wahrnehmung orientiert.

Gleichzeitig zeigt euch der Rechner, wie die gewählte Bildschirmfarbe auf Papier aussieht. Denn viele Farben wirken gedruckt anders als auf dem Monitor. Dafür wandelt unser Tool RGB- oder HEX-Werte automatisch in das sogenannte CMYK-Farbsystem um. Das ist die Farbwelt, in der Druckereien arbeiten. Zusätzlich wird eine druckbare Variante berechnet, die möglichst nah an die realistische Farbdarstellung in Bildbearbeitungsprogrammen herankommt.

Warum Farben prüfen heute entscheidend ist

Seit 2025 gibt es neue Vorschriften für barrierefreie Websites. Auch kleine Betriebe, Selbstständige und Startups sind betroffen, wenn sie online Dienstleistungen oder Produkte anbieten. Grundlage ist die EU-Richtlinie 2019/882, auch bekannt als European Accessibility Act. In Deutschland wird diese durch die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) ergänzt. Wer seine Farben kontrastreich gestaltet, trägt nicht nur zum barrierefreien Internet bei – er vermeidet auch teure Nacharbeiten und unangenehme Überraschungen bei einer Prüfung.

Wie Gründer, Unternehmer und Entscheider profitieren

Wer Farben prüft, bevor Inhalte online gehen oder in den Druck wandern, arbeitet vorausschauend. Das spart später Zeit und Geld. Viele Menschen mit eingeschränktem Sehvermögen oder altersbedingter Schwäche verlassen Seiten, die schwer lesbar sind. Auch Farbschwächen wie Rot-Grün-Blindheit führen dazu, dass Inhalte untergehen. Wer darauf achtet, wird als zugänglich und benutzerfreundlich wahrgenommen – und das stärkt das Vertrauen in Marke und Angebot.

Auch für den Printbereich lohnt sich die Prüfung. Visitenkarten, Flyer oder Produktetiketten enthalten oft Farben, die online gut aussehen, aber im Druck stumpf, zu dunkel oder unleserlich wirken. Hier hilft die automatische Umrechnung in das CMYK-System. Zusätzlich zeigt der Farbenrechner eine optimierte Druckversion an, basierend auf einer internen Vergleichstabelle. Diese Werte kommen der Druckrealität sehr nahe und vermeiden böse Überraschungen.

RGB, HEX, CMYK – kurz und einfach erklärt

RGB steht für Rot, Grün und Blau – das sind die drei Lichtfarben, aus denen Bildschirme Farben mischen. Jeder Farbton wird mit drei Zahlen zwischen 0 und 255 beschrieben. Ein reines Rot hat zum Beispiel den Wert rgb(255, 0, 0).

HEX ist die Kurzform eines RGB-Wertes in sechsstelliger Schreibweise mit einer Raute davor. So ergibt rgb(255, 0, 0) die HEX-Farbe #FF0000.

CMYK steht für Cyan, Magenta, Yellow und Key (Schwarz) – das sind die vier Druckfarben. Druckmaschinen mischen Farben ganz anders als Bildschirme. Eine Farbe, die auf dem Monitor leuchtend erscheint, kann im Druck matt oder gedämpft wirken. Deshalb ist es so wichtig, Bildschirmfarben korrekt zu übertragen.

Was bedeutet APCA?

APCA ist die Abkürzung für Advanced Perceptual Contrast Algorithm. Dieser moderne Algorithmus bewertet Kontraste nicht nur rechnerisch, sondern nach dem Eindruck, den sie beim Menschen hinterlassen. Im Gegensatz zu älteren Verfahren fließen hier Dinge wie Schriftgröße und Hintergrundhelligkeit in die Berechnung ein. Das Ergebnis ist oft praxisnäher – vor allem bei dunklen Designs oder kontrastreichen Flächen.

Ein praktisches Tool für viele Bereiche

Ob Website, Newsletter, Broschüre oder Benutzeroberfläche – unser Farbenrechner ist vielseitig einsetzbar. Er unterstützt nicht nur Agenturen, sondern auch Einzelunternehmen und kleinere Teams, die Wert auf Qualität und Lesbarkeit legen. Besonders nützlich ist die Vorschaufunktion: Ihr seht sofort, wie die eingegebenen Farben im Vergleich wirken – sowohl auf dem Bildschirm als auch als druckbare Version.

Auch Entwickler profitieren davon. Wer regelmäßig mit HTML, CSS oder WordPress arbeitet, kennt das Problem: Farben sehen gut aus, aber sind schwer lesbar oder fallen im Druck durch. Unser Tool liefert alle wichtigen Farbinformationen – inklusive RGB, HEX, CMYK und sogar einer berechneten Druckfarbe mit realitätsnahem HEX-Wert.

Farben prüfen leicht gemacht

Im Mittelpunkt steht die einfache Bedienung. Zwei Farben eingeben – zum Beispiel eine Textfarbe und eine Hintergrundfarbe – und sofort erscheint die Auswertung. Das Ergebnis zeigt, ob die Kombination die Anforderungen der WCAG 2.1 erfüllt, wie sie nach dem APCA-Standard abschneidet, welche RGB-, HEX- und CMYK-Werte berechnet wurden und wie die Farbe in der Druckversion aussehen würde.

Ihr braucht dafür keine Vorkenntnisse. Die Oberfläche ist klar strukturiert, die Ergebnisse sind verständlich formuliert. Wer tiefer einsteigen will, findet ergänzende Informationen direkt im Tool.

Mehr Sichtbarkeit. Mehr Vertrauen. Mehr Wirkung. Und das mit nur wenigen Klicks.