Calcolatore di luminanza relativa
Misuri quanta luce emette un colore secondo la formula WCAG: il grigio medio #808080 vale 0.215860500114, su una scala da 0 per il nero a 1 per il bianco. I canali RGB e i loro valori lineari sono mostrati per poter verificare la cifra. Gratis nel suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Esempio risolto
- Colore
- #808080
- Luminanza relativa
- 0,2158605001
Il calcolatore di luminanza relativa converte un colore esadecimale sRGB nella misura della luce usata per i calcoli del contrasto WCAG. Espande quando necessario la forma esadecimale abbreviata, convalida ogni cifra, normalizza i canali rosso, verde e blu, rimuove la gamma sRGB con la formula standard a tratti e combina i valori lineari con i coefficienti ufficiali. Il risultato va da 0 per il nero a 1 per il bianco. La risposta comprende inoltre il valore esadecimale normalizzato, i canali RGB interi e i tre canali linearizzati, affinché ogni passaggio sia visibile e riproducibile.
Inserisca un colore sRGB preciso
Fornisca un colore con tre o sei cifre esadecimali, con o senza il cancelletto iniziale. Per esempio, #09C viene espanso in #0099CC prima del calcolo, mentre 4A90D9 è accettato e normalizzato come #4A90D9. Il calcolatore ammette intenzionalmente soltanto queste forme esadecimali sRGB non ambigue.
Non tenta di interpretare colori con nome o funzioni CSS, non elimina il canale alfa e non limita silenziosamente valori di canale errati. Questo confine rigoroso rende utile la convalida nei design system automatizzati, nei controlli di accessibilità, negli script di compilazione e nei dati di test: un dato scorretto genera un errore di input anziché un numero plausibile ma sbagliato. Maiuscole e minuscole non modificano il calcolo e gli spazi esterni vengono rimossi; sono invece rifiutati spazi interni, cifre aggiuntive, segni non supportati e valori vuoti.
L’oggetto RGB restituito contiene canali interi da 0 a 255 e consente di verificare rapidamente come è stato interpretato il testo originale. La normalizzazione è particolarmente utile quando Lei combina notazioni abbreviate e complete, ma necessita di una rappresentazione canonica per registri, snapshot o calcoli successivi.
Comprenda il calcolo WCAG
La luminanza relativa non è la semplice media di rosso, verde e blu e non coincide con la luminosità HSL. Ogni canale sRGB a 8 bit viene prima diviso per 255. Un canale normalizzato minore o uguale a 0.04045 viene diviso per 12.92; se è maggiore, viene trasformato elevando ((canale + 0.055) / 1.055) a 2.4.
Il procedimento rimuove la curva di trasferimento sRGB e produce valori di luce lineare. Il calcolatore applica quindi i coefficienti standard: 0.2126 per il rosso, 0.7152 per il verde e 0.0722 per il blu. Il verde riceve il peso maggiore perché la vista umana è più sensibile a esso, mentre il blu riceve quello minore.
La somma ponderata è la luminanza relativa indicata, compresa fra il nero a 0 e il bianco a 1. Poiché operazioni e coefficienti sono fissi, lo stesso input valido produce sempre lo stesso output, senza rete, stato memorizzato o inferenza di modelli.
Usi la luminanza nei flussi di accessibilità
Un singolo valore di luminanza relativa descrive un colore; da solo non dichiara accessibile un testo. Per valutare il contrasto, calcoli la luminanza del primo piano e dello sfondo, identifichi il valore più chiaro L1 e quello più scuro L2, quindi usi (L1 + 0.05) / (L2 + 0.05). Confronti il rapporto con la soglia WCAG adatta al contenuto, alla dimensione del testo e al livello di conformità desiderato.
Mantenere la luminanza come capacità separata è utile quando una pipeline dispone già di una propria politica di contrasto, deve memorizzare misure normalizzate o vuole esaminare i valori intermedi durante il debug. Il calcolo presuppone colori sRGB opachi. Se il design usa trasparenze, componga prima il colore sullo sfondo effettivo; un valore esadecimale con alfa viene rifiutato perché la luminanza non sarebbe definita senza tale sfondo.
Casi d'uso
Esaminare i token di design
Calcoli e memorizzi la luminanza relativa di ogni token di colore sRGB opaco prima di applicare la politica di contrasto del progetto.
Eseguire il debug del contrasto
Esamini i canali RGB normalizzati e di luce lineare per individuare errori di interpretazione o correzione gamma in un’altra implementazione.
Creare test di accessibilità
Generi luminanze deterministiche per i colori di primo piano e sfondo usati nelle asserzioni automatiche sul contrasto WCAG.
Domande frequenti
Quale intervallo può avere la luminanza relativa?
Il risultato va da 0 per il nero sRGB a 1 per il bianco sRGB, estremi inclusi.
Quali formati di colore sono accettati?
Sono accettati colori esadecimali sRGB di tre o sei cifre, con o senza # iniziale. Nomi, funzioni RGB e valori alfa vengono rifiutati.
La luminanza relativa equivale alla luminosità HSL?
No. La luminanza relativa WCAG linearizza i canali sRGB e applica coefficienti ponderati; la luminosità HSL usa una diversa definizione geometrica.
Questo valore basta a dimostrare la conformità WCAG?
No. La conformità richiede un rapporto di contrasto tra due colori e la soglia adatta al contenuto e al livello scelto.
Perché il grigio medio #808080 resta molto sotto la metà?
Perché prima si toglie la curva gamma sRGB. Ogni canale a 128 diventa 0.215860500114 in luce lineare e, dato che rosso, verde e blu sono uguali, quello è anche il valore di luminanza.
Strumenti correlati
Per sviluppatori — accesso via API
Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.
Endpoint
Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.
Chiamala dal tuo 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)Esempio di richiesta
{
"color": "#4A90D9"
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.relative_luminance",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.
Prezzi
Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.
Errori
| HTTP | Codice | Significato |
|---|---|---|
401 | unauthorized | Chiave API mancante o non valida: controlla l'header Authorization. |
402 | insufficient_balance | Credito esaurito: ricarica per continuare a eseguire attività. |
404 | unknown_type | Tipo di attività sconosciuto: controlla il campo type della richiesta. |
429 | rate_limited | Troppe richieste in poco tempo: rallenta e riprova tra qualche secondo. |
Note tecniche
Comprenda il calcolo WCAG
I canali lineari e il valore finale sono arrotondati a dodici decimali per rendere stabile il JSON senza cambiare l’esito pratico di accessibilità.
Usi la luminanza nei flussi di accessibilità
L’API costa $0.002 per elemento, mentre l’esecuzione nel browser usa lo stesso calcolo deterministico per controlli immediati.
Domande tecniche
Quanto costa l’API?
Ogni elemento costa $0.002. Lei può inoltre eseguire gratuitamente il calcolo nel browser.