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 18 pt o 14 pt 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. Immetti ogni colore nel Checker di Contrasto della Tavolozza di Colori Deque.
4. Troverai una delle seguenti:
   • Accessibile: Il rapporto di contrasto colore soddisfa il minimo richiesto per la dimensione del testo.
   • Non accessibile: Il rapporto di contrasto colore non soddisfa il minimo richiesto per la dimensione del testo.

Correggi Problemi

I problemi di contrasto cromatico si verificano quando il colore del testo e il colore dello sfondo sono troppo simili in luminosità. Per risolvere il problema, utilizza l'Analizzatore di Contrasto di Colore Deque per trovare colori che soddisfano il minimo richiesto in base alla dimensione del testo. Regola sia il colore del testo che il colore dello sfondo finché non viene raggiunto il rapporto di contrasto richiesto.

Posso Ignorare Questa Regola?

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

Domande Frequenti

Ci sono limitazioni note per questa regola?\

Sì.

• Questa regola potrebbe produrre risultati inaccurati quando il testo è su uno sfondo con molti colori, come un gradiente, un'immagine o uno sfondo semitrasparente. Se ritieni che un risultato sia errato, utilizza il Deque Color Contrast Analyzer per confermare il rapporto tra i colori del testo e dello sfondo.
• La regola del Contrasto di Colore utilizza il framework Vision di Apple (Riconoscimento Ottico dei Caratteri, o OCR) per leggere il testo dentro i confini di un elemento. L'OCR può occasionalmente identificare erroneamente piccole icone o simboli decorativi - come le frecce a caret (<), i punti elenco, i simboli decorativi - come testo. Quando ciò accade, la regola del Contrasto di Colore 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 tra le scansioni, lo stesso elemento può apparire nei risultati del Contrasto di Colore 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 di Colore 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: Assicurarsi che esista un rapporto di contrasto di almeno 4,5:1 tra il testo (e le immagini di testo) e lo sfondo dietro il testo
• W3C Comprendere il Criterio di Successo 1.4.3: Contrasto (Minimo)