♿

Verifica contrasto WCAG

Controlla il rapporto di contrasto dei colori per la conformità all'accessibilità WCAG AA e AAA.

Strumenti di design Funziona localmente Nessun dato inviato
WCAG AA / AAA accessibilità colore
Colore primo piano
Colore di sfondo
Anteprima
Testo normale — La veloce volpe marrone salta sopra il cane pigro.
Testo grande (24px normale)
Testo grande (18.67px grassetto)
Componente UI
—
Rapporto di contrasto
Livello Testo normale Testo grande Componenti UI
AA — — —
AAA — — N/D
WCAG 2.1 — AA richiede ≥ 4,5:1 per il testo normale, ≥ 3:1 per testo grande e componenti UI. AAA richiede ≥ 7:1 per il testo normale, ≥ 4,5:1 per il testo grande. Testo grande = 18pt (24px) regular o 14pt bold (18,67px).

Che cos'è Contrast Checker?

Controlla il rapporto di contrasto dei colori per la conformità all'accessibilità WCAG AA e AAA. Verifica istantaneamente le combinazioni di colori di primo piano e sfondo per testo normale, testo grande e componenti UI.

Come usare Contrast Checker

  1. Inserisci o seleziona il colore del testo in primo piano.
  2. Inserisci o seleziona il colore di sfondo sottostante.
  3. Verifica subito il rapporto di contrasto e l'esito WCAG superato o non superato.
  4. Regola uno dei due colori finché la combinazione non soddisfa l'obiettivo di accessibilità.

Strumenti correlati

🎨
Selettore colore
Converti i colori tra HEX, RGB, HSL e CMYK
 🌈
Generatore gradiente CSS
Crea gradienti CSS lineari e radiali con anteprima in tempo reale
 🎨
Generatore palette colori
Genera palette di colori complementari, analoghe e triadiche
Capire il contrasto dei colori ▾
Esempio
Input Verifica di testo grigio medio su sfondo bianco:
Risultato Risultato: supera AA per testo grande (≥ 3:1), ma non supera AA per testo normale (richiede 4.5:1). Scurisci leggermente il grigio per superare tutti i livelli AA.
Casi d'uso comuni
  • Controlla il contrasto di pulsanti e link prima di rilasciare aggiornamenti UI.
  • Convalida i colori del testo nei sistemi di brand e nelle guide di stile.
  • Rivedi la leggibilità delle grafiche marketing.
  • Testa rapidamente combinazioni scuro su chiaro e chiaro su scuro.
Domande frequenti
Qual è la differenza tra i livelli di contrasto AA e AAA?

WCAG AA richiede un rapporto di 4.5:1 per il testo normale e 3:1 per il testo grande — il requisito legale standard. AAA richiede 7:1 per il testo normale e 4.5:1 per il testo grande, offrendo un'accessibilità migliorata per gli utenti con ipovisione grave.

Questo controllo verifica il contrasto non testuale (icone, bordi)?

Sì — WCAG 1.4.11 (Non-text Contrast) richiede 3:1 per i componenti UI e gli elementi grafici. Il risultato AA UI Components nella tabella copre questo requisito.

I miei colori superano AA ma non superano AAA — devo correggerli?

La conformità AAA non è richiesta per tutti i contenuti. WCAG AA è il requisito legale standard nella maggior parte delle giurisdizioni. Punta ad AAA dove possibile, ma AA è sufficiente per la conformità legale.

Che cosa è considerato testo grande?

WCAG definisce testo grande il testo da 18pt (24px) o superiore per il peso normale, oppure da 14pt (circa 18.67px) o superiore per il grassetto. Il testo grande ha un requisito di contrasto inferiore (3:1 per AA) perché è intrinsecamente più facile da leggere.