Voto lettera del contrasto
Trasformi il contrasto di una coppia di colori in una lettera da inserire in una revisione: #111827 su bianco raggiunge 17.74 a 1 e ottiene una A, perché il voto A parte da 12 a 1. I voti vanno da A a E e, sotto, bocciato. Gratis nel Suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Esempio risolto
- Primo piano
- #111827
- Sfondo
- #ffffff
- Rapporto di contrasto
- 17,74
- Voto
- A
- Etichetta del livello
- Excellent
- Soglia minima
- 12
Questo strumento di voto a lettera del rapporto di contrasto prende due colori esadecimali —primo piano e sfondo—, calcola il rapporto di contrasto ufficiale WCAG 2.x e lo colloca su una scala fissa di lettere da A a E fino a fail. Designer, sviluppatori e revisori di accessibilità spesso vogliono una sola lettera per una design review, un foglio di token o il riepilogo di una pull request, non solo il rapporto grezzo e i booleani AA/AAA. Il motore segue la luminanza relativa: ogni canale sRGB è linearizzato, la luminanza è ponderata con i coefficienti 0.2126, 0.7152 e 0.0722, e il rapporto è (più chiaro più 0.05) su (più scuro più 0.05). Le fasce sono deterministiche: A inizia a dodici a uno, B a sette (AAA testo normale), C a quattro virgola cinque (AA testo normale), D a tre (AA testo grande), E a due, e tutto ciò che è più debole è fail. I risultati non dipendono da rete, campionamento casuale o dall'orologio.
Cosa significa un voto a lettera di contrasto e cosa contiene la risposta
Un voto a lettera di contrasto comprime il rapporto WCAG continuo in un'etichetta ordinale breve che le parti interessate possono leggere senza memorizzare tabelle di soglie. Il voto A significa che la coppia raggiunge almeno dodici a uno —ben oltre AAA per testo normale e vicino al tetto pratico delle coppie sRGB leggibili, salvo nero puro su bianco puro—. Il voto B significa almeno sette a uno, la soglia AAA per testo normale.
Il voto C significa almeno quattro virgola cinque a uno, la soglia AA familiare del corpo del testo. Il voto D significa almeno tre a uno, che supera ancora AA per testo grande ma è troppo debole per una tipografia di corpo piccola secondo le stesse linee guida. Il voto E significa almeno due a uno: resta una differenza di luminanza, ma la coppia fallisce ogni criterio WCAG di contrasto del testo.
Il voto fail significa un rapporto sotto due a uno —incluse colori identici a uno a uno—, quindi la coppia non va usata per testo o icone significativi su quella superficie. Non c'è crawl di pagina, mescolanza di opacità né campionamento di gradienti: Lei fornisce due hex espliciti e riceve un voto riproducibile adatto a ticket, token di design e gate automatizzati.
Contratto di input, parsing hex e logica delle fasce riproducibile
Entrambi i valori devono essere hex: cancelletto opzionale, tre cifre che si espandono a sei (#abc diventa #aabbcc) o sei cifre complete, senza distinzione di maiuscole. Suffissi alpha, funzioni rgb(), hsl(), colori CSS con nome e interi nudi sono rifiutati con un messaggio che nomina il campo e mostra ciò che è stato ricevuto. Ogni colore è limitato a trentadue caratteri per validare in modo economico e bloccare incolla accidentali di CSS lunghi.
Dopo il parsing, i canali sono linearizzati con la curva sRGB a tratti di WCAG —dividere per 12.92 sotto la soglia 0.04045, altrimenti elevare ((c più 0.055) su 1.055) alla potenza 2.4— e combinati in luminanza relativa. Il voto è scelto dal rapporto in virgola mobile non arrotondato, così un 6.99 visualizzato non può rivendicare la fascia B se il rapporto vero resta sotto sette.
Dove i voti a lettera rientrano in design system, revisioni e CI
I team di prodotto spesso necessitano di un punteggio di un carattere per dashboard e checklist di design review quando una matrice AA/AAA completa è troppo ampia per una colonna di foglio di calcolo o un badge di stato. Gli ingegneri collegano lo stesso contratto a controlli di pull request che bloccano un cambio di token se il testo principale del corpo scende sotto il voto C, o avvisano quando i titoli grandi scendono a D.
Specialisti di QA e accessibilità allegano voto più rapporto numerico ai report di bug così si corregge la coppia esatta invece di indovinare da uno screenshot. I team di contenuto e marketing verificano che gli hex di campagna ottengano ancora almeno C su sfondi chiari o scuri del sito. La combini con un controllore completo di matrice AA/AAA quando servono flag booleani di conformità, e con utilità di conversione colore quando deve derivare hex da RGB o HSL prima di valutare.
Casi d'uso
Schede di punteggio dei token di design
Valuti con una sola lettera ogni coppia primo piano/sfondo di una palette di brand per temi chiari e scuri prima di bloccare i token.
Domande frequenti
Quanto costa lo strumento di voto a lettera del rapporto di contrasto?
È gratuito nel Suo browser in questa pagina.
Come si mappano i voti a lettera a partire dal rapporto di contrasto?
A ≥ 12, B ≥ 7 (AAA normale), C ≥ 4.5 (AA normale), D ≥ 3 (AA grande), E ≥ 2, fail sotto 2. Le fasce usano il rapporto WCAG non arrotondato; il rapporto visualizzato è arrotondato a due decimali.
In che cosa differisce da un controllore di contrasto WCAG AA/AAA?
Un controllore AA/AAA restituisce booleani di superato/fallito per testo normale e grande. Questo strumento mappa lo stesso rapporto WCAG su una scala di lettere A–E/fail per schede di punteggio e badge.
Questo strumento analizza il mio sito per problemi di contrasto?
No. Valuta solo due colori hex che Lei fornisce.
Quali formati di colore accetta lo strumento di voto del contrasto?
Solo colori esadecimali a tre o sei cifre, con o senza cancelletto iniziale, in maiuscolo o minuscolo. Nomi di colore, notazioni RGB o HSL e trasparenza vengono rifiutati, così un valore errato non riceve mai un voto.
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/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)Esempio di richiesta
{
"foreground": "#111827",
"background": "#ffffff"
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.contrast_grade",
"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
Usi il percorso gratuito del browser per workshop di palette e token, oppure l'API a $0.002 per richiesta riuscita quando la CI e i design system necessitano della stessa matrice di voti ogni volta.
Cosa significa un voto a lettera di contrasto e cosa contiene la risposta
La risposta ripete ogni colore come hex #rrggbb minuscolo normalizzato e una stringa rgb(r, g, b), riporta contrast_ratio arrotondato a due decimali, restituisce le stringhe grade e grade_label, espone band_min come pavimento numerico della fascia vincente e etichetta method come wcag_contrast_letter_grade così i router distinguono questa pagina da un semplice controllore AA/AAA. Hex non validi, campi mancanti, valori non stringa e stringhe troppo lunghe sollevano invalid_input e non vengono mai fatturati.
Contratto di input, parsing hex e logica delle fasce riproducibile
Invii un oggetto JSON con foreground per il colore di testo o icona e background per la superficie dietro. Gli alias fg, color1, text e hex1 mappano al primo colore; bg, color2 e hex2 al secondo, così form e fogli di calcolo mantengono i nomi di colonna. Le fasce sono costanti fisse nel codice; non c'è un interruttore di configurazione che cambi la scala per richiesta, il che mantiene goldens, asserzioni CI e rubriche stabili bit a bit.
Dove i voti a lettera rientrano in design system, revisioni e CI
I designer incollano coppie hex da Figma o da un JSON di token e leggono da A a fail prima di fissare una scala per temi chiari e scuri. In questa pagina il lavoro viene eseguito interamente nel Suo browser; tramite l'API ogni consultazione riuscita costa $0.002, la validazione fallita non viene addebitata e nulla viene memorizzato dopo la risposta. Quella separazione —esplorazione interattiva gratuita e API a pagamento identica— allinea al catalogo tier A del KIT.
Casi di integrazione
Badge di contrasto sulle pull request
Chiami l'API dalla CI per far fallire le build quando le coppie hex del corpo principale scendono sotto il voto C (fascia AA testo normale).
Riepiloghi di revisione dell'accessibilità
Allegghi grade, grade_label e contrast_ratio ai ticket così revisori e ingegneri condividono un voto breve più il rapporto numerico.
Domande tecniche
Quali formati di colore sono accettati?
Solo hex: #RGB o #RRGGBB, con o senza cancelletto iniziale, senza distinzione di maiuscole. rgb(), hsl(), colori con nome e hex con alfa sono rifiutati con invalid_input.