Verifica contrasto colori
Risposta breve
Controlla i rapporti di contrasto colore testo-sfondo rispetto agli standard WCAG AA/AAA.
Contrasto al limite — verifica l'uso con testo grande.
La volpe veloce salta il cane
La volpe veloce salta il cane
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
-
Inserisci o scegli un colore di primo piano (testo) e un colore di sfondo
-
Calcoliamo il rapporto di contrasto di luminanza relativa WCAG tra i due colori
-
Confrontiamo il rapporto con le soglie AA e AAA per testo normale e grande
-
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
foreground: #767676 background: #ffffff
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
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 Annex V dell'EAA di un cliente.
-
Sviluppatore frontend
Individua le regressioni di contrasto introdotte dalle modifiche al tema tramite variabili CSS prima che raggiungano la produzione.
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.