Verificatore del rapporto di contrasto WCAG

Questo verificatore del rapporto di contrasto WCAG prende due colori hex — primo piano e sfondo — e restituisce il rapporto di contrasto ufficiale usato dalle Web Content Accessibility Guidelines, insieme a chiari indicatori di superamento o mancato superamento AA e AAA sia per il testo normale sia per il testo grande. Designer, sviluppatori e revisori usano quel rapporto per decidere se testo del corpo, pulsanti, etichette e chrome dell'interfaccia restano leggibili per persone con visione ridotta o differenze nella percezione del colore. Il motore segue la formula di luminanza relativa WCAG 2.x: ogni canale hex viene linearizzato dallo sRGB, la luminanza è pesata con i coefficienti standard 0,2126, 0,7152 e 0,0722, e il rapporto di contrasto è (L più chiara + 0,05) diviso (L più scura + 0,05). Le soglie non sono arrotondate: il testo normale richiede almeno 4,5 per AA e 7 per AAA; il testo grande richiede almeno 3 per AA e 4,5 per AAA. I risultati sono deterministici, senza chiamate di rete, campionamento o scorciatoie legate alla data.

Cosa misura il rapporto di contrasto WCAG e cosa contiene la risposta

Il rapporto di contrasto è il numero unico che WCAG usa per descrivere quanto fortemente il testo si stacca dal suo sfondo, tenendo conto della percezione umana della luminanza invece di una semplice distanza RGB. Una coppia nero puro su bianco puro raggiunge ventuno a uno, il massimo teorico per colori sRGB opachi, mentre colori identici danno uno a uno e falliscono ogni criterio testuale.

Testo grande in termini WCAG significa almeno diciotto punti regolari o l'equivalente quattordici punti in grassetto; lo strumento non misura la dimensione del carattere in sé — applica solo le soglie per il testo grande così può mappare la matrice sulla Sua scala tipografica.

Non c'è scansione di pagine, parsing CSS, fusione di opacità o campionamento di gradienti: Lei fornisce due colori hex espliciti e riceve una matrice riproducibile adatta a CI di design token, backend di plugin Figma e commenti di ticket che devono citare un rapporto numerico invece di un'opinione da screenshot.

Come vengono letti gli input hex e come AA e AAA restano riproducibili

Entrambi i valori devono essere hex: cancelletto iniziale opzionale, tre cifre che si espandono a sei (#abc diventa #aabbcc) o sei cifre complete, senza distinzione tra maiuscole e minuscole. Suffissi alfa, funzioni rgb(), funzioni hsl(), colori CSS con nome e interi nudi vengono rifiutati con un messaggio che nomina il campo e mostra cosa è stato ricevuto, così un token sbagliato non diventa mai un fallimento silenzioso. Ogni colore è limitato a trentadue caratteri per mantenere economica la validazione e bloccare incidenti di incolla.

Dopo il parsing, i canali vengono linearizzati con la curva sRGB a tratti di WCAG — si divide per 12,92 sotto la soglia 0,04045, altrimenti si eleva ((c + 0,055)/1,055) alla potenza 2,4 — poi combinati nella luminanza relativa. Il rapporto usa la luminanza più chiara al numeratore; gli indicatori di superamento confrontano il rapporto in virgola mobile non arrotondato con 4,5, 7,0 e 3,0, così un 4,50 visualizzato non può nascondere un vero 4,499 che dovrebbe fallire AA.

Dove si collocano i controlli di contrasto nei sistemi di design, nelle revisioni UI e nella CI

I team di prodotto incontrano i requisiti di contrasto quando una palette di marca appare elegante su una slide di marketing ma fallisce sul testo del corpo su una card bianca, quando un tema dark mode viene generato da token chiari, o quando gli stakeholder legali e di conformità chiedono prove AA documentate prima del lancio.

Gli ingegneri collegano lo stesso contratto a controlli delle pull request che bloccano una modifica di token se l'AA del testo normale scende sotto 4,5 per i colori primari del corpo, oppure registrano lo stato AAA del testo grande per titoli hero che intenzionalmente si avvicinano di più alla superficie. Specialisti QA e di accessibilità usano il rapporto numerico nei bug report così gli sviluppatori possano correggere la coppia esatta invece di indovinare da uno screenshot.

I team di contenuti e marketing verificano che i codici hex di una campagna passino ancora quando posizionati su sfondi chiari o scuri del sito. Lo abbini a strumenti di conversione del colore quando ha bisogno di intermedi RGB o HSL, e ad audit di accessibilità a pagina intera quando deve scansionare markup dal vivo invece di due valori hex espliciti.