Contrasto dei colori: perché un 4,5 arrotondato può non bastare
Confronta i rapporti sRGB senza arrotondarli e distingui il controllo di due colori dall’accessibilità di un’intera interfaccia.
Metodo
Il contrasto esprime la differenza di luminanza relativa fra testo e sfondo effettivo. Controlla i colori dipinti all’interno del badge. Un testo pallido su fondo chiaro può essere illeggibile anche quando il pannello circostante è scuro.
Per colori sRGB opachi, normalizza e linearizza i canali rosso, verde e blu prima di calcolare la luminanza relativa. Dividi la luminanza più chiara più 0,05 per quella più scura più 0,05. Nero su bianco produce 21:1; colori identici producono 1:1.
Il grigio RGB 119,119,119 su bianco dà circa 4,478089:1; RGB 118,118,118 dà circa 4,542225:1. Entrambi possono apparire come 4,5 con una cifra decimale. Solo il secondo raggiunge però la soglia AA di 4,5:1 per testo normale. Decidi usando il rapporto non arrotondato.
Mostra dati
- RGB 119,119,119
- 4.478089 :1 4.478089… < 4.5
- RGB 118,118,118
- 4.542225 :1 4.542224… > 4.5
Esempio svolto
Il grigio RGB 119,119,119 su bianco dà circa 4,478089:1; RGB 118,118,118 dà circa 4,542225:1. Entrambi possono apparire come 4,5 con una cifra decimale. Solo il secondo raggiunge però la soglia AA di 4,5:1 per testo normale. Decidi usando il rapporto non arrotondato.
Il testo grande che soddisfa i requisiti di dimensione e peso ha soglia AA di 3:1. Un badge largo non rende grande il carattere. Per testo normale, la soglia AAA è 7:1. Individua la categoria corretta prima di interpretare l’esito.
L = 0.2126 R + 0.7152 G + 0.0722 B (linear sRGB)
contrast = (lighter L + 0.05) / (darker L + 0.05)
RGB(119,119,119) on white ≈ 4.478089 : 1
RGB(118,118,118) on white ≈ 4.542225 : 1
Un abbinamento di colori non certifica tutta la pagina. Verifica passaggio del puntatore, focus, errori e stati disattivati, entrambi i temi, trasparenze, sfumature e immagini. Controlla anche dimensione del testo, tastiera e indicatori non testuali. Le etichette chiare devono affiancare il colore.
Mostra dati
- RGB 119,119,119
- #777777
- RGB 255,255,255
- #FFFFFF
- Risultato
- 4.478089 : 1
Controlli e limiti
Un abbinamento di colori non certifica tutta la pagina. Verifica passaggio del puntatore, focus, errori e stati disattivati, entrambi i temi, trasparenze, sfumature e immagini. Controlla anche dimensione del testo, tastiera e indicatori non testuali. Le etichette chiare devono affiancare il colore.