Guida al contrasto dei colori WCAG
Comprendere i requisiti di contrasto AA e AAA, come testare i componenti di testo e dell'interfaccia utente e come correggere le coppie non riuscite.
FAQ
- Di quale rapporto ho bisogno per i pulsanti?
- I componenti dell'interfaccia utente e gli oggetti grafici generalmente richiedono almeno 3:1 rispetto ai colori adiacenti. Il testo all'interno dei pulsanti richiede ancora 4,5:1 (AA) o 3:1 per il testo di grandi dimensioni.
Nozioni di base sul contrasto WCAG
WCAG 2.x definisce i rapporti di contrasto minimi tra i colori del testo e dello sfondo. Il livello AA è l'obiettivo legale e di prodotto comune; AAA è più rigoroso e consigliato per il corpo del testo, quando possibile.
Il contrasto si basa sulla luminanza relativa, non sulla tonalità. Due colori possono apparire diversi ma non riescono a contrastare se la loro luminosità è troppo simile.
Flusso di lavoro di prova
Scegli i colori di primo piano e di sfondo dal tuo sistema di progettazione. Eseguili attraverso un controllo del contrasto. Nota le soglie di testo normali e quelle di grandi dimensioni.
Prova gli stati di passaggio del mouse, focus e disattivato, non solo i pulsanti e i collegamenti predefiniti.