Colori e unità

Un testo grigio chiaro #bbbbbb su bianco ha un rapporto di contrasto di 1.92 a 1. Le WCAG chiedono almeno 4.5 a 1 per il testo normale.

Modi di scrivere un colore

Il CSS accetta i colori in diverse notazioni, e alla fine sono tutte la stessa cosa: quantità di luce rossa, verde e blu sullo schermo. I colori con nome come red, navy o rebeccapurple sono facili da leggere ma limitati. La notazione esadecimale scrive rosso, verde e blu con due cifre esadecimali ciascuno, da 00 a ff (da 0 a 255): #1a5fb4 è 26 di rosso, 95 di verde e 180 di blu, un blu medio. rgb(26 95 180) dice la stessa cosa in decimale. hsl(210 80% 40%) descrive un colore con tonalità (un angolo sulla ruota dei colori, dove 0 è rosso, 120 verde e 240 blu), saturazione e luminosità, così è facile ottenere una sfumatura più chiara o più scura della stessa tonalità cambiando un solo numero.

color: navy;
color: #1a5fb4;              /* same as #1A5FB4 */
color: #36c;                 /* short form of #3366cc */
color: rgb(26 95 180);
color: rgb(26 95 180 / 50%); /* half transparent */
color: hsl(210 80% 40%);
background-color: transparent;

Un quarto valore, dopo una barra, imposta il canale alfa: rgb(0 0 0 / 50%) è nero con opacità a metà, quindi ciò che sta dietro si vede in trasparenza. color imposta il colore del testo, background-color il riempimento dietro un elemento e border-color il suo bordo. La parola chiave currentColor indica il colore del testo dell'elemento, comoda per icone e bordi che devono essere intonati al testo.

Il contrasto non è facoltativo

Un testo troppo vicino per luminosità al suo sfondo è difficile da leggere per molte persone: chi ha una vista debole, i lettori anziani e chiunque legga il telefono al sole. Le WCAG 2.2, le linee guida del W3C sull'accessibilità, lo misurano come rapporto di contrasto, da 1 a 1 (nessuna differenza) a 21 a 1 (nero su bianco). Il criterio di successo 1.4.3 chiede almeno 4.5 a 1 per il testo normale e 3 a 1 per il testo grande, che le WCAG definiscono come almeno 18 punti, o 14 punti in grassetto. Il grigio scuro #767676 su bianco passa per un soffio con 4.54 a 1; #777777 non passa per un soffio con 4.48. Gli strumenti per sviluppatori del browser mostrano il rapporto quando ispezioni un elemento di testo, quindi non serve tirare a indovinare.

Il colore non deve mai essere l'unico modo per mostrare un'informazione. Un modulo che segnala gli errori solo colorando di rosso un bordo esclude chi non distingue bene il rosso: aggiungi anche un messaggio o un'icona.

Unità assolute e relative

Le lunghezze vogliono un'unità, tranne lo zero. px è il pixel CSS, un'unità fissa; sugli schermi ad alta densità un pixel CSS copre diversi pixel fisici, così all'occhio resta più o meno della stessa grandezza. Le unità relative si adattano a qualcos'altro. em è relativa alla dimensione del carattere dell'elemento stesso, quindi padding: 0.5em su un testo di 20 pixel vale 10 pixel. rem è relativa alla dimensione del carattere della radice (html), che nei browser è 16 pixel a meno che il lettore non l'abbia cambiata, quindi 1.25rem vale di solito 20 pixel. % è relativa al genitore, di solito alla sua larghezza. vw e vh sono centesimi della larghezza e dell'altezza del viewport, e ch è circa la larghezza della cifra zero nel carattere in uso.

Quale usare? Dimensionare il testo in rem rispetta chi legge: se qualcuno imposta il browser con un testo più grande, tutto ciò che è in rem cresce con lui, mentre un testo fissato in px potrebbe non farlo. Il padding in em cresce con il testo che circonda. I pixel vanno bene per le cose che non devono scalare, come un bordo di 1 pixel.