Contrasto degli elementi non testuali

Cosa richiede

La regola di contrasto 1.4.3 riguarda soltanto il testo; il criterio 1.4.11 estende una versione più permissiva (3:1 invece di 4.5:1) ad altre due categorie. In primo luogo, gli indicatori visivi dei componenti dell’interfaccia — ciò che segnala che un pulsante è un pulsante, dove si trova l’anello di focus, dove si trova il bordo del campo modulo — devono raggiungere un rapporto di 3:1 rispetto alla superficie adiacente. In secondo luogo, le parti di grafica significativa che l’utente deve poter identificare — barre di grafici, icone che comunicano uno stato, punti indicatori — devono raggiungere un rapporto di 3:1.

Come soddisfarlo

• Fornire a ogni campo modulo un bordo visibile con contrasto minimo di 3:1 rispetto allo sfondo della pagina.
• Applicare agli indicatori di focus (outline :focus-visible) un contrasto minimo di 3:1 sia rispetto al componente sia rispetto alla pagina.
• Per i pulsanti fantasma (ghost) o con solo contorno, il bordo stesso deve avere un contrasto di 3:1 rispetto allo sfondo della pagina.
• Per gli interruttori a levetta (toggle switch), la traccia e il cursore nella posizione on/off devono avere un contrasto di 3:1 nel punto di contatto.
• Per le icone che veicolano un significato (icona informativa «i», triangolo di avviso, segno di spunta), i tratti dell’icona devono avere un contrasto di 3:1 rispetto al loro sfondo.
• Per le serie di grafici, i colori usati per distinguere barre e linee devono differire di 3:1 tra loro, oppure essere abbinati a pattern o texture.

Errori comuni

• Campi modulo privi di bordo visibile, o con un bordo #e5e5e5 su #fff a 1,3:1 — invisibile agli utenti con ipovisione.
• Outline di focus predefinita del browser sovrascritta con outline: none e mai sostituita.
• Pulsanti fantasma con testo bianco su sfondo trasparente e bordo grigio da 1px — il pulsante risulta di fatto invisibile.
• Interruttori a levetta con un cursore appena visibile su una traccia quasi identica nella posizione «off».
• Icone di stato nell’angolo di una scheda (segno di spunta verde, x rossa) dove il colore contrasta a malapena con lo sfondo della scheda.
• Grafico a torta con colori delle fette a 2:1 tra loro — gli utenti vedenti percepiscono ancora i bordi, ma a fatica; gli utenti con ipovisione vedono un unico blocco indistinto.

Perché è importante

Il criterio 1.4.11 è stato aggiunto nella versione 2.1 e coglie spesso i team di sorpresa — la maggior parte dei controlli di contrasto riguarda soltanto il testo. I bordi dei campi modulo, gli anelli di focus e i pulsanti fantasma sono i pattern di fallimento più tipici. Strumenti come axe e Stark ora verificano il contrasto degli elementi non testuali, ma i designer continuano a trascurarlo in fase progettuale perché il modello mentale dominante è «contrasto = contrasto del testo». La correzione di solito comporta l’ispessimento dei bordi e l’approfondimento dei grigi nel design system.