Contrasto cromatico

Scopri come utilizziamo l'intelligenza artificiale per questa regola!

Cosa Verifichiamo

Assicurati che il contrasto cromatico tra il testo e il suo sfondo soddisfi le soglie minime del rapporto 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 in grassetto.

Esempio Non Conforme ❌

Esempio Conformante ✅

In Sintesi

• Questa regola ha un impatto significativo sugli 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 in grassetto) deve avere un rapporto di contrasto di almeno 3:1
• Questa regola verifica il contrasto cromatico degli elementi di testo statici e del testo all'interno di elementi interattivi
• Questa regola utilizza l'intelligenza artificiale per rilevare problemi di contrasto - i risultati potrebbero richiedere una verifica manuale su sfondi complessi

Impatto sugli Utenti

Il livello di contrasto cromatico influenza quanto facilmente o difficilmente si distingue il testo dal suo sfondo. Quando i colori del testo e dello sfondo sono troppo simili in luminosità, il testo diventa difficile o impossibile da leggere.

Questo influisce su chiunque si trovi in condizioni di scarsa illuminazione, all'aperto al sole, o utilizzi uno schermo più vecchio — ma è particolarmente problematico per gli utenti con vista ridotta. Ciò che appare come un'etichetta leggibile a un utente può apparire come una macchia quasi invisibile a un altro.

Conferma il Problema di Contrasto Cromatico

1. Fai una delle seguenti operazioni:
   • Apri la tua app in un emulatore, OPPURE
   • 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ù preciso dell'elemento di testo.
   2. Ottenere il colore più preciso di ciascun colore di sfondo distinto dietro il testo.
3. Inserisci ogni colore nel Deque Color Palette Contrast Checker.
4. Troverai uno dei seguenti:
   • Accessibile: Il rapporto di contrasto cromatico soddisfa il minimo richiesto per la sua dimensione del testo.
   • Non accessibile: Il rapporto di contrasto cromatico non soddisfa il minimo richiesto per la sua dimensione del testo.

Risolvere i Problemi

I problemi di contrasto cromatico si verificano quando il colore del testo e quello dello sfondo sono troppo simili in luminosità. Per risolvere il problema, usa il Deque's Color Contrast Analyzer per trovare colori che soddisfano il minimo richiesto in base alla dimensione del testo. Regola il colore del testo o il colore dello sfondo finché non si ottiene il rapporto di contrasto richiesto.

Posso Ignorare Questa Regola?

Il contrasto cromatico ha un Impatto significativo per gli utenti. Un adeguato contrasto cromatico è un requisito WCAG AA, quindi questo dovrebbe essere una priorità da risolvere. In rari casi potrebbe essere accettabile ignorare questa regola — ad esempio, se il testo è puramente decorativo e non fornisce alcuna informazione. Scopri di più su ignorare regole.

Domande Frequenti

Ci sono limitazioni note con questa regola?
Sì. Questa regola potrebbe produrre risultati imprecisi 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 risultato sia errato, utilizza il Deque Color Contrast Checker per confermare il rapporto tra i colori del testo e dello sfondo.

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 il testo (e le immagini di testo) e lo sfondo dietro il testo
• W3C Comprendere il Criterio di Successo 1.4.3: Contrasto (Minimo)