Verificatore di contrasto
Due colori in ingresso, il rapporto in uscita e un verdetto per ogni dimensione che le WCAG valutano separatamente. Quando una coppia non passa, lo strumento cerca il colore più vicino che passa senza spostare la tua tinta, così la correzione resta in linea con il marchio. Il valore più recente dell'APCA sta a fianco, segnalato chiaramente come non ancora standard.
| Dove viene usato | Minimo | AA | AAA |
|---|
Testo grande, da 24 px in su
Testo corrente a dimensione normale, il caso che quasi ogni pagina deve davvero superare.
Che cosa misura davvero il rapporto
Ogni colore viene convertito in una luminanza relativa: una somma pesata dei canali rosso, verde e blu dopo aver annullato la curva gamma sRGB, con il verde che pesa di più perché è quello a cui l'occhio è più sensibile. Il rapporto è la luminanza più chiara più una piccola costante, divisa per quella più scura più la stessa costante. È quella costante a impedire che la scala scappi all'infinito contro il nero puro, ed è anche il motivo per cui la formula è più indulgente con gli sfondi scuri di quanto lo sia l'occhio della maggior parte delle persone.
Perché una sola coppia riceve più verdetti
Le WCAG non valutano una coppia di colori una volta sola. Al testo grande è concessa un'asticella più bassa rispetto al testo corrente, perché la dimensione fa parte del lavoro che altrimenti spetterebbe al contrasto, e i componenti dell'interfaccia — il bordo di una casella, un anello di focus — vengono valutati di nuovo a parte. Una palette che non passa per il corpo del testo può essere perfettamente corretta per un titolo, perciò la tabella riporta ogni caso invece di un unico esito.
Mantenere la tinta quando correggi
Il rimedio abituale per una coppia bocciata è ripiegare su un grigio più scuro, il che svuota di colore un marchio senza che nessuno se ne accorga. Il suggerimento qui sposta solo la luminosità, del passo più piccolo che supera la soglia, e lascia tinta e saturazione dove le hai messe. È lo stesso colore, solo spinto quel tanto che basta per essere leggibile.
Sul valore APCA
L'APCA è il modello di contrasto in sviluppo per la prossima versione delle linee guida. Tiene conto di cose che il rapporto delle WCAG 2 ignora — la polarità, il peso del carattere, il modo in cui il contrasto percepito cala sugli sfondi scuri — e di solito dà ragione ai tuoi occhi là dove la formula più vecchia non lo fa. È mostrato qui perché è davvero informativo, ed è etichettato con chiarezza perché non è su di lui che vieni misurato. Oggi la conformità è il rapporto, non l'Lc.
Domande frequenti
Che cosa conta come testo grande?
18 punti, circa 24 pixel, oppure 14 punti in grassetto, circa 18,66 pixel in grassetto. Sotto quella soglia è testo normale e serve il rapporto più alto.
I miei grigi passano sul bianco ma non sullo scuro. Perché?
La formula delle WCAG 2 non è simmetrica nel modo in cui lo è la percezione. Il testo chiaro su fondo scuro appare all'occhio meno contrastato di quanto suggerisca il rapporto, ed è proprio una delle lacune che l'APCA è nato per colmare. Se la coppia passa per un soffio sullo scuro, dai retta ai tuoi occhi e spingi un po' di più.
Il rapporto vale anche per icone e bordi?
Sì, a 3:1, in base alla regola sul contrasto degli elementi non testuali. Copre le parti di un controllo che devi vedere per usarlo — il bordo di un campo, un interruttore, un indicatore di focus — ma non la grafica decorativa né un logo.
Quello che scrivo qui viene mandato da qualche parte?
No. I colori non lasciano mai la pagina, e non viene caricato né salvato nulla.
Realizzato dal team GO AI. Convertitore OKLCH · La nostra dichiarazione di accessibilità · Tutti gli strumenti gratuiti