Contrasto Colore

Scopri come stiamo utilizzando l'intelligenza artificiale per questa regola!

Cosa Controlliamo

Assicurati che il contrasto cromatico tra il testo e il suo sfondo soddisfi le soglie minime di rapporto previste da WCAG 2 AA.

Secondo WCAG 2.0 1.4.3 AA, la presentazione visiva del testo deve avere un rapporto di contrasto di almeno 4.5:1 per il testo normale e 3:1 per il testo grande. Il testo grande è definito come almeno 18pt o 14pt grassetto.

Esempio di Fallimento ❌

Esempio di Successo ✅

Panoramica

• Questa regola ha un impatto serio per gli utenti
• Il testo normale deve avere un rapporto di contrasto di almeno 4.5:1 rispetto al suo sfondo
• Il testo grande (almeno 18 pt o 14 pt grassetto) deve avere un rapporto di contrasto di almeno 3:1
• Questa regola controlla il contrasto colore degli elementi di testo statici e del testo all'interno di elementi interattivi
• Questa regola utilizza l'IA per rilevare problemi di contrasto - i risultati potrebbero richiedere una verifica manuale su sfondi complessi

Impatto sugli Utenti

Il livello di contrasto cromatico influisce su quanto sia facile o difficile distinguere il testo dallo sfondo. Quando i colori del testo e dello sfondo sono troppo simili in luminosità, il testo diventa difficile o impossibile da leggere.

Questo riguarda chiunque in condizioni di scarsa illuminazione, all'aperto sotto il sole o utilizzando uno schermo più vecchio — ma è particolarmente un problema per gli utenti con ipovisione. Ciò che sembra un'etichetta leggibile per un utente, può apparire come una sfocatura quasi invisibile per un altro.

Conferma il Problema di Contrasto Colore

1. Fai una delle seguenti azioni:
   • Apri la tua app in un simulatore, O
   • Fai uno screenshot dell'app sul tuo dispositivo fisico. Invia lo screenshot a te stesso e aprilo sul tuo computer.
2. Usa un selettore di colori per:
   1. Ottenere il colore più fedele dell'elemento di testo.
   2. Ottenere il colore più fedele di ogni colore di sfondo distinto dietro il testo.
3. Inserisci ogni colore nel Verificatore di Contrasto della Palette di Colori di Deque.
4. Troverai una delle seguenti:
   • Accessibile: il rapporto di contrasto del colore soddisfa il minimo richiesto per la sua dimensione del testo.
   • Inaccessibile: il rapporto di contrasto del colore non soddisfa il minimo richiesto per la sua dimensione del testo.

Correggi Problemi

I problemi di contrasto dei colori si verificano quando il colore del testo e del colore di sfondo sono troppo simili in luminosità. Per risolvere il problema, utilizza l'Analizzatore di Contrasto dei Colori di Deque per trovare colori che rispettino il minimo richiesto in base alla dimensione del testo. Regola il colore del testo o il colore di sfondo fino a raggiungere il rapporto di contrasto richiesto.

Posso Ignorare Questa Regola?

Il contrasto dei colori ha un Impatto serio per gli utenti. Un adeguato contrasto dei colori è un requisito WCAG AA, quindi dovrebbe essere una priorità. In rari casi potrebbe essere accettabile ignorare questa regola — ad esempio, se il testo è puramente decorativo e non trasmette nessuna informazione. Scopri di più su ignorare le regole.

Domande Frequenti

Ci sono limitazioni note per questa regola?\

Sì.

• Questa regola può produrre risultati inaccurati quando il testo si trova su uno sfondo con molti colori, come un gradiente, un'immagine o uno sfondo semi-trasparente. Se pensi che un riscontro sia errato, usa l'Analizzatore di Contrasto dei Colori di Deque per confermare il rapporto tra i colori del testo e dello sfondo.
• La regola del contrasto dei colori utilizza il framework Vision di Apple (riconoscimento ottico dei caratteri, o OCR) per leggere il testo all'interno dei confini di un elemento. L'OCR può occasionalmente scambiare piccoli glifi simili a icone - come le chevron delle frecce indietro (<), i punti elenco, i simboli decorativi - per testo. Quando ciò accade, la regola del contrasto dei colori viene applicata a un elemento che non contiene testo leggibile, il che può produrre un risultato per un pulsante contenente solo icone. Poiché l'output dell'OCR non è deterministico attraverso le scansioni, lo stesso elemento può apparire nei risultati del contrasto dei colori in una scansione e essere riportato come "INAPPLICABILE" nella successiva. Questa è una caratteristica nota dell'OCR, non un errore nella regola. Per aggirare questo problema, puoi utilizzare le ignore API per sopprimere i risultati del contrasto dei colori per gli elementi interessati. Scopri di più su ignorare le regole.

Risorse

Pagine dei Corsi di Deque University

• SC 1.4.3 Contrasto (Minimo)
• Colore
• Contrasto

Nota: L'accesso completo alle risorse di Deque University richiede un abbonamento.

Altre Risorse

• Tecnica WCAG G18: Garantire che esista un rapporto di contrasto di almeno 4.5:1 tra testo (e immagini di testo) e lo sfondo dietro il testo
• W3C Comprendere il Criterio di Successo 1.4.3: Contrasto (Minimo)