Barrierefreie Textfarbe
Korrigieren Sie kontrastschwachen Text, ohne den Farbton zu verlieren: Grau #888888 auf Weiß erreicht nur 3.54 zu 1 und wird deshalb zu #767676 abgedunkelt, mit 4.54 zu 1 knapp über dem Ziel von 4.5. Nur die Helligkeit ändert sich. Kostenlos in Ihrem Browser.
- Kostenlos
- Läuft in Ihrem Browser
- Ohne Anmeldung
- Ihre Daten bleiben auf Ihrem Gerät
Im Browser ausführen – kostenlos
Rechenbeispiel
- Hintergrund
- #ffffff
- Text
- #888888
- Zielverhältnis
- 4,5
- Ursprüngliches Verhältnis
- 3,54
- Vorgeschlagenes Verhältnis
- 4,54
- Richtung
- darken
- Helligkeit vorher
- 53,33
Dieses Vorschlagstool für barrierefreie Textfarben nimmt eine hexadezimale Hintergrundfarbe, eine hexadezimale Starttextfarbe und ein WCAG-Kontrastziel entgegen und liefert eine vorgeschlagene Textfarbe, die dieses Verhältnis erfüllt, indem nur die HSL-Helligkeit verschoben wird. Farbton und Sättigung bleiben fest, sodass ein Markenblau blau bleibt, während es dunkel oder hell genug wird, um AA oder AAA auf der angegebenen Fläche zu bestehen. Erfüllt die Startfarbe das Ziel bereits, wird sie unverändert zurückgegeben und als nicht angepasst gekennzeichnet. Gestalter, Autoren von Design-Tokens und CI-Aufträge nutzen das, wenn ein Kontrastprüfer nicht reicht: Sie brauchen einen deterministischen Ersatz-Hexwert, nicht nur ein Bestanden-oder-Durchgefallen-Kennzeichen. Es gibt keine Netzwerkanrufe, Zufallskeime oder Uhrablesungen.
Wie eine Helligkeitssuche ein WCAG-Kontrastziel erfüllt
Kontrast im Web ist kein Geschmacksurteil. Die Web Content Accessibility Guidelines definieren ein einziges Kontrastverhältnis aus der relativen Leuchtdichte, damit Fließtext, Schaltflächen und Beschriftungen für Menschen mit eingeschränktem Sehvermögen lesbar bleiben. Dieses Vorschlagstool startet von Ihrem Hintergrund-Hexwert und einem Starttext-Hexwert und ändert nur die Helligkeit dieser Textfarbe in HSL, bis das WCAG-2.x-Verhältnis gegen den Hintergrund das von Ihnen gewünschte Ziel erreicht.
Farbton und Sättigung bleiben stehen, sodass ein Markennavy navy bleibt und ein Markenrot rot bleibt; nur wie hell oder dunkel die Tinte ist, bewegt sich. Die Engine linearisiert jeden sRGB-Kanal mit der offiziellen stückweisen Kurve, bildet die Leuchtdichte mit den Gewichten 0.2126, 0.7152 und 0.0722 und berechnet die hellere Leuchtdichte plus 0.05 geteilt durch die dunklere plus 0.05.
Anschließend wandert sie die HSL-Helligkeit in deterministischen Zehntelprozenten Richtung Schwarz und Richtung Weiß, wandelt jeden Schritt zurück in 8-Bit-RGB und behält den ersten quantisierten Hexwert in jeder Richtung, der das ungerundete Ziel erfüllt. Der Kandidat mit der kleineren Helligkeitsänderung gewinnt; bei Gleichstand wird Nachdunkeln bevorzugt, die übliche Korrektur für graue Schrift auf einer hellen Karte. Erfüllt die Startfarbe das Ziel bereits, wird sie unverändert zurückgegeben, damit Token nicht grundlos umgeschrieben werden.
Es gibt kein zufälliges Jitter, keine Netzabfrage und keine datumsabhängige Abkürzung: dieselben drei Eingaben erzeugen stets denselben vorgeschlagenen Hexwert und dieselben Prüfkennzeichen.
Wo ein Vorschlagstool für barrierefreie Textfarben seinen Platz verdient
Produktteams treffen diese Seite, wenn ein Markengrau auf einer Marketingfolie elegant wirkt, aber als Fließtext auf einer weißen Karte scheitert, wenn ein Dunkelmodus-Thema aus hellen Token erzeugt wird, oder wenn juristische Beteiligte einen Ersatz-Hexwert statt einer Bildschirmfoto-Meinung verlangen. Gestalter fügen eine Fläche und eine Starttinte aus Figma oder einer Token-Datei ein und nehmen den vorgeschlagenen Hexwert zurück in die Palette, statt einen Helligkeitsregler nach Augenmaß zu schieben. QA- und Barrierefreiheitsspezialisten hängen das ursprüngliche Verhältnis, das vorgeschlagene Verhältnis und den vorgeschlagenen Hexwert an Tickets, damit Entwickler das genaue Paar korrigieren.
Inhalts- und Marketingteams prüfen, ob Kampagnenfarben noch einen zulässigen Textbegleiter haben, wenn sie auf helle oder dunkle Site-Hintergründe gelegt werden. Wenn Sie nur ein bereits gewähltes Paar messen müssen, nutzen Sie eine Kontrastprüfer-Seite; diese Seite besitzt die Absicht, eine konforme Textfarbe vorzuschlagen.
Anwendungsfälle
Durchfallende Fließtext-Token korrigieren
Liegt ein Markengrau vor, das AA auf einer weißen Karte verfehlt, erhalten Sie den nächstgelegenen dunkleren Hexwert, der 4.5:1 besteht, ohne den Farbton zu ändern.
Tinte für Dunkelmodus und Hellmodus
Aus einer einzigen Starttextfarbe leiten Sie einen konformen Begleiter für eine helle Fläche und einen konformen Begleiter für eine dunkle Fläche ab.
Häufige Fragen
Wie wählt das Vorschlagstool für barrierefreie Textfarben einen Hexwert?
Er behält den Startfarbton und die Sättigung, wandert die HSL-Helligkeit Richtung Schwarz und Richtung Weiß und gibt den nächstgelegenen quantisierten Hexwert zurück, dessen WCAG-2.x-Kontrast das Ziel erfüllt. Ein Gleichstand bevorzugt Nachdunkeln.
Welche Zielverhältnisse können Sie anfordern?
Jede endliche Zahl von 1 bis 21 einschließlich. Der Standard ist 4.5 (AA für normalen Text). Nutzen Sie 3 für AA bei großem Text und 7 für AAA bei normalem Text.
Was passiert, wenn keine Variante meiner Farbe das Ziel erreicht?
Sie erhalten trotzdem das bessere Extrem, Schwarz oder Weiß, deutlich als nicht ausreichend gekennzeichnet. Das kommt etwa vor, wenn Sie AAA mit 7 zu 1 auf einer mittelgrauen Karte verlangen.
Ändert sich der Farbton meiner Markenfarbe?
Nein. Farbton und Sättigung bleiben fest, nur die Helligkeit ändert sich. Ein Marken-Marineblau bleibt Marineblau, nur dunkler oder heller, bis der Kontrast stimmt.
Wird eine Farbe verändert, die das Ziel schon erreicht?
Nein. Erfüllt Ihre Ausgangsfarbe den Zielkontrast bereits, kommt sie unverändert zurück und ist als nicht angepasst markiert. So werden Ihre Farbvorgaben nicht ohne Grund umgeschrieben.
Verwandte Tools
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
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/color/suggest-accessible-text \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"background":"#ffffff","text":"#888888"}'const res = await fetch("https://api.kit.forhosting.com/color/suggest-accessible-text", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"background": "#ffffff",
"text": "#888888"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/suggest-accessible-text",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"background": "#ffffff",
"text": "#888888"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/suggest-accessible-text", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"background":"#ffffff","text":"#888888"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"background":"#ffffff","text":"#888888"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/suggest-accessible-text", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"background": "#ffffff",
"text": "#888888"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.suggest_accessible_text",
"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
Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.
Limits
max_color_chars | 32 |
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. |
Technische Hinweise
Kann keine Helligkeit dieses Farbtons das Ziel erreichen — etwa AAA 7:1 auf einer mittelgrauen Karte — liefert die Engine trotzdem das bessere Extrem, Schwarz oder Weiß, und setzt meets_target auf false, damit eine Pipeline geschlossen fehlschlagen kann. Erfolgreiche API-Aufrufe werden mit $0.002 je Element berechnet; ungültige Eingaben werden nicht berechnet.
Was Sie senden, was Sie zurückerhalten und wie die Prüfung arbeitet
Senden Sie einen Hintergrund-Hexwert und einen Starttext-Hexwert. Übliche Ziele sind 3 für AA bei großem Text, 4.5 für normales AA und 7 für normales AAA; jede endliche Zahl von 1 bis 21 einschließlich wird akzeptiert, weil das der WCAG-Bereich von identischen Farben bis Schwarz auf Weiß ist. Eine kurze formula-Zeichenkette dokumentiert die Regel. Ein optionales target_ratio ist standardmäßig 4.5, die AA-Schwelle für normalen Text. Hintergrund akzeptiert auch den Alias bg; Text akzeptiert foreground, fg und color; target_ratio akzeptiert ratio und target. Fehlende Felder, Nicht-Hex-Zeichen, Alphaformen, falsche Längen, NaN, Infinity und ein Ziel außerhalb des geschlossenen Intervalls scheitern mit invalid_input und werden nicht berechnet. Bei Erfolg gibt die Antwort normalisierte sechsstellige Muster für Hintergrund, Text und Vorschlag mit druckbaren rgb-Zeichenketten zurück. original_ratio und suggested_ratio werden zur Anzeige auf zwei Nachkommastellen gerundet, während meets_target das ungerundete vorgeschlagene Verhältnis mit dem Ziel vergleicht, sodass ein gedrucktes 4.50 kein echtes 4.499 verbergen kann. adjusted sagt, ob der Hexwert tatsächlich gewandert ist; direction ist none, darken oder lighten. lightness_before und lightness_after machen den HSL-Schritt prüfbar. Das Objekt wcag meldet normal_aa, normal_aaa, large_aa und large_aaa des vorgeschlagenen Paars, damit ein Prüfer die volle Matrix sieht, nicht nur das eine erbetene Ziel. Koppeln Sie das kostenlose Browserformular mit der identischen API zu $0.002 je erfolgreichem Element, wenn eine Design-Token-Pipeline denselben Hexwert in der kontinuierlichen Integration braucht.
Wo ein Vorschlagstool für barrierefreie Textfarben seinen Platz verdient
Ingenieure verdrahten denselben Vertrag in Pull-Request-Prüfungen, die ein Token umschreiben oder ablehnen, wenn normales Text-AA unter 4.5 fiele, und lesen meets_target, damit eine unmögliche AAA-Anfrage auf Mittelgrau nicht still Schwarz veröffentlicht, als wäre es bestanden. Weil diese Fähigkeit eine reine Parse-Engine ist, gilt der veröffentlichte API-Grundpreis von $0.002 je erfolgreichem Element und eine fehlgeschlagene Prüfung wird nicht berechnet.
Integrationsbeispiele
CI-Tore, die einen Ersatz-Hexwert brauchen
Rufen Sie die API aus Pull Requests auf, um Token umzuschreiben oder abzulehnen, wenn das vorgeschlagene Paar das gewünschte WCAG-Ziel noch nicht erreichen kann.
Technische Fragen
Was geschieht, wenn keine Textfarbe dieses Farbtons das Ziel erreichen kann?
Die Engine gibt das Bessere von Schwarz oder Weiß zurück und setzt meets_target auf false. Das tritt bei manchen mittelgrauen Hintergründen auf, wenn Sie 7:1 verlangen.
Welche Farbformate werden akzeptiert?
Nur Hex: #RGB oder #RRGGBB, mit oder ohne führendes Doppelkreuz, ohne Unterscheidung der Großschreibung. rgb(), hsl(), benannte Farben und Alpha-Hex werden mit invalid_input abgelehnt.
Was kostet das Vorschlagstool für barrierefreie Textfarben?
Das Browserwerkzeug ist kostenlos und läuft lokal. API-Anfragen nutzen das vorausbezahlte KIT-Guthaben zu $0.002 je erfolgreichem Element; ungültige Eingaben werden nicht berechnet.