GET /v1/farbe?farbe=%230f5d57&hintergrund=%23ffffff
{ "kontrast": 7.4, "wcag_aa": true, "wcag_aaa": true, "hex": "#0f5d57", "rgb": [15, 93, 87] }
Das Hellgrau für die Hinweistexte sah im Entwurf zurückhaltend und edel aus. Auf einem Laptop im Sonnenlicht ist es weg, und wer den Hinweis auf die Widerrufsfrist sucht, findet ihn nicht. Aufgefallen ist das im Team niemandem — alle sitzen vor guten Monitoren in gleichmäßig ausgeleuchteten Büros.
Ein Endpunkt, zwei Modi. Übergibst du nur farbe, kommt die Analyse dieser einen Farbe zurück: hex, rgb, hsl und die relative Leuchtdichte luminanz zwischen 0 und 1 — der Zwischenwert, aus dem sich jedes Kontrastverhältnis selbst nachrechnen lässt. Gibst du zusätzlich hintergrund an, steht die Kontrastrechnung unter dem Schlüssel kontrast, daneben die Analyse beider Farben. Jede Schwelle liegt einzeln als Wahrheitswert bei, du musst also nichts nachschlagen:
| Feld | Beispiel | Bedeutung |
|---|---|---|
verhaeltnis | 7.4 | Kontrastverhältnis zwischen 1 (identisch) und 21 (Schwarz auf Weiß) |
aa_normal | true | ab 4,5:1 — Fließtext, die maßgebliche Schwelle |
aa_gross | true | ab 3:1 — großer Text, also ab 24 px oder ab 18,7 px fett |
aaa_normal | true | ab 7:1 |
aaa_gross | true | ab 4,5:1 |
bewertung | sehr gut (AAA) | Klartext für Protokolle und Fehlermeldungen |
Grenzen der Eingabe: Farben werden als sechsstelliges HEX erwartet, mit oder ohne Rautezeichen. Kurzformen wie #fff, Farbnamen und rgb()-Schreibweisen werden mit invalid_color abgewiesen. Halbtransparente Farben kann die Rechnung grundsätzlich nicht bewerten, weil der WCAG-Kontrast für deckende Flächen definiert ist: Läuft dein Text mit opacity: .6, musst du die tatsächlich sichtbare Mischfarbe ausrechnen und diese übergeben.
Ein Design fällt selten am Fließtext durch, sondern an den Stellen, an die beim Entwurf niemand gedacht hat. Diese Paare lohnt es, automatisiert zu prüfen:
| Stelle | Nötig | Typischer Fehler |
|---|---|---|
| Fließtext auf Seitenhintergrund | 4,5:1 | helle Grautöne für Nebentexte |
| Platzhaltertext im Eingabefeld | 4,5:1 | das Grau, das der Browser vorgibt, reicht oft nicht |
| Weiße Schrift auf Markenfarbe | 4,5:1 | Gelb- und Grüntöne fallen fast immer durch |
| Fehlermeldung in Rot auf Weiß | 4,5:1 | reines #ff0000 erreicht nur 4,0:1 |
| Feldrahmen, Icons, Diagrammlinien | 3:1 | dünne hellgraue Rahmen |
| Fokusrahmen gegen die angrenzende Fläche | 3:1 | der voreingestellte Rahmen wurde wegformatiert |
| deaktivierte Schaltflächen | keine Anforderung | wird oft unnötig repariert |
Zwei Dinge, die eine reine Kontrastzahl nicht abbildet: Wird ein Link im Fließtext nur durch seine Farbe kenntlich gemacht, verlangt die gängige Auslegung zusätzlich 3:1 gegenüber der umgebenden Textfarbe — die einfachere Lösung heißt Unterstreichung. Und geprüft wird immer die Farbe, die am Ende auf dem Schirm liegt, nicht der Wert im Design-Token: Dasselbe Grau hat auf einer leicht getönten Karte ein anderes Verhältnis als auf Weiß.
AA ist die gesetzlich relevante Mindestanforderung: Kontrast von mindestens 4,5:1 für normalen Text. AAA (7:1) ist die Kür für maximale Lesbarkeit. Die API liefert das exakte Kontrastverhältnis und beide Bewertungen.
Seit Juni 2025 müssen die meisten Online-Shops und digitalen Dienste in Deutschland barrierefrei sein — ausreichender Farbkontrast ist eine der prüfbarsten Anforderungen. Ein automatischer Kontrast-Check im Build verhindert, dass unzugängliche Farbpaare live gehen.
HEX, RGB und HSL in alle Richtungen, inklusive Kurzformen wie #fff. Praktisch für Design-Token-Pipelines, die je nach Zielplattform verschiedene Formate brauchen.
Nein — das WCAG-Kontrastverhältnis ist für flächige Farbpaare definiert. Für Text auf Fotos gilt die Faustregel: dunkle Overlay-Fläche dazwischenlegen und deren Farbe gegen den Text prüfen.
WCAG verlangt 4,5:1 für normalen Text, aber nur 3:1 für großen Text und grafische Bedienelemente wie Icons oder Rahmen. Die API liefert das rohe Verhältnis — du wendest die Schwelle deines Falls an.
Aktuell ist alles in der Beta komplett kostenlos — keine Kreditkarte, keine Laufzeit. Nach dem Verkaufsstart beginnen die Tarife bei 4,50 € pro Monat (100.000 Aufrufe) — bewusst rund die Hälfte des üblichen Marktpreises. Wer in der Beta dabei ist, wird vor jeder Umstellung informiert.
E-Mail-Adresse in das Formular auf dieser Seite eintragen — der API-Schlüssel erscheint sofort, ohne Bestätigungs-Wartezeit. Damit hast du 1.000 Aufrufe pro Monat frei. Der Schlüssel wird als Hash gespeichert und nur einmal angezeigt, also direkt sicher ablegen.
E-Mail eintragen, Schlüssel erscheint sofort auf der Seite. Kein Konto, keine Kreditkarte, keine Freischaltung durch uns.
Ein einziger HTTP-Aufruf mit deinem Schlüssel im Kopf — aus jeder Programmiersprache, jedem Framework, jedem Automatisierungswerkzeug.
Du bekommst sauberes JSON oder die fertige Datei zurück. Fehler kommen als klare deutsche Meldung, nicht als Rätsel.
GET /v1/farbe?farbe=%230f5d57&hintergrund=%23ffffff
Wir legen die Preise jetzt schon offen, damit du planen kannst. Beta-Nutzer werden rechtzeitig informiert, bevor sich etwas ändert — niemand wird automatisch in einen bezahlten Tarif überführt.
Alle Preise zuzüglich Umsatzsteuer. Monatlich kündbar, keine Mindestlaufzeit, keine Einrichtungsgebühr.
Verwandt: Feiertags-API · MwSt-Rechner · CSV ↔ JSON · Markdown → HTML