Farbkontrast prüfen

Do4U prüft den Kontrast deiner Marken- und Website-Farben. Du gibst deine Farben ein, eine je Zeile, und schreibst dazu, wofür jede Farbe ist: Text, Hintergrund, Akzent (zum Beispiel ein Button) oder Rahmen. Der Code rechnet für jedes Paar das Kontrastverhältnis mit der Formel der WCAG und zeigt, welche Stufen es erreicht: AA und AAA für normalen und großen Text und 3:1 für Rahmen, Icons und Button-Flächen. Die Werte werden nicht aufgerundet. Für jedes Paar, das nicht besteht, bekommst du die nächste Farbe, die besteht, einmal dunkler und einmal heller, im selben Farbton. Do4U baut auch eine angepasste Palette und prüft sie noch einmal als Ganzes. Du exportierst die Palette als CSS-Variablen, SCSS-Variablen oder JSON, und der Export entsteht in deinem Browser. Alles läuft im Code, ohne KI, und ist kostenlos.

Jetzt ausprobieren Preise

Kostenlos und ohne Konto: Kontrast-Rechner →

Für wen

Für Designer, Entwickler, Agenturen und Website-Betreiber, die Markenfarben wählen oder einen Styleguide bauen und Texte und Buttons wollen, die alle lesen können.

Typische Anwendungen

Eine neue Markenpalette prüfen, bevor das Design beginnt
Ein Grau für Nebentext finden, das AA noch besteht
Button-, Link- und Rahmenfarben gegen den Seitenhintergrund prüfen
Die angepassten Farben als CSS-Variablen für dein Stylesheet exportieren

Beispiel

Eingabe

#1a1a1a Text #777777 Text Nebentext #ffffff Hintergrund #cccccc Rahmen

Ergebnis

#1a1a1a auf #ffffff: 17,4:1, besteht AA und AAA #777777 auf #ffffff: 4,47:1, besteht AA für normalen Text nicht (für großen Text schon). Dunkler: #767676 → 4,54:1. Heller: nicht möglich #cccccc auf #ffffff: 1,6:1, besteht den Nicht-Text-Kontrast von 3:1 nicht. Dunkler: #949494 → 3,03:1 Export (angepasst): :root { --color-text: #1a1a1a; --nebentext: #767676; --color-background: #ffffff; --color-border: #949494; }

Ein festes Beispiel, gekürzt. Echte Ergebnisse sind KI-generiert: Bitte prüf sie.

Preis und Grenzen

Preis: kostenlos, bis zu 30 Prüfungen am Tag
Verfügbar mit: Free, Mit Paket
Eingabegrenze: Bis zu 3.000 Zeichen je Datei

Datenschutz

Verarbeitet auf eigenen Servern in der EU (Polen). Eingaben und Ergebnisse werden nach 7 Tagen (Free) bzw. 30 Tagen (Pakete) gelöscht – oder direkt nach der Anzeige, wenn du das Speichern abwählst. Bilder löschen wir gleich nach der Verarbeitung.

In der API

Werkzeugname: contrast_check. Leg einen Auftrag mit POST /api/v1/jobs an und hol das Ergebnis mit GET /api/v1/jobs/{id}. Den API-Schlüssel findest du in deinem Konto.

curl -X POST https://do4u.eu/api/v1/jobs \
  -H "Authorization: Bearer d4u_…" -H "Content-Type: application/json" \
  -d '{"tool": "contrast_check", "colors": ["#1a1a1a text", "#ffffff background", "#0066cc accent"]}'

Zur API-Dokumentation →

Fragen und Antworten

Wie wird das Kontrastverhältnis gerechnet?

Mit der Formel der WCAG 2.2: zuerst die relative Leuchtdichte jeder Farbe, dann (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere Farbe ist. Das Ergebnis liegt zwischen 1:1 und 21:1. Die Werte werden ohne Runden verglichen, deshalb erreicht 4,49:1 die Grenze 4,5:1 nicht, und die Anzeige rundet nie auf.

Welche Paare werden geprüft?

Text wird auf jedem Hintergrund und auf Akzentfarben geprüft, gegen 4,5:1 und 7:1 für normalen Text und 3:1 und 4,5:1 für großen Text. Akzent- und Rahmenfarben werden auf dem Hintergrund gegen 3:1 für den Nicht-Text-Kontrast geprüft. Eine Farbe ohne Rolle wird mit allen anderen Farben verglichen.

Wie entstehen die vorgeschlagenen Farben?

Nur die Helligkeit ändert sich, im Farbraum OKLCH; der Farbton bleibt gleich. Do4U sucht die nächste Farbe, die besteht, einmal dunkler und einmal heller, und prüft sie als Hex-Code noch einmal. Kann auf einem Hintergrund keine Farbe bestehen, steht das im Ergebnis.

Wird mein Text gespeichert?

Nur so lange wie nötig: 7 Tage bei Free, 30 Tage mit Paket – oder gar nicht, wenn du das Speichern abwählst. Verarbeitet wird auf eigenen Servern in der EU (Polen).

Kann ich das Ergebnis direkt verwenden?

Die Ergebnisse sind KI-generiert. Lies sie bitte, bevor du sie veröffentlichst oder verschickst.

Passende Werkzeuge

Barrierefreiheits-Check
Prüft eine Seite auf häufige Barrieren und erklärt, wie du sie behebst.
Design-Feedback aus Screenshot
Lade einen Screenshot einer Seite oder App hoch und erhalte nummerierte, konkrete Hinweise zu Knopfgröße, Kontrast, Text im Bild, Hierarchie und Abstand, jeweils mit einem Rahmen im Bild. Eine KI-Einschätzung, keine Messung.
Alt-Texte
Kurze Bildbeschreibungen für Screenreader und Suchmaschinen.

Alle Werkzeuge →