Convertitore gratuito

Contrasto di colore Controllore (WCAG)

Controlla il rapporto di contrasto tra due colori per la conformità all'accessibilità WCAG AA e AAA. Gratuito, istantaneo e funziona interamente nel tuo browser.

Testo di esempio: dimensione normale

Esempio di testo piccolo: 14px

Rapporto di contrasto:21.00:1
WCAGAATesto normalePassa
WCAGAATesto grandePassa
WCAGAAATesto normalePassa
WCAGAAATesto grandePassa

Informazioni su questo strumento

Controlla i rapporti di contrasto dei colori tra il testo in primo piano e i colori di sfondo in base alle linee guida sull'accessibilità WCAG 2.1. Inserisci i colori come codici esadecimali, valori RGB o valori HSL e visualizza immediatamente il rapporto di contrasto insieme ai risultati superato/fallito per la conformità WCAG AA e AAA sia con dimensioni di testo normali che di grandi dimensioni.

Come usarlo

  1. Inserisci o scegli il colore di primo piano (testo) utilizzando il selettore colori o l'input esadecimale.
  2. Inserisci o scegli il colore di sfondo.
  3. Visualizza immediatamente il rapporto di contrasto e i risultati superati/falliti WCAG 2.1 AA/AAA.
  4. Regola i colori fino a raggiungere il livello di conformità desiderato.

Domande frequenti

Quale rapporto di contrasto è richiesto per la conformità alle WCAG?
Le WCAG AA richiedono 4,5:1 per il testo normale e 3:1 per il testo grande (18pt+ o 14pt+ grassetto). WCAG AAA richiede 7:1 per il testo normale e 4,5:1 per il testo di grandi dimensioni. Il rapporto massimo possibile è 21:1 (nero su bianco).
Perché il contrasto cromatico è importante?
Un contrasto sufficiente garantisce che il testo sia leggibile per gli utenti ipovedenti, daltonici o che visualizzano schermi in pieno sole. È anche un requisito legale ai sensi delle normative ADA e dell'UE sull'accessibilità per molti siti Web.
Cosa è considerato "testo di grandi dimensioni" nelle WCAG?
Il testo di grandi dimensioni è definito come 18 pt (24 px) e superiore per lo spessore normale oppure 14 pt (18,66 px) e superiore per il testo in grassetto. Il testo di grandi dimensioni ha requisiti di contrasto inferiori perché è intrinsecamente più facile da leggere.
Questo strumento controlla il contrasto per gli elementi non testuali?
Le WCAG 2.1 richiedono un rapporto di contrasto 3:1 per i componenti dell'interfaccia utente e gli oggetti grafici (pulsanti, icone, campi modulo). Puoi utilizzare questo strumento anche per verificarli: basta inserire il componente e i colori dello sfondo.