Buchstabennote Kontrastverhaeltnis
Verwandeln Sie den Kontrast eines Farbpaars in einen Buchstaben für Ihr Review: #111827 auf Weiß erreicht 17.74 zu 1 und erhält ein A, denn die Note A beginnt bei 12 zu 1. Die Noten reichen von A bis E, darunter heißt es durchgefallen. 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
- Vordergrund
- #111827
- Hintergrund
- #ffffff
- Kontrastverhältnis
- 17,74
- Note
- A
- Bewertungsstufe
- Excellent
- Mindestbereich
- 12
Dieses Werkzeug zur Buchstabennote des Kontrastverhältnisses nimmt zwei Hex-Farben —Vordergrund und Hintergrund—, berechnet das offizielle WCAG-2.x-Kontrastverhältnis und ordnet es einer festen Buchstabenskala von A über E bis fail zu. Designer, Entwickler und Accessibility-Prüfer brauchen oft einen einzelnen Buchstaben für eine Design-Review, eine Token-Tabelle oder die Zusammenfassung eines Pull Requests, nicht nur das rohe Verhältnis und die AA/AAA-Booleans. Die Engine folgt der relativen Luminanz: jeder sRGB-Kanal wird linearisiert, die Luminanz mit den Koeffizienten 0.2126, 0.7152 und 0.0722 gewichtet, und das Verhältnis ist (heller plus 0.05) geteilt durch (dunkler plus 0.05). Die Bänder sind deterministisch: A beginnt bei zwölf zu eins, B bei sieben (AAA Normaltext), C bei vier Komma fünf (AA Normaltext), D bei drei (AA Großschrift), E bei zwei, und alles Schwächere ist fail. Ergebnisse hängen weder von Netzwerk, Zufallsstichproben noch von der Uhr ab.
Was eine Kontrast-Buchstabennote bedeutet und was die Antwort enthält
Eine Kontrast-Buchstabennote verdichtet das kontinuierliche WCAG-Kontrastverhältnis zu einem kurzen ordinalen Label, das Stakeholder scannen können, ohne Schwellentabellen auswendig zu lernen. Note A bedeutet, dass das Paar mindestens zwölf zu eins erreicht —deutlich über AAA für Normaltext und nahe am praktischen Maximum lesbarer sRGB-Paare, abgesehen von reinem Schwarz auf reinem Weiss—. Note B bedeutet mindestens sieben zu eins, die AAA-Schwelle für Normaltext.
Note C bedeutet mindestens vier Komma fünf zu eins, die bekannte AA-Schwelle für Fließtext. Note D bedeutet mindestens drei zu eins, was AA für Großschrift noch erfüllt, für kleine Körperschrift unter denselben Richtlinien aber zu schwach ist. Note E bedeutet mindestens zwei zu eins: es bleibt ein Luminanzunterschied, doch das Paar scheitert an jedem WCAG-Textkontrastkriterium.
Note fail bedeutet ein Verhältnis unter zwei zu eins —einschliesslich identischer Farben bei eins zu eins—, sodass das Paar für sinnvollen Text oder Icons auf dieser Fläche nicht verwendet werden sollte. Es gibt kein Seiten-Crawling, keine Opazitätsmischung und keine Verlaufs-Abtastung: Sie liefern zwei explizite Hex-Farben und erhalten eine reproduzierbare Note für Tickets, Design-Tokens und automatisierte Gates.
Eingabevertrag, Hex-Parsing und reproduzierbare Bandlogik
Beide Werte müssen Hex sein: optionales Hash-Zeichen, entweder drei Ziffern, die auf sechs erweitert werden (#abc wird #aabbcc), oder sechs volle Ziffern, ohne Groß-/Kleinschreibung. Alpha-Suffixe, rgb()-Funktionen, hsl()-Funktionen, benannte CSS-Farben und bare Integer werden mit einer Meldung abgelehnt, die das Feld nennt und zeigt, was empfangen wurde. Jede Farbe ist auf zweiunddreißig Zeichen begrenzt, damit die Validierung günstig bleibt und versehentliches Einfügen langer CSS-Schnipsel blockiert wird.
Nach dem Parsing werden die Kanäle mit der stückweisen WCAG-sRGB-Kurve linearisiert —unter dem Schwellenwert 0.04045 durch 12.92 teilen, sonst ((c plus 0.055) über 1.055) zur Potenz 2.4 erheben— und zur relativen Luminanz kombiniert. Die Note wird aus dem ungerundeten Gleitkomma-Verhältnis gewählt, sodass ein angezeigtes 6.99 nicht Band B beanspruchen kann, wenn das wahre Verhältnis noch unter sieben liegt.
Wo Buchstabennoten in Designsystemen, Reviews und CI hingehören
Produktteams brauchen oft eine einstellige Note für Dashboards und Design-Review-Checklisten, wenn eine volle AA/AAA-Matrix für eine Tabellenspalte oder ein Status-Badge zu breit ist. Ingenieure verdrahten denselben Vertrag in Pull-Request-Checks, die eine Token-Änderung blockieren, wenn Primär-Fließtext unter Note C fällt, oder warnen, wenn grosse Überschriften auf D sinken. QA- und Accessibility-Spezialisten hängen Note plus numerisches Verhältnis an Bug-Reports, damit Entwickler das exakte Paar korrigieren statt aus einem Screenshot zu raten.
Content- und Marketing-Teams prüfen, ob Kampagnen-Hex weiterhin mindestens C erreichen, wenn sie auf hellen oder dunklen Site-Hintergründen liegen. Kombinieren Sie das Tool mit einem vollständigen AA/AAA-Matrix-Prüfer, wenn Sie boolesche Compliance-Flags brauchen, und mit Farbkonvertierungs-Utilities, wenn Sie Hex-Werte aus RGB oder HSL ableiten müssen, bevor Sie benoten.
Anwendungsfälle
Scorecards für Design-Tokens
Bewerten Sie jedes Vordergrund-/Hintergrund-Paar einer Markenpalette mit einem einzigen Buchstaben für helle und dunkle Themes, bevor Sie Tokens festschreiben.
Häufige Fragen
Was kostet das Werkzeug zur Buchstabennote des Kontrastverhältnisses?
Es ist auf dieser Seite in Ihrem Browser kostenlos.
Wie werden Buchstabennoten aus dem Kontrastverhältnis abgeleitet?
A ≥ 12, B ≥ 7 (AAA normal), C ≥ 4.5 (AA normal), D ≥ 3 (AA gross), E ≥ 2, fail unter 2. Bänder nutzen das ungerundete WCAG-Verhältnis; das angezeigte Verhältnis wird auf zwei Dezimalstellen gerundet.
Worin unterscheidet sich das von einem WCAG-AA/AAA-Kontrastprüfer?
Ein AA/AAA-Prüfer liefert Pass/Fail-Booleans für Normal- und Großschrift. Dieses Werkzeug mappt dasselbe WCAG-Verhältnis auf eine Buchstabenskala A–E/fail für Scorecards und Badges.
Prüft dieses Werkzeug meine Website auf Kontrastprobleme?
Nein. Es bewertet nur zwei Hex-Farben, die Sie angeben.
Welche Farbformate akzeptiert das Werkzeug für die Kontrastnote?
Nur Hex-Farben mit drei oder sechs Stellen, mit oder ohne führende Raute, in Groß- oder Kleinschreibung. Farbnamen, RGB- oder HSL-Schreibweise und Transparenz werden abgelehnt, damit ein falscher Wert nie eine Note erhält.
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/contrast-grade \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"foreground":"#111827","background":"#ffffff"}'const res = await fetch("https://api.kit.forhosting.com/color/contrast-grade", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"foreground": "#111827",
"background": "#ffffff"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/contrast-grade",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"foreground": "#111827",
"background": "#ffffff"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/contrast-grade", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"foreground":"#111827","background":"#ffffff"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"foreground":"#111827","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/contrast-grade", 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": "#111827",
"background": "#ffffff"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.contrast_grade",
"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.
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
Nutzen Sie den kostenlosen Browser-Pfad für Palette-Workshops und Design-Tokens oder die API zu $0.002 pro erfolgreicher Anfrage, wenn CI und Designsysteme jedes Mal dieselbe Notenmatrix brauchen.
Was eine Kontrast-Buchstabennote bedeutet und was die Antwort enthält
Die Antwort gibt jede Farbe als normalisiertes kleines #rrggbb-Hex und eine rgb(r, g, b)-Zeichenkette wieder, meldet contrast_ratio auf zwei Dezimalstellen gerundet, liefert die Zeichenketten grade und grade_label, exponiert band_min als numerischen Boden des gewinnenden Bandes und kennzeichnet method als wcag_contrast_letter_grade, damit Router diese Landing von einem reinen AA/AAA-Prüfer unterscheiden. Ungültiges Hex, fehlende Felder, Nicht-String-Werte und zu lange Zeichenketten lösen invalid_input aus und werden nie berechnet.
Eingabevertrag, Hex-Parsing und reproduzierbare Bandlogik
Senden Sie ein JSON-Objekt mit foreground für die Text- oder Icon-Farbe und background für die Fläche dahinter. Die Aliase fg, color1, text und hex1 mappen auf die erste Farbe; bg, color2 und hex2 auf die zweite, damit Formulare und Tabellen ihre Spaltennamen behalten. Bänder sind feste Konstanten im Code; es gibt keinen Konfigurationsschalter, der die Skala pro Anfrage ändert, was Goldens, CI-Assertions und Rubriken bitweise stabil hält.
Wo Buchstabennoten in Designsystemen, Reviews und CI hingehören
Designer fügen Hex-Paare aus Figma oder einer Token-JSON-Datei ein und lesen von A bis fail, bevor sie eine Skala für helle und dunkle Themes festschreiben. Auf dieser Seite läuft die Arbeit vollständig in Ihrem Browser; über die API kostet jede erfolgreiche Abfrage $0.002, fehlgeschlagene Validierung wird nicht berechnet, und nach der Antwort wird nichts gespeichert. Diese Trennung —kostenlose interaktive Erkundung und identische bezahlte API— entspricht dem restlichen KIT-Tier-A-Katalog.
Integrationsbeispiele
Kontrast-Badges in Pull Requests
Rufen Sie die API aus der CI auf, um Builds scheitern zu lassen, wenn Hex-Paare des Primär-Fließtexts unter Note C fallen (AA-Band für Normaltext).
Zusammenfassungen der Accessibility-Review
Hängen Sie grade, grade_label und contrast_ratio an Tickets, damit Prüfer und Ingenieure eine kurze Note plus das numerische Verhältnis teilen.
Technische Fragen
Welche Farbformate werden akzeptiert?
Nur Hex: #RGB oder #RRGGBB, mit oder ohne führendes Hash, ohne Groß-/Kleinschreibung. rgb(), hsl(), benannte Farben und Alpha-Hex werden mit invalid_input abgelehnt.