Contrasto dei colori: testo leggibile per tutti

Il contrasto dei colori è la differenza di luminosità tra il testo e il colore che ha dietro, e decide se le persone riescono a leggere le tue parole. Le Web Content Accessibility Guidelines (WCAG) lo misurano con un rapporto da 1:1, dove i due colori sono identici, a 21:1, nero su bianco. Per il livello AA, il testo normale richiede almeno 4,5:1 e il testo grande almeno 3:1. Tutto il resto di questa guida serve a raggiungere quei numeri senza rendere il design timido.

Il contrasto conta per tutti, non solo per chi ha una vista debole. Telefoni sotto il sole, proiettori fiochi, monitor economici e occhi stanchi riducono la differenza tra i colori. I design con contrasto sufficiente, semplicemente, vengono letti di più.

I rapporti di contrasto WCAG in parole semplici

Tre regole delle WCAG 2 coprono quasi ogni decisione di design. Vengono dai criteri di successo del W3C e sono quelle a cui si riferiscono la maggior parte degli audit e delle normative sull’accessibilità.

Due dettagli mettono in difficoltà. Primo, «grande» dipende dalla dimensione effettiva, quindi un titolo da 24 px su un telefono che lo rimpicciolisce può smettere di contare come grande. Secondo, un pulsante disattivato è esente, ma un segnaposto grigio chiaro che le persone devono capire non lo è.

Come si calcola il rapporto di contrasto

Il rapporto confronta la luminanza relativa dei due colori: quanta luce emette ciascuno, pesata come la vede l’occhio. Il verde contribuisce di più, il rosso meno e il blu pochissimo, ed è per questo che un blu saturo può essere sorprendentemente scuro e un giallo sorprendentemente chiaro. La formula è (L1 + 0.05) / (L2 + 0.05), dove L1 è il colore più chiaro.

// WCAG 2 contrast ratio between two hex colours
const channel = (c) => {
  c /= 255
  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
}
const luminance = (hex) => {
  const [r, g, b] = [1, 3, 5].map((i) => channel(parseInt(hex.slice(i, i + 2), 16)))
  return 0.2126 * r + 0.7152 * g + 0.0722 * b
}
const contrast = (a, b) => {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x)
  return (hi + 0.05) / (lo + 0.05)
}

contrast('#767676', '#ffffff') // 4.54, passes for body text
contrast('#777777', '#ffffff') // 4.48, fails

Non serve calcolarlo a mano. Il verificatore di contrasto di WebAIM prende due codici esadecimali e ti dice quali livelli superano, e il selettore colore degli strumenti per sviluppatori di Chrome mostra il rapporto di qualsiasi testo ispezioni.

Coppie di colori che passano e che falliscono

I colori dei brand cadono spesso nel mezzo scomodo, troppo scuri per il testo scuro e troppo chiari per il testo bianco. Verdi medi, arancioni, rosa e azzurri sono i soliti sospetti. Ecco abbinamenti comuni, con i loro rapporti reali.

Perché i gradienti rendono il contrasto più difficile

Uno sfondo a tinta unita ha un solo rapporto di contrasto. Un gradiente ne ha uno diverso in ogni punto. Il testo bianco che passa senza problemi sull’estremità scura di una sfumatura può fallire del tutto su quella chiara, e un titolo che attraversa il gradiente passa e non passa nella stessa riga.

La regola è semplice: verifica il punto più chiaro dietro il testo chiaro, o il punto più scuro dietro il testo scuro. Se il punto peggiore passa, passa l’intera riga. I colori medi e i campioni del contagocce presi dal centro ti trarranno in inganno.

Come correggere il contrasto su un gradiente

1. 1

   Sposta le parole sull’estremità calma

   Metti il testo sulla parte più scura o più chiara del gradiente e lascia che la transizione luminosa avvenga lontano da esso.

2. 2

   Restringi la gamma dietro il testo

   Tieni la parte del gradiente che sta dietro le parole entro una piccola gamma di luminosità. Il resto della tela può essere audace quanto vuoi.

3. 3

   Aggiungi un velo morbido

   Una dolce sfumatura scura o chiara dietro il testo, come un gradiente da trasparente a nero al 30%, alza il contrasto senza un riquadro visibile.

4. 4

   Più grande e più marcato

   Il testo grande richiede solo 3:1. Un peso maggiore e una dimensione più grande possono trasformare una riga che non passa in una che passa.

5. 5

   Prova su un telefono vero

   Controlla il design alla luminosità massima e a quella bassa, all’aperto se puoi. I rapporti sono il minimo, non l’obiettivo.

.card {
  background: linear-gradient(90deg, #1f0b3a 0%, #7c3aed 55%, #f472b6 100%);
  color: #ffffff;
}
/* A soft scrim keeps white text above 4.5:1 across the pink end */
.card .text {
  background: linear-gradient(90deg, transparent 0%, rgb(31 11 58 / 0.55) 60%);
  padding: 1rem 1.25rem;
}

È l’idea alla base della leggibilità di Gradiently: un Mark sa dove sono le tue parole, sposta dietro di esse la sua zona più calma e a maggior contrasto e sceglie inchiostro chiaro o scuro per ogni riga dalla propria palette. Per altre tecniche che funzionano ovunque, leggi testo su un gradiente e testo leggibile sulle foto. Per le interfacce scure in particolare, vedi progettare per la modalità scura.