Calcolo del contrasto colori WCAG

Restituisce la luminanza di ogni colore, il rapporto di contrasto e indicatori chiari di superamento AA e AAA per testo normale e grande. Lei può usarlo per controllare token di design, convalidare i colori di un’interfaccia prima del rilascio o aggiungere una verifica di accessibilità ripetibile a un flusso automatizzato. Gli input sono colori esadecimali espliciti, i calcoli sono deterministici e i formati non validi generano un errore utile. Lo strumento web è adatto ai controlli singoli; ogni richiesta tramite API costa $0.002.

Comprenda i valori restituiti dal calcolatore

Il risultato normalizza anzitutto entrambi gli input come colori esadecimali minuscoli a sei cifre; una forma breve come #fff viene quindi riportata sempre come #ffffff. Mostra poi la luminanza relativa del primo piano e dello sfondo. La luminanza relativa varia da zero per il nero a uno per il bianco e deriva dai canali sRGB linearizzati, ponderati per riflettere la diversa sensibilità dell’occhio alla luce rossa, verde e blu. Il rapporto di contrasto confronta la luminanza più chiara con quella più scura e varia da 1:1 per colori identici a 21:1 per nero e bianco. Il rapporto visualizzato viene arrotondato a due decimali, mentre ogni decisione di superamento usa il valore completo non arrotondato. Questa distinzione evita che un valore mostrato come 4.50 superi la soglia quando il valore reale è ancora inferiore a 4.5. La risposta raggruppa quattro valori booleani per testo normale e grande, semplici da mostrare a un team di design o da verificare in test automatizzati.

Fornisca colori validi e interpreti AA e AAA

Inserisca primo piano e sfondo come colori esadecimali a tre o sei cifre, con o senza cancelletto iniziale. Valori come #123, 123, #112233 e AABBCC sono accettati e normalizzati. Nomi di colori CSS, espressioni rgb() o hsl(), valori esadecimali alfa a quattro o otto cifre, stringhe vuote e valori non testuali vengono rifiutati, perché opacità e composizione richiedono ulteriore contesto. Per il testo normale, WCAG AA richiede almeno 4.5:1 e AAA almeno 7:1. Per il testo grande, AA richiede 3:1 e AAA 4.5:1. In genere, è grande un testo di almeno 18 punti con peso normale o 14 punti in grassetto, ma la capacità non esamina la tipografia: restituisce entrambe le matrici affinché la Sua applicazione scelga quella pertinente. Un rapporto sufficiente è solo una parte della revisione di accessibilità e non dimostra che l’intera interfaccia sia accessibile.

Usi i risultati nei flussi di design e distribuzione

Parta dai token reali di primo piano e sfondo usati dal componente, non da colori campionati in uno screenshot compresso. In una revisione manuale, confronti corpo del testo, testo secondario, link, etichette dei pulsanti, suggerimenti dei moduli, indicatori di stato attivo e stati disabilitati con ogni superficie su cui compaiono. In un design system, mantenga una piccola matrice di coppie approvate e richiami l’API quando cambia la palette. Un controllo di integrazione continua può rifiutare una coppia proposta se AA per il testo normale è falso, consentendo invece una combinazione decorativa o per titoli grandi in base a una regola documentata. Conservi colori normalizzati e rapporto insieme al test, così i revisori potranno riprodurre il risultato. Ogni richiesta automatizzata costa $0.002; un input non valido restituisce un errore. L’algoritmo non usa rete, casualità o data corrente, quindi la stessa coppia produce sempre lo stesso esito. Per trasparenze, gradienti, fotografie o stati interattivi, determini prima i colori renderizzati oppure usi un audit nel browser con il contesto completo.