Nimm die Farbwähler oder trag die Hex-Werte direkt ein — genau die Werte, die in deinem Design oder Stylesheet stehen.
Du bekommst das Kontrastverhältnis und für jede WCAG-Anforderung ein klares Bestanden oder Nicht bestanden.
Unten siehst du echten Text in deiner Kombination. Was dort mühsam zu lesen ist, ist es auf der Website erst recht.
Mit dem Barrierefreiheitsstärkungsgesetz (BFSG) gilt seit dem 28. Juni 2025 für viele digitale Angebote in Deutschland eine gesetzliche Pflicht zur Barrierefreiheit — betroffen sind unter anderem Online-Shops, Banking, Buchungsdienste und E-Books.
Der Maßstab ist die europäische Norm EN 301 549, die auf die WCAG-Kriterien verweist. Kontrast ist darin eine der am leichtesten prüfbaren Anforderungen — und damit eine der ersten, die bei einer Beanstandung auffällt. Reine Geschäftskunden-Angebote sind nicht erfasst, denn das BFSG gilt im Verhältnis zu Verbrauchern. Für Dienstleistungen an Verbraucher gibt es zusätzlich eine Ausnahme für Kleinstunternehmen: weniger als 10 Beschäftigte und höchstens 2 Mio. Euro Jahresumsatz oder Jahresbilanzsumme. Diese Ausnahme gilt allerdings nur für Dienstleistungen — wer Produkte in Verkehr bringt, ist auch als Kleinstunternehmen nicht befreit. Ob dein Angebot betroffen ist, klärt im Zweifel eine Rechtsberatung, nicht dieses Werkzeug.
| Element | Stufe AA (Pflicht) | Stufe AAA (Kür) |
|---|---|---|
| Normaler Text (unter 24 px) | 4,5:1 | 7:1 |
| Große Schrift (ab 24 px oder ab 19 px fett) | 3:1 | 4,5:1 |
| Bedienelemente, Icons, Formularrahmen | 3:1 | — |
| Logos und rein dekorative Elemente | keine Anforderung | — |
Praktisch heißt das: Graue Hilfstexte auf Weiß sind der häufigste Verstoß. Das beliebte Hellgrau #999999 auf Weiß erreicht nur 2,8:1 — es fällt bei normalem Text durch. Erst ab etwa #767676 wird die Grenze von 4,5:1 erreicht.
Es beschreibt, wie stark sich die Helligkeit zweier Farben unterscheidet — von 1:1 (identisch, unlesbar) bis 21:1 (Schwarz auf Weiß). 4,5:1 ist die Schwelle, ab der normaler Text auch für Menschen mit leichter Sehschwäche zuverlässig lesbar ist, und damit die maßgebliche Anforderung der Stufe AA.
AA ist der rechtlich relevante Maßstab und wird in der Praxis angestrebt. AAA ist eine Empfehlung für besonders hohe Anforderungen, etwa bei Angeboten, die sich gezielt an ältere Menschen richten. Die WCAG selbst rät davon ab, AAA für ganze Websites verbindlich zu machen.
Nicht direkt — das Kontrastverhältnis ist für flächige Farbpaare definiert. Bei Text auf Bildern legt man üblicherweise eine halbtransparente Fläche darunter und prüft deren resultierende Farbe gegen die Textfarbe. Das ist auch der Grund, warum viele Websites Bilder mit einem dunklen Schleier versehen.
Ab 24 Pixeln (18 Punkt) bei normalem Schnitt oder ab 19 Pixeln (14 Punkt) bei fettem Schnitt. Für solche Schrift genügt ein Kontrast von 3:1, weil dickere Buchstabenformen leichter zu erkennen sind.
Nein. Die Berechnung läuft vollständig in deinem Browser, es wird nichts an einen Server gesendet. Du kannst die Seite offline weiterbenutzen.
Für einzelne Paare ist dieses Werkzeug der schnellste Weg. Wer alle Farbkombinationen eines Design-Systems automatisiert im Build prüfen will, nutzt dieselbe Berechnung als Farb-API und lässt Verstöße den Build abbrechen.
Nichts, dauerhaft und ohne Anmeldung. Auch die API ist in der Beta kostenlos.