Controllo del contrasto del colore

Controllo gratuito del contrasto cromatico WCAG: prova i colori del testo e dello sfondo per verificarne la conformità AA e AAA nel tuo browser. Inserisci valori esadecimali o rgb, visualizza il rapporto di contrasto e passa/fallisce immediatamente. Nessun accesso, nessun caricamento.

Cosa misura questo controllo del contrasto cromatico?

Calcola il rapporto di contrasto WCAG 2.x tra un colore di primo piano (testo) e un colore di sfondo utilizzando la luminanza relativa sRGB. Ottieni un rapporto numerico (ad esempio 4,52:1) più superato/fallito per le soglie WCAG AA e AAA su testo normale e testo di grandi dimensioni. Si tratta di un ausilio per il QA della progettazione, non di un controllo di accessibilità completamente automatizzato dell'intero sito.

Quali formati di colore sono supportati?

Esadecimale (#RGB, #RRGGBB, #RRGGBBAA), rgb() e rgba(). Incolla i valori della tavolozza del marchio da token Figma, variabili CSS o documenti di progettazione. Un valore esadecimale breve come #fff si espande in #ffffff prima che venga calcolata la luminanza.

Qual è la differenza tra WCAG AA e AAA?

AA è la linea di base legale e di prodotto comune: 4,5:1 per il testo normale, 3:1 per il testo di grandi dimensioni. AAA è più severo: 7:1 normale, 4,5:1 grande. Molti siti di marketing scelgono AA per il corpo del testo e AAA solo per titoli eroici o interfaccia utente ad alto rischio. Questo strumento mostra entrambi in modo da poter scegliere un obiettivo difendibile con il design.

Cosa conta come testo di grandi dimensioni per WCAG?

Il testo di grandi dimensioni ha uno spessore normale di almeno 18 punti (24 CSS px) o almeno 14 punti in grassetto (circa 18,66 CSS px). Pulsanti, didascalie e scritte in piccolo spesso falliscono AA anche quando i titoli passano: controlla ogni dimensione spedita, non solo il campione H1.

I colori del mio marchio sono caricati?

No. L'analisi e i calcoli sulla luminanza vengono eseguiti interamente nel tuo browser. Gli esperimenti sulle tavolozze inediti e i colori NDA del cliente rimangono sul tuo dispositivo. Cancella i campi sulle macchine condivise al termine.

La trasparenza influisce sul rapporto di contrasto?

I valori rgba e #RRGGBBAA vengono analizzati, ma il contrasto viene valutato su canali sRGB opachi: il controllo non esegue la composizione alfa del testo su sfondi fotografici. Per il testo sulle immagini, campiona prima il colore effettivo dietro la copia o utilizza una sovrapposizione solida, quindi ricontrolla.

Questo controllo del contrasto WCAG è gratuito?

SÌ. Gratuito senza accesso per il rapporto core e il percorso superato/fallito.