Colore e design
Il design comincia qui dal colore: come l’occhio trasforma la luce in colore, come uno schermo lo scrive con tre numeri e come verificare che un testo resti leggibile.
Sette unità su un solido dei colori
Per ora la materia ha un solo corso, Teoria del colore, in sette unità. La prima spiega come vediamo i colori. Le due successive trattano l’RGB con i codici esadecimali e poi tonalità, saturazione e luminosità. La quarta costruisce armonie di colori, la quinta mette a confronto la miscela della luce e quella degli inchiostri, e le ultime due passano al contrasto e all’uso del colore in un progetto reale. Quasi tutte le unità usano lo stesso modello, che puoi ruotare con il mouse: un cubo RGB di 512 blocchetti, oppure gli stessi colori riordinati in un cilindro HSL. Fai clic su un punto e il pannello qui sotto mostra il suo codice esadecimale, i suoi valori HSL, i colori in armonia e il rapporto di contrasto con lo sfondo che scegli.
Coni, prismi e il cubo RGB
Una mela rossa non contiene rosso. Assorbe le lunghezze d’onda corte e medie della luce del sole e rimanda indietro quelle lunghe. La retina ha circa 6 milioni di coni di tre tipi, e il colore nasce quando il cervello li confronta. Per questo una luce gialla pura e una miscela di luce rossa e verde possono sembrare identiche. Newton scompose la luce del sole con i prismi negli anni 1660 e disegnò uno dei primi cerchi cromatici in Opticks, nel 1704. Sul web ogni canale va da 0 a 255, quindi rgb(0 0 0) è il nero e rgb(255 255 255) è il bianco. Un codice esadecimale è formato da tre coppie di cifre in base 16: in #2273c3 la coppia c3 vale 12 × 16 + 3 = 195.
Angoli sul cerchio delle tonalità
L’HSL indica la tonalità come un angolo: 0deg è il rosso, 120deg il verde e 240deg il blu. Con lo 0% di saturazione la tonalità non conta più, e il 50% di luminosità dà la versione più viva di una tonalità. Il modello ha un limite, e lo si dice chiaramente: giallo e blu alla stessa luminosità del 50% hanno luminanze di 0.9278 e 0.0722. Quando i colori stanno sul cerchio, un’armonia è un insieme di angoli. Le tonalità complementari distano 180 gradi, una triade è formata da tre tonalità a 120 gradi l’una dall’altra e uno schema di complementari divisi usa 150 e 210 gradi. Attenzione a una differenza: il cerchio della luce mette il blu di fronte al giallo, mentre quello del pittore lo mette di fronte all’arancione. Gli inchiostri funzionano al contrario della luce: il ciano toglie il rosso, il magenta toglie il verde, il giallo toglie il blu, e le tipografie aggiungono il nero perché gli inchiostri veri danno un marrone fangoso.
Il rapporto che decide la leggibilità
La leggibilità di un testo si misura, non si giudica a occhio. La luminanza relativa delle WCAG pesa i canali linearizzati con 0.2126 per il rosso, 0.7152 per il verde e 0.0722 per il blu, e il rapporto di contrasto è (L1 + 0.05) / (L2 + 0.05), da 1:1 a 21:1. Il livello AA chiede 4.5:1 per il testo normale e 3:1 per il testo grande e gli elementi dell’interfaccia; il livello AAA chiede 7:1. Il grigio #767676 su bianco arriva a 4.54:1 e supera la prova, mentre il rosso #ff0000 arriva a 4.00:1 e non la supera per il testo normale. L’ultima unità aggiunge il criterio WCAG 1.4.1: il colore non deve mai essere l’unico modo per trasmettere un’informazione, perché il daltonismo per il rosso e il verde riguarda circa l’8% dei maschi. Pianifica prima i gradini di luminosità e poi le tonalità; nel modello, l’arancione del marchio e il suo blu complementare arrivano solo a 1.06:1.
Domande su questa materia
Che cosa significano i numeri di un colore RGB?
Impostano i canali rosso, verde e blu, ciascuno di solito da zero a 255 nel codice web. Zero spegne un canale, 255 lo porta al massimo: tutti a zero danno nero, tutti a 255 bianco. Un colore esadecimale registra gli stessi tre canali come tre coppie di cifre in base sedici, non usa un insieme diverso di colori. Teoria del colore
Perché due colori HSL con lo stesso valore di luminosità possono apparire più o meno luminosi?
La luminosità HSL è una coordinata di un modello cromatico, non una misura diretta della luminosità percepita. Giallo e blu completamente saturi hanno entrambi luminosità cinquanta percento, ma il giallo sembra molto più chiaro. Le luminanze relative WCAG sono rispettivamente 0.9278 e 0.0722: far coincidere il solo valore HSL non garantisce un contrasto adeguato tra testo e sfondo. Teoria del colore
Perché cambiare tonalità non ha effetto a saturazione zero?
A saturazione zero il colore si trova sull'asse dei grigi del modello HSL. La tonalità non conta più: gli angoli di rosso e ciano con luminosità cinquanta percento producono lo stesso grigio. La luminosità resta importante: zero percento dà nero, cento percento bianco, qualunque sia l'angolo scelto sul cerchio cromatico. Teoria del colore
Perché le stampanti aggiungono inchiostro nero invece di mescolare solo tre colori?
Gli inchiostri reali ciano, magenta e giallo sono filtri imperfetti: combinandoli si può ottenere un marrone scuro sporco invece di un nero pulito. Stampare tre strati solo per il testo nero è anche lento e molto umido. CMYK aggiunge quindi un nero separato; le pitture reali sono ancora più complesse, perché i pigmenti diffondono la luce oltre ad assorbirla. Teoria del colore
Quale rapporto di contrasto richiede WCAG AA per il testo normale?
Il testo normale richiede almeno 4.5:1; il testo sufficientemente grande 3:1. Il rapporto confronta le luminanze relative di testo e sfondo, non semplicemente le tonalità. Il rosso #ff0000 su bianco dà 4.00:1: supera la soglia del testo grande ma non quella normale, pur sembrando una scelta forte e vivace. Teoria del colore