Analizzatore WCAG
Analizza l'intera palette per la conformità WCAG AA e AAA, individuando le coppie di colori con contrasto insufficiente e suggerendo correzioni accessibili.
Palette da analizzare
Matrice di contrasto
Primary | Secondary | Background | Text | Muted | |
|---|---|---|---|---|---|
Primary | — | 1.15 Fail | 3.68 AA-L | 3.98 AA-L | 1.29 Fail |
Secondary | 1.15 Fail | — | 4.23 AA-L | 3.45 AA-L | 1.12 Fail |
Background | 3.68 AA-L | 4.23 AA-L | — | 14.63 AAA | 4.76 AA |
Text | 3.98 AA-L | 3.45 AA-L | 14.63 AAA | — | 3.07 AA-L |
Muted | 1.29 Fail | 1.12 Fail | 4.76 AA | 3.07 AA-L | — |
Legenda WCAG 2.1
Livello AAA
Rapporto ≥ 7:1 - Eccellenza
Livello AA
Rapporto ≥ 4,5:1 - Standard
AA grande
Rapporto ≥ 3:1 - Testo grande
Non conforme
Rapporto < 3:1 - Non conforme
Analizza l'intera palette per la conformità WCAG AA e AAA, individuando le coppie di colori con contrasto insufficiente e suggerendo correzioni accessibili.
Analizzatore WCAG mostra solo i controlli e i risultati pertinenti alla sua funzione. Le opzioni disponibili dipendono dallo strumento e dall’input.
Formati supportati
Come funziona
Passaggio 1
Apri Analizzatore WCAG e prepara l’input richiesto dall’interfaccia
Passaggio 2
Regola i controlli visibili in base al risultato desiderato
Passaggio 3
Controlla il risultato prima di copiarlo, esportarlo o riutilizzarlo
Errori comuni da evitare
- Non dare per supportato un formato o un’opzione che non compare nell’interfaccia.
- Verifica i valori prima di riutilizzarli in un sistema visivo, un’interfaccia o un file finale.
- Se il risultato è usato per testo o componenti UI, controlla anche il contrasto.
Consigli dei professionisti
- Conserva il valore di partenza insieme al risultato per confrontare le varianti.
- Usa i formati realmente mostrati dallo strumento invece di stimare conversioni.
- Su mobile e tablet lascia che testi e controlli vadano a capo.
Trattamento dei dati
Il trattamento dipende dalla funzione utilizzata. Consenso, analisi e funzioni account del sito sono separati dall’operazione sul colore.
Cosa fa questo strumento
Analizza l'intera palette per la conformità WCAG AA e AAA, individuando le coppie di colori con contrasto insufficiente e suggerendo correzioni accessibili. Analizzatore WCAG resta concentrato su questa attività e non presume funzioni che non sono mostrate nell’interfaccia. Usa i controlli disponibili per ottenere il risultato necessario e verifica i valori visualizzati prima di portarli in un altro strumento, foglio di stile, file di design o documento.
Preparare un input adatto
Parti dall’input richiesto da Analizzatore WCAG: colore, valore, immagine o impostazione a seconda della schermata. I formati indicati per questa pagina sono Palette, HEX, CSS Variables, JSON. Se un formato o un’opzione non compare nell’interfaccia, non considerarlo supportato da questa specifica funzione.
Leggere e verificare il risultato
Leggi il risultato nel contesto dell’operazione eseguita. Confrontalo con il valore di origine e controlla le impostazioni che hanno influenzato il calcolo. Per lavori visivi importanti, verifica anche il risultato nell’interfaccia reale in cui verrà usato, non solo nel codice.
Uso su mobile e tablet
Analizzatore WCAG utilizza il layout responsive del sito. Titoli, sottotitoli, breadcrumb e controlli possono andare a capo sugli schermi stretti per evitare il taglio delle traduzioni lunghe. Controlla comunque il risultato finale sul dispositivo e nel contesto in cui verrà utilizzato.
Riutilizzare il risultato nel progetto
Dopo aver verificato il risultato, usa soltanto le azioni offerte realmente da Analizzatore WCAG, come copia o esportazione quando presenti. Conserva il valore sorgente se devi riprodurre l’impostazione e, per le interfacce, documenta anche il ruolo del colore e il contrasto richiesto.
Strumenti correlati
Guide e tutorial
Impara a usare i nostri strumenti con le nostre guide dettagliate.
wcag-analyzer: guida pratica per accessibility
Guida localizzata per usare wcag-analyzer, capire le buone pratiche di accessibility ed evitare errori comuni.
wcag-analyzer: guida pratica per accessibility
Guida localizzata per usare wcag-analyzer, capire le buone pratiche di accessibility ed evitare errori comuni.
wcag-analyzer: guida pratica per export
Guida localizzata per usare wcag-analyzer, capire le buone pratiche di export ed evitare errori comuni.
Domande frequenti
Impara a usare i nostri strumenti con le nostre guide dettagliate.