Relative Luminanz berechnen
Messen Sie, wie viel Licht eine Farbe nach der WCAG-Formel abgibt: Mittelgrau #808080 ergibt 0.215860500114, auf einer Skala von 0 für Schwarz bis 1 für Weiß. Die RGB-Kanäle und ihre linearen Werte werden angezeigt, damit Sie das Ergebnis prüfen 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
- Farbe
- #808080
- Relative Luminanz
- 0,2158605001
Der Rechner wandelt eine sRGB-Hexfarbe in die relative Luminanz für WCAG-Kontrastberechnungen um. Er erweitert bei Bedarf die Kurzschreibweise, prüft jede Ziffer, normalisiert den roten, grünen und blauen Kanal, entfernt die sRGB-Gammakurve mit der stückweisen Standardformel und verknüpft die linearen Werte mit den offiziellen Koeffizienten. Das Ergebnis reicht von 0 für Schwarz bis 1 für Weiß. Zusätzlich enthält die Antwort die normalisierte Hexfarbe, ganzzahlige RGB-Kanäle und alle drei linearisierten Kanäle, sodass Sie jeden Schritt nachvollziehen und reproduzieren können.
Geben Sie eine eindeutige sRGB-Farbe ein
Geben Sie eine Farbe mit drei oder sechs Hexadezimalziffern ein, wahlweise mit vorangestelltem Doppelkreuz. Beispielsweise wird #09C vor der Berechnung zu #0099CC erweitert, während 4A90D9 akzeptiert und als #4A90D9 normalisiert wird. Der Rechner unterstützt bewusst nur diese eindeutigen sRGB-Hexformen.
Er errät keine benannten Farben, wertet keine CSS-Funktionen aus, entfernt keinen Alphakanal und begrenzt fehlerhafte Kanalwerte nicht unbemerkt. Diese strenge Grenze macht die Prüfung in automatisierten Designsystemen, Barrierefreiheitstests, Build-Skripten und Testdaten verlässlich: Fehlerhafte Daten erzeugen einen Eingabefehler statt einer plausiblen, aber falschen Zahl. Groß- und Kleinschreibung beeinflussen die Berechnung nicht, und äußerer Leerraum wird entfernt.
Innerer Leerraum, zusätzliche Ziffern, nicht unterstützte Zeichen und leere Werte werden dagegen abgelehnt. Das zurückgegebene RGB-Objekt enthält ganzzahlige Kanäle von 0 bis 255, damit Sie die Interpretation des Ausgangstextes sofort kontrollieren können. Die Normalisierung hilft besonders dann, wenn Kurz- und Langnotation gemischt werden, Protokolle, Snapshots oder Folgeberechnungen jedoch eine kanonische Darstellung benötigen.
Verstehen Sie die WCAG-Berechnung
Relative Luminanz ist weder der einfache Mittelwert aus Rot, Grün und Blau noch die HSL-Helligkeit. Zunächst wird jeder 8-Bit-sRGB-Kanal durch 255 geteilt. Ein normalisierter Kanal bis einschließlich 0.04045 wird durch 12.92 geteilt; ein höherer Kanal wird mit ((Kanal + 0.055) / 1.055) hoch 2.4 transformiert.
Dadurch verschwindet die sRGB-Übertragungskurve und es entstehen lineare Lichtwerte. Anschließend gelten die Standardkoeffizienten 0.2126 für Rot, 0.7152 für Grün und 0.0722 für Blau. Grün erhält das größte Gewicht, weil das menschliche Sehen dafür empfindlicher ist, Blau das kleinste.
Die gewichtete Summe ergibt die gemeldete relative Luminanz zwischen 0 für Schwarz und 1 für Weiß. Da alle Operationen und Koeffizienten feststehen, liefert dieselbe gültige Eingabe stets dieselbe Ausgabe, ganz ohne Netzwerk, gespeicherten Zustand oder Modellinferenz.
Nutzen Sie Luminanz in Barrierefreiheitsabläufen
Ein einzelner Luminanzwert beschreibt nur eine Farbe und bestätigt allein noch keine barrierefreie Schrift. Berechnen Sie für eine Kontrastprüfung die Luminanz von Vorder- und Hintergrund, bestimmen Sie den helleren Wert L1 und den dunkleren Wert L2 und verwenden Sie dann (L1 + 0.05) / (L2 + 0.05). Vergleichen Sie das Verhältnis mit dem WCAG-Grenzwert für Inhalt, Schriftgröße und gewünschte Konformitätsstufe.
Eine eigenständige Luminanzfunktion eignet sich, wenn eine Pipeline bereits eigene Kontrastregeln besitzt, normalisierte Messwerte zwischenspeichern muss oder Zwischenwerte bei der Fehlersuche prüfen soll. Die Berechnung setzt deckende sRGB-Farben voraus. Bei Transparenz müssen Sie die Farbe zuerst mit ihrem tatsächlichen Hintergrund verrechnen; Hexwerte mit Alphakanal werden abgelehnt, weil die Luminanz ohne diesen Hintergrund nicht bestimmt ist.
Anwendungsfälle
Design-Tokens untersuchen
Berechnen und speichern Sie die relative Luminanz jedes deckenden sRGB-Farbtokens, bevor Sie die Kontrastregeln des Projekts anwenden.
Kontrastberechnungen debuggen
Prüfen Sie normalisierte RGB- und lineare Lichtkanäle, um Interpretations- oder Gammakorrekturfehler einer anderen Implementierung zu finden.
Barrierefreiheit automatisch testen
Erzeugen Sie deterministische Luminanzwerte für Vorder- und Hintergrundfarben in automatischen WCAG-Kontrastprüfungen.
Häufige Fragen
Welchen Wertebereich hat die relative Luminanz?
Das Ergebnis reicht einschließlich der Grenzen von 0 für sRGB-Schwarz bis 1 für sRGB-Weiß.
Welche Farbformate werden akzeptiert?
Akzeptiert werden sRGB-Hexfarben mit drei oder sechs Ziffern, mit oder ohne führendes #. Farbnamen, RGB-Funktionen und Alphawerte werden abgelehnt.
Ist relative Luminanz dasselbe wie HSL-Helligkeit?
Nein. Die WCAG-Luminanz linearisiert sRGB-Kanäle und gewichtet sie; die HSL-Helligkeit beruht auf einer anderen geometrischen Definition.
Beweist dieser Wert allein die WCAG-Konformität?
Nein. Dafür benötigen Sie ein Kontrastverhältnis aus zwei Farben und den passenden Grenzwert für Inhalt und Zielstufe.
Warum liegt Mittelgrau #808080 deutlich unter der Hälfte?
Weil zuerst die sRGB-Gammakurve entfernt wird. Jeder Kanal mit 128 wird im linearen Licht zu 0.215860500114, und da Rot, Grün und Blau gleich sind, ist das auch die Luminanz.
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/relative-luminance \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#4A90D9"}'const res = await fetch("https://api.kit.forhosting.com/color/relative-luminance", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#4A90D9"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/relative-luminance",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#4A90D9"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/relative-luminance", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#4A90D9"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#4A90D9"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/relative-luminance", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"color": "#4A90D9"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.relative_luminance",
"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
Verstehen Sie die WCAG-Berechnung
Lineare Kanäle und Endwert werden für stabiles JSON auf zwölf Dezimalstellen gerundet, ohne die praktische Barrierefreiheitsentscheidung zu verändern.
Nutzen Sie Luminanz in Barrierefreiheitsabläufen
Die API kostet $0.002 je Element, während im Browser dieselbe deterministische Berechnung für sofortige Prüfungen läuft.
Technische Fragen
Was kostet die API?
Jedes Element kostet $0.002. Im Browser können Sie die Berechnung auch kostenlos ausführen.