Controllo Contrasto Colore
Inserisci un colore di primo piano e uno di sfondo per controllare il rapporto di contrasto WCAG con badge AA e AAA per testo normale e grande.
Ma la volpe, col suo balzo, ha raggiunto il quieto Fido.
Ma la volpe, col suo balzo, ha raggiunto il quieto Fido.
Come funziona
Questo strumento calcola il rapporto di contrasto tra due colori secondo le linee guida WCAG 2.1, e indica se la tua combinazione di colori è accessibile.
Come usarlo:
- Inserisci il colore del testo e il colore di sfondo in esadecimale, RGB o usando il selettore colori.
- Lo strumento mostra istantaneamente il rapporto di contrasto.
- Verifica se il risultato soddisfa i livelli AA (4,5:1 per testo normale) o AAA (7:1).
Esempio: Testo nero (#000000) su sfondo bianco (#FFFFFF) → rapporto di contrasto 21:1 (AAA).
Limitazioni: Lo strumento valuta solo il contrasto testo/sfondo. Non copre tutti i criteri di accessibilità WCAG.
Privacy: Nessun dato viene trasmesso — tutto viene calcolato localmente.
Esempio pratico
Verifica testo grigio #767676 su sfondo bianco: il rapporto di contrasto è esattamente 4,54:1 — supera il WCAG AA per il testo normale (che richiede 4,5:1) ma fallisce l’AAA (7:1), e le schede di esito mostrano ogni soglia separatamente, incluse le regole più permissive per il testo grande. La barra a scala logaritmica mostra dove si colloca la coppia tra 1:1 e il 21:1 del nero puro su bianco. La scheda APCA anticipa la metrica del WCAG 3, e il pulsante di scambio risponde all’istante se invertire primo piano e sfondo aiuta. L’anteprima dal vivo rende testo reale per giudicare con i tuoi occhi.
Casi d'uso
- Controllare una palette di colori aziendali per la conformità all'accessibilità prima del lancio di un redesign
- Scegliere colori di pulsanti e link leggibili su tema chiaro o scuro
- Rispettare i requisiti WCAG 2.1 AA o AAA per conformità Section 508, EN 301 549 o ADA
- Revisionare un mockup inviato da un designer per segnalare testo illeggibile prima dello sviluppo
- Insegnare concetti di accessibilità mostrando come piccole differenze di luminanza causino grandi fallimenti di contrasto
Domande frequenti
- Cos'è il rapporto di contrasto WCAG?
- È un rapporto calcolato in base alla luminanza relativa dei due colori, da 1:1 (nessun contrasto) a 21:1 (contrasto massimo).
- Qual è il valore minimo per l'accessibilità?
- 4,5:1 per testo normale (livello AA) e 3:1 per testo grande.
- Cosa significa il livello AAA?
- Un rapporto di 7:1, raccomandato per la massima accessibilità.
- Posso testare più combinazioni?
- Sì, modifica i colori e il risultato si aggiorna in tempo reale.
- Lo strumento supporta il formato HSL?
- L'input accetta i formati esadecimale e RGB.