APCA-Kontrastrechner
Erfahren Sie, wie gut eine Textfarbe auf ihrem Hintergrund lesbar ist: Fast-Schwarz #111827 auf Weiß erreicht Lc 104.5, vertauschte Farben kehren das Vorzeichen um. Eine einzige Zahl mit Vorzeichen, die Ihre Design-Prüfungen zitieren können. 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
- Text
- #111827
- Hintergrund
- #ffffff
- Lc
- 104,5
- Lc (Betrag)
- 104,5
- Polarität
- BoW
- Lesbarkeit
- body_fluent
Dieser APCA-Kontrastrechner nimmt eine Textfarbe und eine Hintergrundfarbe als Hex-Codes entgegen und liefert den vorzeichenbehafteten Lc (Helligkeitskontrast) des Accessible Perceptual Contrast Algorithm, der in der Lesbarkeitsarbeit des WCAG-3-Entwurfs verwendet wird. Anders als das ältere WCAG-2.x-Kontrastverhältnis ist APCA polaritätssensitiv: Dunkler Text auf heller Fläche ergibt einen positiven Lc, heller Text auf dunkler Fläche einen negativen Lc ähnlicher Größe. Designer, Entwickler und Barrierefreiheitsspezialisten nutzen diese eine Zahl—zusammen mit Schriftgrößen- und Gewichtstabellen—um zu entscheiden, ob Fließtext, UI-Beschriftungen und nicht-textuelle Striche auf selbstleuchtenden Displays lesbar bleiben. Die Engine implementiert die öffentlichen Konstanten 0.0.98G-4g: Linearisierung mit Potenz 2.4, sRGB-Y-Koeffizienten, Soft-Clamp für Schwarz sowie BoW/WoB-SAPC-Skalierung. Die Ergebnisse sind vollständig deterministisch, ohne Netzwerkaufrufe, Sampling oder datumsabhängige Abkürzungen.
Was der APCA-Lc misst und wie er sich vom WCAG-2-Verhältnis unterscheidet
APCA prognostiziert den wahrgenommenen Kontrast von Text und nicht-textuellem Inhalt auf selbstleuchtenden Bildschirmen, indem Monitor-Gamma, weiche Schwarzwerte und die asymmetrische Art modelliert werden, mit der das menschliche Sehen Dunkel-auf-Hell- gegenüber Hell-auf-Dunkel-Paaren begegnet. Die Ausgabe ist ein vorzeichenbehafteter Lc, der etwa plus/minus einhundertzehn abdeckt: Nahezu schwarzer Fließtext auf reinem Weiß landet typischerweise nahe Lc neunzig oder höher, während dieselben Farben invertiert einen großen negativen Lc erzeugen.
WCAG 2.x meldet stattdessen ein einziges positives Kontrastverhältnis aus relativer Luminanz mit festen AA- und AAA-Schwellen wie 4.5 zu 1 und 7 zu 1; dieses Verhältnis ignoriert Polarität und neigt dazu, bestimmte Mitteltöne-Paare zu über- oder unterschätzen, die Menschen tatsächlich schwer lesen. Dieser Rechner liefert immer den vorzeichenbehafteten Lc, die absolute Größe, das Polaritäts-Tag BoW (black on white / dunkler Text auf hell) oder WoB (white on black / heller Text auf dunkel), das linearisierte Y jeder Farbe und ein grobes Lesbarkeitsband aus dem absoluten Lc zur schnellen Triage.
Es gibt kein Seiten-Crawling, kein CSS-Parsing, kein Opazitäts-Blending und kein Gradienten-Sampling: Sie liefern zwei explizite Hex-Farben und erhalten ein reproduzierbares Objekt für Design-Token-Gates, Barrierefreiheits-Tickets und automatisierte Palettenprüfungen, die einen numerischen Lc zitieren müssen statt einer subjektiven Screenshot-Meinung.
Wie Hex-Eingaben gelesen werden und warum der 0.0.98G-4g-Pfad deterministisch bleibt
Beide Werte müssen Hex sein: optionales führendes Rautenzeichen, drei Ziffern die auf sechs expandieren oder sechs volle Ziffern, ohne Groß-/Kleinschreibung. Alpha-Suffixe, rgb()-Funktionen, hsl()-Funktionen, benannte CSS-Farben und bloße Ganzzahlen werden mit einer Meldung abgelehnt, die das Feld nennt und zeigt, was empfangen wurde, damit ein schlechtes Token nie still zu einem Fail-Open wird. Jede Farbe ist auf zweiunddreißig Zeichen begrenzt, um Validierung günstig zu halten und versehentliches Einfügen zu blockieren.
Nach dem Parsen wird jeder Kanal nach Division durch zweihundertfünfundfünfzig auf die Potenz 2.4 erhoben und mit den APCA-sRGB-Koeffizienten 0.2126729, 0.7151522 und 0.0721750 zu Y kombiniert. Nahezu schwarze Y-Werte bei oder unter 0.022 erhalten den Soft-Clamp, damit reines Schwarz nicht übermäßig bestraft wird. Ist Hintergrund-Y größer als Text-Y, wendet der BoW-Zweig Exponenten 0.56 und 0.57 mit Skala 1.14 und Offset 0.027 an; sonst nutzt der WoB-Zweig 0.65 und 0.62 und liefert einen negativen Lc.
Extrem kleine Luminanz-Deltas werden auf null gekappt.
Wo APCA-Prüfungen in Design Systemen, Dark Mode und WCAG 3 passen
Produktteams greifen zu APCA, wenn eine Markenpalette, die WCAG 2 AA bestanden hat, im Dark Mode trüb wirkt, wenn mittelgrauer Text auf weichen Flächen menschliche Lesbarkeitstests scheitert, oder wenn Stakeholder Lc-Zahlen verlangen, die an WCAG-3-Entwurfsdiskussionen ausgerichtet sind statt nur am älteren Verhältnis. Ingenieure verdrahten denselben Vertrag in Pull-Request-Prüfungen, die eine Token-Änderung blockieren, wenn der absolute Lc primärer Körperfarben unter eine Teamschwelle wie sechzig fällt, oder sie protokollieren WoB-Werte für Dark-Theme-Hero-Überschriften, die absichtlich näher an der Fläche sitzen.
QA und Barrierefreiheitsspezialisten hängen vorzeichenbehafteten Lc und Polarität an Fehlerberichte, damit Entwickler das exakte Paar beheben statt aus einem Screenshot zu raten. Content- und Marketingteams prüfen, ob Kampagnen-Hex-Codes bei hellen oder dunklen Website-Hintergründen weiterhin die Mindestbänder für Fließtext freigeben. Kombinieren Sie ihn mit dem WCAG-2-Verhältnisprüfer, wenn Sie noch AA/AAA-Dokumentation brauchen, und mit Farbkonvertern, wenn Sie RGB- oder HSL-Zwischenwerte vor der Lc-Berechnung benötigen.
Anwendungsfälle
Design-Token- und Dark-Mode-Prüfung
Prüfen Sie jedes Text-/Hintergrund-Paar in hellen und dunklen Themes auf vorzeichenbehafteten Lc und Polarität, bevor Sie Marken-Tokens festschreiben.
Barrierefreiheits-Fehlerberichte mit Polarität
Hängen Sie vorzeichenbehafteten Lc, BoW/WoB-Polarität und das Lesbarkeitsband an, damit Ingenieure das exakte Hex-Paar beheben, nicht einen vagen Screenshot.
Häufige Fragen
Was kostet der APCA-Kontrastrechner?
Er ist auf dieser Seite kostenlos in Ihrem Browser.
Was ist Lc und warum kann er negativ sein?
Lc ist der APCA-Helligkeitskontrast. Positive Werte bedeuten dunklen Text auf hellem Hintergrund (BoW); negative Werte hellen Text auf dunklem Hintergrund (WoB). Behalten Sie das Vorzeichen bei polaritätssensitiven Berichten; nutzen Sie den Absolutwert nur beim Vergleich von Größenschwellen.
Wie unterscheidet er sich vom WCAG-Kontrastverhältnis-Prüfer?
WCAG 2.x liefert ein einziges positives Verhältnis und AA/AAA-Flags. APCA liefert einen vorzeichenbehafteten Lc mit Polarität, andere Mathematik (Y mit Potenz 2.4, Soft-Clamp für Schwarz, BoW/WoB-Exponenten) und zielt auf die Lesbarkeitsarbeit des WCAG-3-Entwurfs statt auf 4.5:1- / 7:1-Gates.
Scannt dieses Werkzeug meine Website auf Kontrastprobleme?
Nein. Es vergleicht nur zwei Hex-Farben, die Sie angeben.
Welche Farbformate akzeptiert der APCA-Rechner?
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 kein falscher Wert unbemerkt durchrutscht.
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/apca-contrast \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"text":"#111827","background":"#ffffff"}'const res = await fetch("https://api.kit.forhosting.com/color/apca-contrast", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"text": "#111827",
"background": "#ffffff"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/apca-contrast",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"text": "#111827",
"background": "#ffffff"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/apca-contrast", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"text":"#111827","background":"#ffffff"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"text":"#111827","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/apca-contrast", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"text": "#111827",
"background": "#ffffff"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.apca_contrast",
"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
Erkunden Sie Paare kostenlos im Browser, oder rufen Sie die API zu $0.002 pro erfolgreicher Anfrage auf, wenn Design-System-CI, Figma-Backends oder Token-Pipelines jedes Mal dieselbe Lc-Matrix brauchen.
Was der APCA-Lc misst und wie er sich vom WCAG-2-Verhältnis unterscheidet
Das Feld method ist auf apca_0.0.98G-4g fixiert, damit CI-Protokolle exakt dokumentieren, welcher Konstantensatz die Zahl erzeugte. Ungültige Hex-Werte, fehlende Felder, Nicht-Strings und zu lange Zeichenketten werden mit invalid_input abgelehnt und nie berechnet.
Wie Hex-Eingaben gelesen werden und warum der 0.0.98G-4g-Pfad deterministisch bleibt
Die bevorzugten Felder sind text für die Vordergrundfarbe von Tinte oder Symbol und background für die Fläche dahinter. Aliase foreground, fg, color1 und hex1 mappen auf text; bg, color2 und hex2 auf background, sodass Tabellen, Query-Strings und Formulare denselben Vertrag ohne Spaltenumbenennung nutzen.
Wo APCA-Prüfungen in Design Systemen, Dark Mode und WCAG 3 passen
Designer fügen Hex-Paare aus Figma oder einer Token-JSON ein und lesen Polarität plus ein Band wie body_preferred oder large_text, bevor sie eine Skala 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 Aufteilung—kostenlose interaktive Erkundung und eine bezahlte, identische API—entspricht dem übrigen KIT-Tier-A-Katalog und lässt Sie von einem Palette-Workshop zu einer automatisierten Pipeline wechseln, ohne das mathematische Ergebnis zu ändern.
Integrationsbeispiele
CI-Gates für WCAG-3-Entwurfsbereitschaft
Rufen Sie die API aus Pull Requests auf, um Builds fehlschlagen zu lassen, wenn der absolute Lc von Körperfarben unter die Teamschwelle fällt.
Technische Fragen
Welche Farbformate werden akzeptiert?
Nur Hex: #RGB oder #RRGGBB, mit oder ohne führendes Rautenzeichen, ohne Groß-/Kleinschreibung. rgb(), hsl(), benannte Farben und Alpha-Hex werden mit invalid_input abgelehnt.