Ieri era soleggiato e 85 gradi. Oggi, è freddo, ventoso e piovoso a 54 gradi.
Questo è contrasto.
I designer hanno l'opportunità di mantenere le cose omogenee; font, elementi, layout e dimensioni potrebbero rimanere tutti coerenti e il mondo non finirebbe.
Ma non è così che funziona il design – stiamo cercando di rendere le cose diverse, distinguersi e dire "guardami!" Quindi, impariamo l'abbinamento dei font, usiamo più elementi, rielaboriamo i nostri layout, ridimensioniamo e riallineiamo i nostri contenuti per renderli più interessanti e accessibili per gli spettatori.
Il contrasto di colore è un altro elemento con cui i designer giocano non solo per effetto estetico ma anche per l'accessibilità complessiva.
Contrasto di colore nel design
La parola "contrasto" significa semplicemente "differenza".
Cos'è il contrasto di colore?
I colori contrastanti sono colori che differiscono l'uno dall'altro. I livelli di contrasto variano da alto a basso, a seconda della loro posizione sulla ruota dei colori. Ad esempio, i colori che sono direttamente opposti l'uno all'altro sulla ruota dei colori hanno il contrasto più alto possibile, mentre i colori vicini l'uno all'altro hanno un contrasto basso.
Ad esempio, rosso-arancio e arancio sono colori che hanno un contrasto basso; rosso e verde sono colori che hanno un contrasto alto.
Mentre molti schemi di colore contrastanti sono interessanti e talvolta anche esteticamente piacevoli da guardare, i colori contrastanti servono a uno scopo aggiuntivo: l'accessibilità dell'utente.
Contrasto di colore per motivi estetici
Per non dire altro, scegliere colori ad alto contrasto per un design è una mossa audace. Di seguito sono riportati esempi di colori ad alto contrasto. Queste coppie sono direttamente opposte l'una all'altra sulla ruota dei colori.
Sono sicuramente molto da guardare. Ma a volte, l'audacia paga. Quei colori non sembrano un po' familiari?
Fonte: Gerard Malanga, Andy Warhol
L'arte e il design che utilizzano colori ad alto contrasto davvero "spiccano". Guardare design come questi crea un'esperienza unica, ma tende a diventare un po' doloroso.
A causa di questa responsabilità, l'alto contrasto di colore non è sempre la migliore idea da utilizzare nel design. Allo stesso tempo, un basso contrasto di colore può anche essere una cattiva idea; utilizzare questi schemi rende difficile differenziare tra gli elementi.
Mentre i design con basso contrasto hanno un'estetica propria, non sono sempre la scelta migliore per materiali di marketing o design del packaging.
Utilizzare il contrasto di colore nei prodotti fisici riguarda tutto il trovare un equilibrio tra gli alti e i bassi. Nel design di base, non esiste una formula per un buon contrasto; ci vuole un buon occhio e molta pratica.
Vuoi saperne di più su Software di disegno? Esplora i prodotti Disegno.
Contrasto di colore per motivi di accessibilità
Il contrasto di colore è più di un semplice aspetto estetico; è anche una necessità, specialmente sul web. La cosa più importante da ricordare qui è che se stai costruendo un sito web, redigendo una presentazione o progettando un'infografica, è cruciale che le informazioni fornite siano accessibili a tutti i coinvolti.
Uno dei modi migliori per farlo è assicurarsi che i colori che stai utilizzando nel tuo design – grafico o web – abbiano un alto contrasto.
Contrasto sul web
WCAG (Web Content Accessibility Guide) 2.0 fornisce linee guida specifiche per garantire che il contrasto di colore tra primo piano (testo, immagini, ecc.) e sfondo sia appropriato utilizzando un rapporto. Questo rapporto varia anche in base alla dimensione e al peso del testo utilizzato.
WCAG 2.0 esprime che il contrasto è una misurazione della differenza di luminosità percepita tra due colori. Questa differenza è indicata con un rapporto tra 1:1 (il contrasto più basso possibile; testo bianco su sfondo bianco) e 21:1 (il contrasto più alto possibile; testo nero su sfondo bianco o viceversa).
Il minimo di contrasto elencato da WCAG è un rapporto di 4.5:1 con l'eccezione di testo grande, loghi o intenzionale basso contrasto sul web. I valori esadecimali dei colori in uso sono necessari per misurare il contrasto.
| DEFINIZIONE: Un codice esadecimale di colore (codice hex) dettaglia la composizione di un colore specifico in uno spazio colore RGB. È composto da sei caratteri, sia numerici che alfabetici. La prima coppia di valori si riferisce al rosso, la seconda al verde e la terza al blu, in valori esadecimali 0-FF (#RRGGBB). |
Tutto questo è un po' confuso. Mettiamolo in pratica.
Mentre parte del testo sopra può essere leggibile per te, potrebbe essere difficile o impossibile per altri con problemi di vista leggerlo. Anche l'ultima opzione con un rapporto di 4.57:1 è difficile da guardare. Ricorda che 4.5:1 è il minimo.
Includere un contrasto appropriato è solo uno dei tanti elementi di design web necessari per un grande sito web. Non sei sicuro di farlo abbastanza bene? Il software di controllo del contrasto di colore può aiutarti a garantire che la palette di colori che stai utilizzando sia ottimizzata per la migliore esperienza utente possibile.
Riesci a leggermi ora?
No! Guarda, un perfetto esempio di come l'intestazione di questa conclusione sia 1. brutta e 2. impossibile da leggere.
Puoi leggere studi sul contrasto di colore, daltonismo e accessibilità, ma non c'è niente come sperimentare questa frustrazione in prima persona. Non è piacevole, quindi fai il tuo dovere per assicurarti che i tuoi utenti e spettatori non lo sperimentino neanche loro.
Il contrasto appare diversamente, a seconda se il tuo progetto è stampato o digitale. Scopri di più sulla differenza tra RGB vs CMYK.
Daniella Alscher
Daniella Alscher is a Brand Designer for G2. When she's not reading or writing, she's spending time with her dog, watching a true crime documentary on Netflix, or trying to learn something completely new. (she/her/hers)
