Come usare Verifica contrasto colori
- 1
Inserisci due colori
Scrivi il colore del testo e quello di sfondo in HEX, rgb(), hsl() o oklch(), oppure apri il campione rotondo per sceglierne uno.
- 2
Leggi il verdetto
Il rapporto e cinque righe «Superato» o «Non superato» mostrano AA e AAA per testo normale e testo grande, più la regola 3:1 per icone e bordi.
- 3
Applica una correzione
Se un livello non è superato, usa il testo o lo sfondo più scuro o più chiaro più vicino che lo supera, poi copia il nuovo valore.
Limiti e Pro
Gratis e senza limiti: qualsiasi numero di verifiche, 5 criteri WCAG 2.2 per coppia, 2 correzioni suggerite per ogni livello non superato e una griglia fino a 7 colori.
Informazioni su Verifica contrasto colori
Questo verificatore di contrasto misura quanto due colori sono distanti per luminosità, con la formula della luminanza relativa di WCAG 2.2, lo stesso calcolo usato dagli audit di accessibilità dei browser e dai plugin di design. Il risultato è un rapporto compreso tra 1:1 (colori identici) e 21:1 (nero su bianco). Il criterio di successo 1.4.3 richiede 4,5:1 per il testo normale e 3:1 per il testo grande al livello AA; il 1.4.6 porta questi valori a 7:1 e 4,5:1 per il livello AAA; il 1.4.11 richiede 3:1 per gli elementi non testuali significativi, come gli indicatori di focus, i contorni dei campi e le linee dei grafici.
Un'anteprima dal vivo mostra nei tuoi colori il testo nelle due dimensioni, un pulsante con contorno e un'icona, così puoi valutare la leggibilità oltre al numero. I rapporti vengono troncati a due decimali e non arrotondati, perché una coppia a 4,496:1 non soddisfa il requisito di 4,5:1. Quando un livello non è superato, lo strumento cerca la luminosità OKLCH di uno dei colori mantenendone tonalità e saturazione, e propone il valore più vicino che supera la verifica, separatamente per il testo e per lo sfondo.
Lo strumento è pensato per colori pieni. Non può valutare testo sopra foto o sfumature, trasparenze, il rendering dello spessore del carattere su un certo schermo o il metodo APCA, più recente e proposto per WCAG 3: considera quindi un esito positivo come il minimo e prova anche su schermi reali.
Privacy
Entrambi i colori restano in questa scheda: il rapporto, le verifiche superate o non superate e le correzioni suggerite sono calcolati dal tuo browser, e nessun valore di colore viene inviato a un server o salvato.