Esempi di contrasto colore sbagliato, misurati e corretti
Esempi di contrasto colore sbagliato
Esempi di contrasto colore sbagliato e come correggerli | We.Inc
Otto esempi comuni di contrasto colore insufficiente da pagine di negozi realistiche, ognuno con il rapporto WCAG calcolato, il motivo dell'errore e una correzione da provare dal vivo.
Un contrasto colore sbagliato è un testo o un controllo il cui colore è troppo simile a ciò che sta dietro, così molti visitatori faticano a leggerlo. I colpevoli abituali sono il testo grigio chiaro, il bianco su arancione o verde acceso, i suggerimenti segnaposto e i titoli sopra le foto. WCAG 2.2 richiede 4.5:1 per il testo normale; ogni esempio qui sotto mostra il suo rapporto.
Il rapporto di ogni esempio prima e dopo la correzione
Esempio
Prima
Dopo
Testo del corpo grigio chiaro
Testo segnaposto usato come etichetta
Testo bianco su un pulsante arancione acceso
Testo bianco su un badge verde chiaro
Testo grigio su una card grigia
Testo blu del brand su un pannello scuro
Titolo bianco su una foto chiara
Sono errori che compaiono di continuo sui siti delle piccole imprese, ricostruiti qui con i nostri colori così puoi vedere i numeri. Ognuno indica la regola che viola, e l'editor ti permette di provare una correzione e guardare il rapporto cambiare.
Trova il testo più piccolo e più chiaro della pagina: date, didascalie, footer, suggerimenti nei moduli.
Verificalo rispetto allo sfondo esatto su cui si trova, comprese card e banner colorati.
Per il testo su una foto, verifica rispetto alla parte più chiara dell'immagine dietro le lettere.
Correggi cambiando prima la luminosità. Una tonalità più scura o più chiara dello stesso colore mantiene l'aspetto del brand.
Non giudicare il contrasto solo su un monitor desktop luminoso. Guarda la pagina su un telefono all'aperto.
I pulsanti disattivati sono esenti in WCAG, ma assicurati che un pulsante attivo non sembri mai disattivato.
Anche il testo di hover e focus conta. Il W3C include il testo mostrato al passaggio del mouse o al focus da tastiera.
Se un banner di saldi usa un colore del brand chiaro, mettici sopra testo scuro invece che bianco.
I rapporti tra 3:1 e 4.5:1 vanno bene per titoli grandi e icone, non per i paragrafi.
Domande frequenti
Perché il testo bianco su arancione fallisce così spesso?
L'arancione e il giallo sono colori luminosi, quindi la loro luminanza è vicina a quella del bianco. Il nostro arancione di esempio #F5A623 dà solo circa 2:1 con il testo bianco.
Il testo segnaposto deve rispettare il contrasto?
Sì. La spiegazione del W3C del criterio di successo 1.4.3 include il testo segnaposto tra i testi coperti. Un'etichetta visibile sopra il campo resta comunque la soluzione migliore.
Come verifico il testo sopra una foto?
Misura rispetto alla parte dell'immagine direttamente dietro il testo, e considera l'area più chiara. Il W3C indica come errore le immagini di sfondo senza contrasto sufficiente.
Un link colorato senza sottolineatura è un errore di contrasto?
È un problema di uso del colore secondo il criterio di successo 1.4.1, che dice che il colore non deve essere l'unico modo visivo per trasmettere un'informazione. Una sottolineatura lo risolve.
I pulsanti disattivati in grigio sono un problema?
Il testo nei componenti dell'interfaccia inattivi non ha requisiti di contrasto secondo 1.4.3. Assicurati solo che il pulsante sia davvero inattivo, non solo stilizzato in quel modo.
Perché questi errori sono così comuni
I design vengono spesso approvati su uno schermo grande e luminoso, dove il testo chiaro sembra ancora nitido. La stessa pagina su un telefono vecchio con la luminosità bassa racconta un'altra storia.
Il resto lo fanno i colori del brand. Un arancione o un lime allegri stanno benissimo come forma, poi qualcuno ci mette sopra testo bianco perché i pulsanti di solito hanno testo bianco su un colore del brand.
La regola che non riguarda i rapporti
Il criterio di successo 1.4.1 è separato dai rapporti: chiede che il colore non sia mai l'unico modo per mostrare un'informazione. Link segnalati solo dal colore, campi obbligatori segnati solo in rosso e grafici distinti solo dalla tinta lo violano tutti.
Abbina il colore a qualcos'altro: una sottolineatura, un'icona, un'etichetta, un motivo.
Cosa non va in ogni esempio
Problema e correzione per ogni esempio
Esempio
Perché fallisce
Correzione
Testo del corpo grigio chiaro
Il grigio chiaro sembra elegante in un mockup, ma su un telefono alla luce del giorno sparisce.
Scurisci il grigio a #595959, che raggiunge 7:1 sul bianco.
Testo segnaposto usato come etichetta
Il suggerimento dentro un campo vuoto di solito è chiaro, e WCAG considera il testo segnaposto come testo che deve avere contrasto.
Tieni un'etichetta visibile sopra il campo e scurisci il suggerimento a #6B7280.
Testo bianco su un pulsante arancione acceso
I toni medi accesi come arancione e giallo sono chiari, quindi il testo bianco sopra ha poco contrasto.
Usa un arancione bruciato come #C2410C, oppure tieni l'arancione acceso e mettici sopra testo scuro.
Testo bianco su un badge verde chiaro
I badge di successo e di saldo usano spesso un verde acceso su cui il testo bianco non regge.
Usa un verde più profondo come #15803D dietro il testo bianco.
Testo grigio su una card grigia
Un grigio che va bene sul bianco può fallire su una card colorata, perché la card è più scura della pagina.
Usa un grigio più scuro, come #4B5563, sulle superfici colorate.
Testo blu del brand su un pannello scuro
Un blu medio che funziona sul bianco diventa spento sul grigio antracite: entrambi i colori stanno a metà della scala di luminosità.
Schiarisci il blu a #93C5FD sui pannelli scuri.
Titolo bianco su una foto chiara
Il testo sopra una foto si verifica rispetto alle parti dell'immagine dietro di esso. Un cielo chiaro o un muro bianco non lasciano al testo bianco alcun modo di risaltare.
Metti il titolo su una fascia piena o molto scurita, oppure spostalo fuori dall'immagine.
Un link indicato solo dal colore
Se un link si distingue dalla frase intorno solo per il colore, chi non distingue i colori non riesce a trovarlo.
Sottolinea i link nel testo del corpo. Il colore può restare.
Correzioni in CSS
Titolo leggibile su una foto
Una fascia scura dietro le parole dà al testo bianco uno sfondo stabile, qualunque cosa mostri la foto.
Link che non dipendono dal colore
Sottolinea i link dentro i paragrafi e dai al focus da tastiera un contorno chiaro.
Editor prima e dopo
Scegli un esempio, poi modifica i colori corretti per vedere fin dove puoi spingere la tonalità del tuo brand prima che fallisca.
Esempio
Colore del testo
Colore di sfondo
Contrasto {r}
Link rispetto al testo del corpo {r}
Raggiunge 4.5:1 per il testo del corpo.
Raggiunge solo 3:1, quindi al massimo testo grande o icone.
Sotto 3:1. Difficile da leggere per molte persone.
La correzione mantiene i colori e aggiunge una sottolineatura, così il colore non è più l'unico segnale.
Non è un colore hex
Consegna gratuita per ordini sopra $50 questa settimana.
Aggiungi al carrello
Il tuo indirizzo email
Il menu di primavera è arrivato
Leggi la nostra
politica sui resi
prima di ordinare.
I colori vengono verificati nel tuo browser con la formula WCAG 2.2.
Testo del corpo grigio chiaro
Testo segnaposto usato come etichetta
Testo bianco su un pulsante arancione acceso
Testo bianco su un badge verde chiaro
Testo grigio su una card grigia
Testo blu del brand su un pannello scuro
Un link indicato solo dal colore
Il grigio chiaro sembra elegante in un mockup, ma su un telefono alla luce del giorno sparisce.
Il suggerimento dentro un campo vuoto di solito è chiaro, e WCAG considera il testo segnaposto come testo che deve avere contrasto.
I toni medi accesi come arancione e giallo sono chiari, quindi il testo bianco sopra ha poco contrasto.
I badge di successo e di saldo usano spesso un verde acceso su cui il testo bianco non regge.
Un grigio che va bene sul bianco può fallire su una card colorata, perché la card è più scura della pagina.
Un blu medio che funziona sul bianco diventa spento sul grigio antracite: entrambi i colori stanno a metà della scala di luminosità.
Se un link si distingue dalla frase intorno solo per il colore, chi non distingue i colori non riesce a trovarlo.
Scurisci il grigio a #595959, che raggiunge 7:1 sul bianco.
Tieni un'etichetta visibile sopra il campo e scurisci il suggerimento a #6B7280.
Usa un arancione bruciato come #C2410C, oppure tieni l'arancione acceso e mettici sopra testo scuro.
Usa un verde più profondo come #15803D dietro il testo bianco.
Usa un grigio più scuro, come #4B5563, sulle superfici colorate.
Schiarisci il blu a #93C5FD sui pannelli scuri.
Sottolinea i link nel testo del corpo. Il colore può restare.