ForHosting KIT · Websites auslesen & überwachen

Farbkontrast prüfen

Dieser Farbkontrastprüfer vergleicht eine Vordergrund- mit einer Hintergrundfarbe anhand der WCAG-Formel für relative Leuchtdichte.

● BetaKostenlos · im Browser

Im Browser ausführen – kostenlos API ansehen

Nutzen Sie es über WebAPIE-MailTelegramApp bald

Geben Sie drei- oder sechsstellige Hex-Farben ein, um das Kontrastverhältnis und eindeutige Ergebnisse für AA und AAA bei normalem sowie großem Text zu erhalten. Damit können Sie Komponenten kontrollieren, Barrierefreiheitsentscheidungen dokumentieren und schwer lesbare Kombinationen vor der Veröffentlichung erkennen.

So lesen Sie das Ergebnis richtig

Das ausgegebene Verhältnis beschreibt den Unterschied der relativen Leuchtdichte zwischen der helleren und dunkleren Farbe. 1:1 bedeutet identische Leuchtdichte; 21:1 ist das mögliche Maximum bei Schwarz und Weiß. WCAG verwendet unterschiedliche Grenzwerte, weil großer oder kräftiger Text auch mit weniger Kontrast lesbar bleibt. AA verlangt 4.5:1 für normalen und 3:1 für großen Text; bei AAA gelten 7:1 und 4.5:1. Die Antwort bewertet jede Anforderung einzeln. Als groß gilt Text ab 18 Punkt oder ab 14 Punkt in Fettschrift. Runden Sie für eine Konformitätsentscheidung nicht auf. Das angezeigte Verhältnis hat zwar zwei Dezimalstellen, die Bewertungen beruhen jedoch auf dem ungekürzten Wert. So besteht eine Kombination knapp unterhalb einer Grenze nicht allein wegen der Darstellung.

Wählen Sie den tatsächlichen Vorder- und Hintergrund

Prüfen Sie die Farben, die Menschen wirklich sehen, nicht lediglich benachbarte Muster einer Palette. Bei Fließtext ist der Vordergrund die gerenderte Schriftfarbe und der Hintergrund die endgültige Vollfarbe direkt dahinter. Untersuchen Sie Links in normalen, besuchten, Hover-, Fokus- und deaktivierten Zuständen, sofern diese Informationen vermitteln. Berücksichtigen Sie Schaltflächen, Hinweise, Abzeichen, Formulare, Diagramme und Navigation. Das Werkzeug akzeptiert deckende Farben als #RGB oder #RRGGBB. Bei Transparenz, Verläufen, Bildern, Schatten oder Mischmodi müssen Sie zuerst die resultierenden Farben am untersuchten Punkt bestimmen. Verwenden Sie bei wechselndem Hintergrund den Bereich mit dem geringsten Kontrast. Fokusdarstellung, Nicht-Text-Kontrast und Alternativen zu reiner Farbcodierung benötigen eigene Prüfungen.

Verankern Sie die Prüfung im Arbeitsablauf

Prüfen Sie früh im Entwurf, solange sich Token oder Komponenten leicht ändern lassen, und wiederholen Sie den Test nach Änderungen an Themes oder Markenfarben. Designteams können Varianten vor der Übergabe vergleichen; Entwicklungsteams können dieselbe deterministische Berechnung in Tests aufrufen und die Kennzeichen mit Komponentenaufnahmen speichern. Ein belastbares Token-Audit kombiniert jede semantische Vordergrundfarbe mit allen erlaubten Hintergründen statt nur mit einem Vorzeigebeispiel. Halten Sie Schriftgröße und -stärke fest, denn ein für großen Text bestandenes Paar kann bei normalen Beschriftungen scheitern. Die API kostet $0.002 pro Anfrage; der Browser-Runner eignet sich für schnelle Einzelprüfungen. Fehlerhafte Farben werden abgewiesen, sodass ungültige Ziffern, Alphakanäle und CSS-Namen keine Berichte verfälschen.

Anwendungsfälle

Designübergabe kontrollieren

Bestätigen Sie vor der Umsetzung, dass geplante Text- und Flächenfarben die angestrebte WCAG-Stufe erreichen.

Design-Token untersuchen

Testen Sie jedes semantische Vordergrund-Token gegen alle Hintergründe, die das Komponentensystem zulässt.

Veröffentlichungen absichern

Rufen Sie die deterministische Prüfung automatisiert auf und blockieren Sie Änderungen unterhalb vorgeschriebener Grenzen.

Häufige Fragen

Welche Farbformate werden akzeptiert?

Verwenden Sie deckende Hex-Schreibweise als #RGB oder #RRGGBB. CSS-Namen, Alphakanäle, rgb()-Funktionen, Verläufe und ungültige Werte werden abgewiesen.

Welche Grenzwerte gelten für WCAG AA?

AA verlangt mindestens 4.5:1 für normalen und 3:1 für großen Text.

Welche Grenzwerte gelten für WCAG AAA?

AAA verlangt mindestens 7:1 für normalen und 4.5:1 für großen Text.

Warum kann ein angezeigter Grenzwert durchfallen?

Die Anzeige nutzt zwei Dezimalstellen, doch die Bewertung arbeitet mit voller Genauigkeit und hebt einen knapp zu kleinen Wert nicht an.

Ändert das Vertauschen der Farben das Verhältnis?

Nein. Die Formel vergleicht helle und dunkle Leuchtdichte; das Vertauschen deckender Farben erhält Verhältnis und Ergebnisse.

Für Entwickler — API-Zugang

Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.

Endpunkt

POSThttps://api.kit.forhosting.com/web/color-contrast-check

Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.

Aufruf aus Ihrem Stack

curl -X POST https://api.kit.forhosting.com/web/color-contrast-check \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"foreground":"#1a1a1a","background":"#ffffff"}'

const res = await fetch("https://api.kit.forhosting.com/web/color-contrast-check", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "foreground": "#1a1a1a",
    "background": "#ffffff"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/color-contrast-check",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "foreground": "#1a1a1a",
    "background": "#ffffff"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/color-contrast-check", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"foreground":"#1a1a1a","background":"#ffffff"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"foreground":"#1a1a1a","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/color-contrast-check", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Beispiel-Anfrage

{
  "foreground": "#1a1a1a",
  "background": "#ffffff"
}

Beispiel-Antwort

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.color_contrast_check",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Preis

pro Anfrage$0.002

Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.

Limits

`timeout_sec`	30
`max_crawl_pages`	25

Fehler

HTTP	Code	Bedeutung
`401`	`unauthorized`	Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer).
`402`	`insufficient_balance`	Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht.
`404`	`unknown_type`	Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog.
`429`	`rate_limited`	Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt.

Vollständige KIT-Dokumentation lesen →