Controllo Contrasto Colore
Assicurati che il tuo testo e la UI soddisfino i requisiti di contrasto WCAG 2.1 — una parte essenziale della conformità EAA/EN 301 549. Incolla i colori del brand, visualizza combinazioni e ottieni un responso netto per testo normale, testo grande e componenti UI.
Scelto da organizzazioni in tutta Europa che lavorano per la conformità a WCAG ed EAA
Cos’è un controllore di contrasto e perché usarlo?
Un contrasto sufficiente migliora la leggibilità per tutti — in particolare per persone con visione ridotta, difetti di visione dei colori o su schermi di bassa qualità.
Verifica 1.4.3 Contrasto (Minimo), 1.4.6 Contrasto (Avanzato) e 1.4.11 Contrasto non testuale per componenti UI e grafica.
La direttiva europea sull’accessibilità fa riferimento a EN 301 549 che, a sua volta, si riferisce a WCAG — il contrasto è una parte chiave per ottemperare agli obblighi.
Palette accessibili creano interfacce robuste e leggibili che funzionano in temi chiari/scuri e su vari dispositivi.
Soglie di contrasto WCAG 2.1 (riferimento rapido)
Rapporto minimo: 4,5:1 (testo sotto 24 px normale / 19 px grassetto).
Rapporto minimo: 3:1 (≥ 24 px normale o ≥ 19 px grassetto).
Contrasto minimo rispetto ai colori adiacenti: 3:1 (bordature focus, campi modulo, icone etc.).
Prova il controllo contrasti
Inserisci colori per primo e sfondo (HEX). Lo strumento calcola il rapporto di contrasto e mostra pass/fail per i livelli WCAG. I risultati si aggiornano in tempo reale.
Color Contrast Checker
Example text preview
Contrast ratio: 8.67:1
Normal text
Contrast Ratio:8.67:1
Normal Text (WCAG AA)
Pass ≥ 4.5
AAA
Pass ≥ 7.0
FAQ
WCAG 2.1 modifica i rapporti di contrasto?
L’EAA richiede il contrasto WCAG?
Cosa si considera “testo grande”?
Integra i controlli contrasto nel flusso di lavoro
Esegui controlli contrasto durante le revisioni di design e codice. Combinali con scansioni automatiche per individuare problemi su larga scala.