Differenza di luminosità W3C
Confronti due colori con il test storico di luminosità del W3C: il nero contro il bianco differisce di 255, ben oltre i 125 richiesti per superarlo. Utile per ripetere vecchie verifiche; per le decisioni attuali sull’accessibilità usi un controllo di contrasto WCAG. Gratis nel Suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Esempio risolto
- Colore 1
- #000
- Colore 2
- #fff
- Colore 1
- #000000
- Colore 2
- #FFFFFF
- Luminosità 1
- 0
- Luminosità 2
- 255
Questo calcolatore confronta due colori esadecimali con la formula storica della luminosità percepita associata alla bozza AERT del W3C. Converte ogni colore in un valore ponderato, calcola la differenza assoluta e indica se supera 125. Il risultato deterministico comprende colori normalizzati, entrambe le luminosità, differenza, soglia e verdetto. È utile per riprodurre vecchi audit, ma non sostituisce il rapporto di contrasto previsto dalle WCAG moderne.
Che cosa misura il test storico della luminosità
Il test stima quanto chiaro o scuro appaia ogni colore assegnando pesi diversi ai canali rosso, verde e blu. Poiché la vista umana è più sensibile al verde, poi al rosso e infine al blu, il calcolo usa 299 per il rosso, 587 per il verde e 114 per il blu, dividendo la somma per 1000. La capacità calcola le due luminosità e prende la loro differenza assoluta.
Il risultato supera il test soltanto se è maggiore di 125; esattamente 125 non è sufficiente. L’ordine dei colori non cambia quindi il verdetto. Questa operazione misura solo la separazione di luminosità: non applica la formula storica complementare della differenza cromatica né produce il rapporto di contrasto richiesto dalle WCAG attuali.
La usi per riprodurre una regola precedente, confrontare strumenti datati o mantenere un sistema che cita esplicitamente questa formula. Per nuovi progetti di accessibilità, consideri il dato come informazione aggiuntiva e non come prova completa di conformità.
Come inserire i colori e leggere la risposta
Inserisca ogni colore in notazione RGB esadecimale, preceduto dal cancelletto. Sono accettate sia la forma breve a tre cifre, per esempio #0AF, sia quella completa a sei, per esempio #00AAFF. I valori brevi vengono espansi ripetendo ogni cifra e i colori restituiti sono normalizzati a sei cifre maiuscole.
Canali alfa, nomi CSS, funzioni rgb(), spazi e valori privi di cancelletto vengono rifiutati senza interpretazioni arbitrarie. La visualizzazione non modifica dunque i casi vicini alla soglia.
Come usare il risultato negli audit automatici
Conservi i colori normalizzati e la differenza restituita nel registro dell’audit, così un’altra persona potrà riprodurre il verdetto senza affidarsi a una schermata o al parser del browser. Nelle automazioni legga passes e utilizzi i valori dettagliati per report e diagnosi. Un esito negativo significa solo che la coppia non supera la soglia storica; un esito positivo significa esclusivamente che la supera.
Nessuno dei due dimostra un livello WCAG moderno, perché le regole correnti impiegano luminanza relativa, rapporto di contrasto e soglie legate al testo. Se il progetto richiede entrambi i criteri, esegua questo controllo storico e un test WCAG separato.
Casi d'uso
Riprodurre un vecchio audit di accessibilità
Ricalcoli un risultato storico con la ponderazione esatta e la soglia strettamente maggiore.
Esaminare sistemi grafici archiviati
Documenti le prestazioni di vecchie palette secondo il test usato quando furono create.
Domande frequenti
Quale formula usa questo calcolatore?
Calcola (299 × rosso + 587 × verde + 114 × blu) / 1000 per ogni colore e poi prende la differenza assoluta.
Quale valore supera il test storico?
La differenza deve essere maggiore di 125. Un valore esattamente pari a 125 non supera il test.
Un esito positivo garantisce il contrasto WCAG attuale?
No. Le WCAG moderne usano luminanza relativa e rapporto di contrasto; questo è un diverso test storico.
Quali formati di colore sono accettati?
Usi la notazione #RGB o #RRGGBB. Alfa, nomi CSS, sintassi rgb() e spazi esterni non sono accettati.
L’ordine dei colori è importante?
No. Poiché la differenza è assoluta, invertire i colori conserva differenza e verdetto.
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/brightness-diff-w3c \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color_1":"#000000","color_2":"#FFFFFF"}'const res = await fetch("https://api.kit.forhosting.com/color/brightness-diff-w3c", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color_1": "#000000",
"color_2": "#FFFFFF"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/brightness-diff-w3c",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color_1": "#000000",
"color_2": "#FFFFFF"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/brightness-diff-w3c", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color_1":"#000000","color_2":"#FFFFFF"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color_1":"#000000","color_2":"#FFFFFF"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/brightness-diff-w3c", 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_1": "#000000",
"color_2": "#FFFFFF"
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.brightness_diff_w3c",
"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.
Limiti
max_color_chars | 7 |
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
Come inserire i colori e leggere la risposta
La risposta espone brightness_1 e brightness_2 sulla scala da 0 a 255, brightness_difference come distanza assoluta, threshold pari a 125 e passes come booleano. I numeri mostrati sono arrotondati a tre decimali per rendere stabile il JSON, mentre il verdetto usa il valore non arrotondato. Scambiando color_1 e color_2 cambiano posto solo le luminosità individuali; differenza e verdetto restano invariati.
Come usare il risultato negli audit automatici
Ogni richiesta API costa $0.002; nel browser opera lo stesso risolutore deterministico, senza rete, casualità, data o stato nascosto.
Casi di integrazione
Proteggere i test di regressione
Confronti coppie consolidate e rilevi modifiche a una regola di accettazione precedente.
Domande tecniche
Quanto costa una richiesta API?
Ogni richiesta API costa $0.002. Il calcolo nel browser avviene localmente con la stessa logica deterministica.