TL
Tool Lab
💰Donare
💰Donare

Controllore di Contrasto

Verifica il rapporto di contrasto dei colori rispetto alle linee guida di accessibilità WCAG 2.1. Risultati AA/AAA istantanei.

Colore in primo piano
Colore di sfondo

Anteprima testo grande (18pt grassetto)

Anteprima testo normale — The quick brown fox jumps over the lazy dog.

14.05:1rapporto di contrasto
AA — Testo normale (≥ 4,5:1)Superato
AA — Testo grande (≥ 3:1)Superato
AAA — Testo normale (≥ 7:1)Superato
AAA — Testo grande (≥ 4,5:1)Superato

Informazioni su questo strumento

Il verificatore di contrasto calcola il rapporto di contrasto tra un colore in primo piano (testo) e uno di sfondo usando la formula di luminanza relativa WCAG 2.1.

WCAG 2.1 definisce due livelli: AA richiede 4,5:1 per testo normale e 3:1 per testo grande. AAA richiede 7:1 e 4,5:1.

Come usare

  1. Scegli il colore in primo piano e lo sfondo con i selettori o inserisci codici hex.
  2. L'anteprima mostra come appare il testo a dimensioni normale e grande.
  3. Il rapporto di contrasto e i risultati WCAG si aggiornano istantaneamente.
  4. Usa le coppie di esempio per esplorare pattern di accessibilità comuni.

Casi d'uso

I designer UI verificano che etichette e testo rispettino gli standard WCAG. Gli sviluppatori frontend verificano le combinazioni testo-sfondo nei sistemi di design.

Domande frequenti

  • Cosa conta come "testo grande"? — WCAG definisce testo grande come almeno 18pt (24px) normale, o 14pt (~18.67px) grassetto.
  • Supporta trasparenza o rgba? — No, questo strumento funziona solo con colori hex solidi.
  • Quale livello WCAG dovrei raggiungere? — AA è il minimo raccomandato per la maggior parte dei siti pubblici. AAA offre migliore leggibilità.
  • 4,5:1 è sempre sufficiente? — 4,5:1 soddisfa WCAG AA, ma utenti con disabilità visive più gravi possono beneficiare di rapporti più alti.