Elements must meet minimum color contrast ratio thresholds
Start building more accessible experiences
Compliance Data & Impact
Disabilities Affected
- Ipovisione
- Daltonismo
Standard(s)
- WCAG 2.1 (AA)
- WCAG 2.0 (AA)
- WCAG 2.2 (AA)
- Trusted Tester
- EN 301 549
Criteri di successo WCAG [WCAG 2.1 (AA)]
- 1.4.3: MUST: Contrast (Minimum)
Criteri di successo WCAG [WCAG 2.0 (AA)]
- 1.4.3: MUST: Contrast (Minimum)
Criteri di successo WCAG [WCAG 2.2 (AA)]
- 1.4.3: MUST: Contrast (Minimum)
Linee guida per i tester attendibili
- 13.C: MUST: The visual presentation of text and images of text have sufficient contrast.
Come risolvere il problema
Assicurarsi che tutti gli elementi di testo abbiano un contrasto di colore sufficiente tra il testo in primo piano e il colore dello sfondo dietro di esso.
Criterio di successo: garantire un contrasto di colore di almeno 4,5:1 per il testo piccolo o 3:1 per il testo grande, anche se il testo fa parte di un'immagine. Il testo grande è stato definito nei requisiti come 18pt (24 pixel CSS) o 14pt in grassetto (19 pixel CSS). Nota: gli elementi con un rapporto 1:1 sono considerati "incompleti" e richiedono una revisione manuale.
Utilizzare l'analizzatore del contrasto cromatico qui sotto per individuare i colori che soddisfano le linee guida.
Strumenti di analisi del contrasto di colore : di seguito sono riportati i link agli strumenti che analizzeranno i rapporti di contrasto di colore in base alle linee guida:
- Estensioni del browser axe DevTools — Il prodotto aziendale di Deque, axe DevTools HTML, consente ai gruppi di sviluppo di integrare i test di accessibilità nei processi di test automatizzati esistenti ed è utilizzato dai clienti insieme al prodotto di monitoraggio e reporting dell'accessibilità axe Monitor di Deque. Oltre a fornire una libreria di codici per l'integrazione in numerosi linguaggi di programmazione, axe DevTools include anche estensioni per l'analisi dell'accessibilità web per Google Chrome e Mozilla Firefox, consentendo agli sviluppatori front-end aziendali di eseguire un rapido test di accessibilità in qualsiasi momento. Gli strumenti di analisi restituiscono informazioni dettagliate sulle violazioni dell'accessibilità e istruzioni per risolvere i problemi, compresi i collegamenti per approfondire la conoscenza.
- axe-core — Il motore di accessibilità axe è una libreria di regole di accessibilità JavaScript open source, veloce, che non restituisce falsi positivi o risultati duplicati ed è disponibile come repository GitHub, plugin del browser o integrazione del framework.
Perché è importante
Alcune persone con problemi di vista sperimentano un basso contrasto, ovvero non ci sono molte aree luminose o scure. Tutto tende ad apparire con la stessa luminosità, il che rende difficile distinguere contorni, bordi, spigoli e dettagli. Un testo la cui luminosità è troppo vicina allo sfondo può risultare di difficile lettura.
Ci sono quasi tre volte più individui con ipovisione rispetto a quelli con cecità totale. Uno su dodici persone non riesce a vedere l'intero spettro dei colori: negli Stati Uniti, circa l'8% degli uomini e lo 0,4% delle donne. Una persona ipovedente o daltonica non è in grado di distinguere il testo su uno sfondo senza un contrasto sufficiente.
Nello sfondo vengono presi in considerazione la trasparenza e l'opacità del colore.
La trasparenza e l'opacità del colore in primo piano sono più difficili da rilevare e da tenere in considerazione a causa di:
- Colori in rapporto 1:1 in primo piano e sullo sfondo.
- Gradienti di sfondo CSS.
- Colori di sfondo negli pseudo-elementi CSS.
- Colori di sfondo creati con bordi CSS.
- Sovrapposizione con un altro elemento in primo piano: a volte il posizionamento risulta complicato.
- Elementi spostati all'esterno della finestra tramite CSS.
Descrizione della regola
Tutti gli elementi di testo devono avere un contrasto sufficiente tra il testo in primo piano e i colori di sfondo, in conformità con le soglie del rapporto di contrasto WCAG 2 AA.
L'algoritmo (in termini semplici)
Controlla tutti gli elementi di testo per garantire che il contrasto tra il testo in primo piano e i colori di sfondo rispetti le soglie del rapporto di contrasto WCAG 2 AA.
Nota:
Questa regola non segnalerà gli elementi di testo che hanno a background-image, sono oscurati da altri elementi o sono immagini di testo.
In questo modo vengono controllati anche gli elementi figlio dei pulsanti disabilitati, in modo che possano essere ignorati per evitare un risultato fuorviante.
Risorse
Fare riferimento all'elenco completo delle axe regole 4.10 .
Queste informazioni sono state utili?
La tua risposta è stata la seguente:
Data/ora in cui è stato inviato il feedback: