Questa traduzione non è ancora stata rivista dalla redazione. Fa fede la versione tedesca. Deutsche Fassung →
Barrierefreiheit
Quale contrasto di colore è obbligatorio per il testo sui siti Web?
Il testo normale ha bisogno di un rapporto di contrasto di almeno 4,5:1 rispetto allo sfondo, testo grande — da circa 24 pixel o grassetto da circa 18,7 pixel — almeno 3:1. Queste soglie provengono dallo standard internazionale WCAG. Garantiscono che anche le persone con vista indebolita possano leggere i Suoi testi — e ogni visitatore alla luce del sole sul telefono.
Il rapporto di contrasto spiegato in linguaggio ordinario
Il rapporto di contrasto descrive quanto differiscono il colore del testo e il colore dello sfondo in luminosità. Il nero su bianco raggiunge il valore massimo di 21:1 e si legge facilmente. Il moderno grigio chiaro su bianco spesso scende sotto 3:1 — per le persone con vista indebolita dall'età tale testo svanisce in una superficie grigia. Interessati non sono solo i non vedenti: anche il cliente che cerca i Suoi orari di apertura alla luce del sole sul telefono fallisce con contrasti deboli. La soglia di 4,5:1 per il testo normale e 3:1 per il testo grande è il compromesso stabilito nello standard tra libertà di design e leggibilità affidabile.
Come il nostro nucleo di misurazione misura il contrasto — anche sulle immagini
La misurazione di base è gestita da axe-core: calcola il rapporto di contrasto per i testi del Suo sito dal colore del testo e dello sfondo. Per il testo su foto o gradienti, nessuno strumento può semplicemente leggere lo sfondo — esattamente lì continua il nostro nucleo di misurazione: rende il testo brevemente invisibile, fotografa il posto nel browser, calcola la luminosità dello sfondo effettivo pixel per pixel e da questo determina il contrasto vero contro il colore del testo. Così una questione di "indeterminata" diventa un giudizio affidabile. Ogni posizione che fallisce viene documentata nel rapporto con il valore misurato, la soglia richiesta e una foto di prova — Lei vede esattamente quale posizione di testo è interessata.
Migliorare il contrasto senza sacrificare il design
Un buon contrasto non richiede un design bianco e nero. Di solito basta scurire leggermente il colore del testo — un grigio chiaro diventa un antracite medio che irradia lo stesso contenimento e rimane comunque leggibile. Per il testo sulle foto, i trucchi collaudati aiutano: una superficie scura semitrasparente dietro il testo, una sfumatura al bordo inferiore dell'immagine o lo spostamento del testo su una zona tranquilla dell'immagine. Di regola non è necessario modificare i Suoi colori di marca — spesso basta usarli per ampi sfondi e scegliere per il testo una variante più scura o più chiara della stessa famiglia di colori.
Beispiele
Grauer Fließtext auf Weiß
body { color: #999999; background: #ffffff; } /* 2,8:1 */body { color: #595959; background: #ffffff; } /* 7,0:1 */Die Grenze für normalen Text ist 4,5:1, für großen Text ab 24 Pixel 3:1. Der Wert steht im Prüfbericht je Fundstelle.
Weiße Schrift auf Markenfarbe
.knopf { color: #fff; background: #5aa9ff; } /* 2,5:1 */.knopf { color: #fff; background: #1a5fb4; } /* 6,3:1 */- Verifichi i testi grigi del Suo sito web per primo — piè di pagina, didascalie e suggerimenti modulo più spesso rimangono al di sotto della soglia.
- Prega la Sua agenzia di controllare tutti i colori del testo rispetto ai valori di contrasto 4,5:1 e 3:1 e di documentare i valori.
- Posizioni il testo sulle foto con uno sfondo semitrasparente scuro, invece di affidare la leggibilità all'immagine.
- Consideri il Suo sito alla luce del giorno luminoso su un cellulare — ciò che non funziona lì non funzionerà mai per i visitatori con visione ridotta.
- Documenti le combinazioni di colori controllate nel Suo manuale di stile, in modo che le nuove pagine le possano utilizzare.