Vai al contenuto

Verifica contrasto colori

Risposta breve

Controlla i rapporti di contrasto colore testo-sfondo rispetto agli standard WCAG AA/AAA.

Cosa non fa: Controlla solo i due colori che inserisci; non analizza nessuna pagina, e il testo su immagini o sfumature va verificato a mano.

Gratuito · Senza registrazione · Funziona nel browser
4,54Rapporto di contrasto

Contrasto al limite — verifica l'uso con testo grande.

La volpe veloce salta il cane

La volpe veloce salta il cane

AA · testo normaleSuperato
AA · testo grandeSuperato
AAA · testo normaleNon superato
AAA · testo grandeSuperato

Come migliorare

Il livello WCAG AA richiede un rapporto di contrasto di almeno 4.5:1 per il testo normale e 3:1 per il testo grande (18pt, oppure 14pt in grassetto). Punta a 7:1 (AAA) dove possibile — garantisce la leggibilità per gli utenti ipovedenti e in piena luce solare.

Cosa fa

Calcola il rapporto di contrasto WCAG tra qualsiasi colore di primo piano e di sfondo che inserisci, usando la stessa formula di luminanza relativa della specifica WCAG, e lo confronta con le soglie AA e AAA per testo normale e grande (4.5:1 / 3:1 per AA, 7:1 / 4.5:1 per AAA). Mostra un'anteprima live del testo nei tuoi colori insieme a un badge di superamento/fallimento per ogni soglia.

Perché è importante

Il testo a basso contrasto è il problema di accessibilità rilevato automaticamente più comune sulle home page nel report annuale Million di WebAIM, ed è uno dei più facili da correggere con un cambio di colore. Il criterio di successo WCAG 2.1 1.4.3 stabilisce i rapporti minimi, e EN 301 549 — lo standard alla base dell'European Accessibility Act — li applica ai contenuti web.

Come funziona

  1. Inserisci o scegli un colore di primo piano (testo) e un colore di sfondo

  2. Calcoliamo il rapporto di contrasto di luminanza relativa WCAG tra i due colori

  3. Confrontiamo il rapporto con le soglie AA e AAA per testo normale e grande

  4. Vedi un'anteprima live del tuo testo sul tuo sfondo più un badge di superamento o fallimento per ogni soglia

Esempio di input e output

INPUT
foreground: #767676
background: #ffffff
OUTPUT
rapporto di contrasto: 4.54:1

AA testo normale (4.5:1)    PASS
AA testo grande (3:1)       PASS
AAA testo normale (7:1)     FAIL
AAA testo grande (4.5:1)    PASS

Come leggere il risultato

Rapporto di contrasto (4,54:1 nell'esempio)
Quanto il colore più chiaro è più luminoso di quello più scuro, da 1:1 (lo stesso colore) a 21:1 (nero su bianco). Usa la formula della luminanza relativa definita nelle WCAG 2.1, quindi il risultato coincide con ogni strumento che segue lo standard.
AA testo normale (4,5:1)
Il livello a cui rimanda l'Atto europeo sull'accessibilità tramite la EN 301 549: il testo corrente richiede almeno 4,5:1. #767676 su bianco supera il controllo con 4,54:1, quindi è il grigio puro più chiaro che lo supera su bianco; #777777 fallisce già.
AA testo grande (3:1)
Il testo grande — almeno 18 pt (24 px), oppure 14 pt (circa 18,7 px) in grassetto — richiede 3:1. Anche i componenti dell'interfaccia e la grafica significativa, come i bordi dei campi e le icone, richiedono 3:1 rispetto a ciò che li circonda (WCAG 1.4.11).
AAA (7:1 e 4,5:1)
Il livello avanzato. Né l'EAA né la EN 301 549 lo richiedono, ma aiuta le persone ipovedenti e chi legge uno schermo in piena luce. L'esempio supera l'AAA per il testo grande e lo fallisce per quello normale.
Anteprima e colore del rapporto
Il tuo testo nei tuoi due colori, in due dimensioni, così giudichi la coppia anche a occhio e non solo dal numero. Il rapporto appare verde da 7:1, arancione da 4,5:1 — che supera l'AA — e rosso sotto quella soglia.

Chi lo usa

  • Designer

    Convalida la palette dei colori del brand rispetto alle WCAG prima di finalizzarla. Molti pastelli "moderni" falliscono il 4.5:1 su sfondo bianco — meglio scoprirlo prima di applicarli a tutto il brand.

  • Auditor di accessibilità

    Controlla ogni coppia di colore testo e sfondo rispetto alle soglie AA e AAA prima di firmare la dichiarazione di accessibilità AEA di un cliente.

  • Sviluppatore frontend

    Individua le regressioni di contrasto introdotte dalle modifiche al tema tramite variabili CSS prima che raggiungano la produzione.

Problemi comuni e come risolverli

  1. Testo grigio chiaro su bianco

    Placeholder, didascalie e testi del footer in grigio sono l'errore più frequente. Usa #767676 o più scuro su bianco per il testo normale; su uno sfondo colorato, cambia la luminosità di uno dei due colori e ricontrolla.

    :root {
  --text: #1f2937;       /* 14.7:1 on #ffffff */
  --text-muted: #595959; /*  7.0:1 on #ffffff */
}

  2. Il colore del brand è troppo chiaro per il testo

    Tieni il colore del brand per titoli grandi, icone e sfondi, e usa una sua tonalità più scura per il testo piccolo e i link. Una tonalità più scura resta riconoscibile come il brand.

  3. Testo bianco su un pulsante colorato

    Controlla il colore del pulsante rispetto al bianco, non solo rispetto alla pagina. Se non basta, scurisci il pulsante o usa un testo scuro, e controlla allo stesso modo i colori di hover e focus.

  4. Testo su immagini o sfumature

    Non c'è un unico colore di sfondo da misurare. Controlla la parte più chiara dietro il testo, oppure metti dietro uno strato pieno o semitrasparente perché il rapporto valga ovunque.

  5. Link che si distinguono dal testo solo per il colore

    Se i link nel testo si riconoscono solo dal colore, quel colore deve avere anche un contrasto di 3:1 con il testo circostante (tecnica G183 del W3C), più un altro segnale su hover e focus. Sottolinearli è la soluzione più semplice.

Domande frequenti

Di quale rapporto WCAG ho bisogno?
4.5:1 per il testo normale, 3:1 per il testo grande (≥18pt o ≥14pt in grassetto) e i componenti dell'interfaccia. WCAG 2.1 AAA richiede 7:1 — un livello più alto a cui la maggior parte dei brand non punta.
Controlla immagini e icone?
Solo il contrasto del testo, e solo per i due colori che inserisci qui. Il contrasto delle immagini (ad es. banner hero con testo sull'immagine) richiede una revisione manuale — non c'è una scansione automatica della pagina.
Quale contrasto richiede l'EAA?
Per i contenuti web, EN 301 549 v3.2.1 applica le WCAG 2.1 livello AA, incluso il criterio 1.4.3 — quindi il testo ha bisogno di almeno 4.5:1 rispetto allo sfondo (3:1 per il testo grande). Controlla ogni coppia usata dal tuo sito.

Fonti

La documentazione su cui si basano questo strumento e le spiegazioni di questa pagina.

Strumenti gratuiti su questo tema

Guide su questo tema

Dati di ricerca su questo tema

Strumenti correlati in Conformità EAA

Vedi tutti gli strumenti Conformità EAA