Un solo valore di colore: correggere il contrasto senza un rifacimento

Il numero che chiede lo standard

Il contrasto si misura come un rapporto tra la luminosità del testo e quella di ciò che sta dietro. Nero su bianco fa 21 a 1. Lo standard di accessibilità chiede almeno 4,5 a 1 per il testo normale e 3 a 1 per il testo grande, cioè da circa 24 pixel, o 19 pixel in grassetto.

Il rapporto viene dalla ricerca su quanta differenza serve a una persona con una vista moderatamente ridotta per leggere comodamente. È il numero che usano ogni strumento di verifica automatico, ogni valutatore di gare pubbliche e ogni lettera di reclamo.

I grigi che passano e quelli che non passano

Su uno sfondo bianco, il limite cade in una fascia stretta. Alcuni valori, con i loro rapporti:

#999999   2.85 to 1   fails
#949494   2.99 to 1   fails
#8a8a8a   3.45 to 1   passes only as large text
#767676   4.54 to 1   passes
#666666   5.74 to 1   passes
#595959   7.00 to 1   passes the stricter AAA level

Noti quanto sono vicini i valori che non passano a quelli che passano. Un tema che ha scelto #999 per le didascalie era a una sfumatura dalla conformità. Nessuno noterà il cambiamento affiancando le due versioni. Una persona che legge su un telefono all’aperto potrà leggere quelle didascalie per la prima volta.

Perché è un solo valore

I temi e i page builder definiscono una palette, e il grigio chiaro vi compare una volta. Ogni didascalia, indicazione di un modulo, riga del piè di pagina, data ed etichetta secondaria punta a quell’unica voce. La cambi e cambia tutto il sito.

In un tema a blocchi, la palette si trova nell’editor del sito, in Stili. Nei temi più vecchi, è nel personalizzatore o in un foglio di stile che mantiene uno sviluppatore.

È anche il motivo per cui non è un rifacimento. Nulla si sposta e nessun font cambia. Il sito ha lo stesso aspetto per tutti, tranne che per le persone che prima non riuscivano a leggerne una parte.

I colori del marchio sono l’altro caso

Il blu o il verde di un’organizzazione è stato di solito scelto per un logo, non per il testo. I colori del marchio chiari e vivaci spesso passano come sfondo dietro un testo bianco e non passano come testo su bianco. Il nostro blu, #1849B8, fa 7,8 a 1 su bianco in entrambi i sensi, che è tanto fortuna quanto scelta. Verifichi il suo in entrambi i sensi prima di usarlo per i link.

Quando un colore del marchio non passa come testo, lo tenga per sfondi, pulsanti e titoli grandi, e scelga una variante più scura per i link e il testo di dimensione normale. Due tonalità della stessa tinta si leggono come un unico marchio.

Mantenga la gerarchia, perda il grigio chiaro

I designer usano il grigio chiaro per mettere in secondo piano il testo secondario. Dimensione e peso fanno lo stesso lavoro senza ostacolare la lettura. Una didascalia di 14 pixel in un grigio che passa resta in secondo piano accanto a un testo corrente di 17 pixel.

Mettere tutto in nero per correggere il contrasto appiattisce la pagina. Regolare un valore e lasciare che la dimensione porti la gerarchia conserva il design.

Anche il testo segnaposto dentro i campi dei moduli non passa. I browser lo mostrano chiaro per impostazione predefinita, e non passa quasi da nessuna parte. Se ogni campo ha un’etichetta visibile sopra, il testo segnaposto diventa inutile.

Che cosa controlla l’audit gratuito

L’audit gratuito esegue la regola automatica del contrasto su tutta la home page e segnala ogni elemento che non la supera, con il rapporto misurato e i colori coinvolti. Una home page con trenta errori ha di solito una sola causa. Trovi il valore condiviso, lo cambi e riesegua il controllo.