Questa traduzione non è ancora stata rivista dalla redazione. Fa fede la versione tedesca. Deutsche Fassung →
Barrierefreiheit
Quale contrasto serve per pulsanti e campi di input sui siti Web?
Pulsanti, campi di input e grafiche significative hanno bisogno di un rapporto di contrasto di almeno 3:1 rispetto al loro ambiente. Questa soglia viene dallo standard WCAG. Assicura che un visitatore con vista ridotta riconosca dove può fare clic e dove può scrivere — un campo di input bianco con bordo grigio chiaro su sfondo bianco è praticamente invisibile.
Gli elementi di controllo devono distinguersi
Mentre la nota regola di contrasto riguarda il testo, qui si tratta di tutto il resto visibile che trasporta una funzione: il bordo del campo di input, l'area del pulsante, l'icona della lente di ingrandimento della ricerca, il segno di spunta nella casella di controllo. Il design moderno e molto ridotto è qui la trappola più frequente — i bordi dei campi grigio chiaro su sfondo bianco sembrano eleganti, ma spesso si collocano ben al di sotto del 3:1 richiesto. Un visitatore con vista che declina non vede allora un modulo con campi riconoscibili: non sa dove puntare il cursore. Anche i simboli senza etichetta di testo — come il menu hamburger — devono distinguersi dal background con almeno 3:1, altrimenti la navigazione non esiste per lui.
Come il nostro nucleo di misurazione misura il contrasto degli elementi di controllo
Il nostro nucleo di misurazione seleziona un campione degli elementi di controllo del tuo sito — campi di input, pulsanti, pulsanti di collegamento progettati — e fotografa ognuno con il suo ambiente nel browser. Dai pixel fotografici calcola la luminosità del bordo, del riempimento e dell'ambiente, e da questo il vero rapporto di contrasto del limite dell'elemento. Se i limiti misurati sono al di sotto di 3:1, il rapporto segnala questo consapevolmente come caso di prova riscontrato e non immediatamente come violazione: un campo apparentemente debole può essere portato visivamente da un contenitore circostante — questo è giudicato con lo standard Gold da una persona in base alla foto dello schermo fornita. Il criterio è considerato soddisfatto solo con un campione sufficientemente grande e completamente innocuo; gli oggetti puramente grafici come diagrammi rimangono una questione di test manuale.
Beispiele
Eingabefeld mit blassem Rahmen
input { border: 1px solid #dddddd; background: #fff; } /* 1,3:1 */input { border: 1px solid #767676; background: #fff; } /* 4,5:1 */Rahmen, Symbole und Fokusrahmen brauchen 3:1 zum Hintergrund, sonst ist das Feld nicht als Feld erkennbar.
- Controlla i tuoi moduli: ogni campo di input ha bisogno di un bordo o di un riempimento che si distingue chiaramente dallo sfondo.
- Chiedi alla tua agenzia di controllare i colori dei bordi dei campi rispetto alla soglia 3:1 e di scurirli se necessario.
- Controlla i simboli senza testo — ricerca, menu, carrello — per il contrasto sufficiente con lo sfondo.
- Fai attenzione agli stati: anche il contrassegno di una scheda selezionata o di una casella di controllo attiva ha bisogno di 3:1.
- Guarda i tuoi moduli da due metri di distanza — se i campi scompaiono otticamente, il contrasto è troppo debole.