{"id":744,"date":"2017-07-04T08:44:01","date_gmt":"2017-07-04T06:44:01","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/color-accessibility-workflow\/"},"modified":"2017-07-04T08:44:01","modified_gmt":"2017-07-04T06:44:01","slug":"color-accessibility-workflow","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/color-accessibility-workflow\/","title":{"rendered":"Workflow per la color accessibility"},"content":{"rendered":"
\n

Nota degli editori:<\/strong> Siamo lieti di condividere con voi un estratto dal Chapter 3 del nuovo libro di Geri Coady, Color Accessibility Workflows<\/cite><\/a>, disponibile ora da A Book Apart.<\/p>\n<\/div>\n

Le Web Content Accessibility Guidelines<\/em> (WCAG<\/a>) 2.0 contengono delle recommendation da parte del World Wide Web Consortium (W3C) per rendere il web pi\u00f9 accessibile agli utenti con disabilit\u00e0, tra cui il daltonismo e altri difetti della vista.<\/p>\n

Nelle WCAG 2.0 vengono definiti tre livelli di conformit\u00e0, dal pi\u00f9 basso al pi\u00f9 alto: A, AA e AAA. Per il testo e le immagini di testo, AA \u00e8 il livello minimo a cui conformarsi.<\/p>\n

La compliance AA richiede che il testo e le immagini del testo abbiano un rapporto minimo nel contrasto del colore<\/a> di 4.5:1. In altre parole, il colore pi\u00f9 chiaro in una coppia deve avere 4,5 volte la luminanza<\/a> (un indicatore di quanto apparir\u00e0 brillante un colore) rispetto al colore pi\u00f9 scuro. Questo rapporto nel contrasto \u00e8 calcolato per includere persone con deficit nella percezione del colore. Il suo scopo \u00e8 quello di compensare la perdita di sensibilit\u00e0 al contrasto che viene vissuta dagli utenti con una visione pari a 20\/40, che \u00e8 la met\u00e0 della normale visione 20\/20<\/a>.<\/p>\n

Il livello di compliance AAA richiede un rapporto di contrasto di 7:1, che fornisce una compensazione per gli utenti con una visione pari a 20\/80, ossia un quarto della visione normale 20\/20. Le persone che hanno una perdita di visione di pi\u00f9 di 20\/80 generalmente hanno bisogno di tecnologie assistive per il miglioramento del contrasto e che abbiano capacit\u00e0 di ingrandimento.<\/p>\n

Il testo che ha pura funzione decorativa, il testo non essenziale che appare in una parte di una fotografia e le immagini del logo aziendale non devono strettamente aderire a queste regole. Il testo non essenziale o decorativo \u00e8, per definizione, non essenziale per la comprensione del contenuto di una pagina. I loghi e i wordmark possono contenere elementi testuali che sono essenziali alla trasmissione dell’identit\u00e0 visuale dell’azienda, ma non convogliano informazioni importanti. Se necessario, il logo potrebbe essere descritto usando un attributo alt a beneficio di una persona che usa uno screen reader. Per saperne di pi\u00f9, leggete il blog post di Julie Grundy su Simply Accessible<\/a>, in cui si addentra nelle best practice riguardanti la descrizione mediante l’attributo alt.<\/p>\n

La dimensione del testo gioca un ruolo fondamentale nel determinare quanto contrasto sia richiesto. Un testo grigio con un valore RGB di (150,150,150) su un background bianco puro passa il livello AA di compliance, purch\u00e9 venga usato nei titoli sopra i 18 punti (Fig 3.1<\/strong>). Un font mostrato a 14 punti potrebbe avere un livello di leggibilit\u00e0 differente rispetto ad un altro font a 14 punti a causa della gran variet\u00e0 di stili dei caratteri, quindi tenetelo a mente, specialmente quando userete pesi molto leggeri.<\/p>\n

\"Anche<\/p>\n

Fig 3.1: La dimensione del testo gioca anch’essa un ruolo nel calcolo dei rapporti di conformit\u00e0.<\/p>\n<\/div>\n

Personalmente, io raccomando che tutto il testo del corpo sia AAA compliant, con le headline pi\u00f9 grandi e il copy meno importante che raggiungono almeno una compliance di tipo AA. Tenete in mente che questi rapporti fanno riferimento a testo con colore solido invece che a sfondi con colori solidi, in cui si pu\u00f2 misurare un singolo valore del colore. Mettere il testo sopra a un gradiente, pattern o foto potrebbe richiedere un maggior valore del contrasto o un posizionamento alternativo, come sopra a una striscia con colore solido, per fornire una leggibilit\u00e0 adeguata.<\/p>\n

Questi rapporti di conformit\u00e0 sono spesso quello che la gente intende quando dichiarano che ottenere un design accessibile \u201cspuntando le caselle\u201d pu\u00f2 solo sacrificare la creativit\u00e0 o restringere le scelte di colore. Ma questo, semplicemente, non \u00e8 vero. Esperimenti con un color contrast checker provano che molti rapporti di conformit\u00e0 sono piuttosto ragionevoli e li si pu\u00f2 ottenere facilmente, specialmente se si \u00e8 consci delle regole fin dal principio. Risulta molto pi\u00f9 frustrante cercare di cambiare delle scelte errate di colore in qualcosa di conforme in un secondo tempo nel processo di design, dopo che sono gi\u00e0 stati scelti i colori del brand. Se combattete da subito le vostre battaglie, sentirete di non avere alcun vincolo.<\/p>\n

Se tutto questo parlare di numeri vi sembra poco chiaro, vi prometto che non dovrete fare alcun tipo di calcolo. Potete scoprire facilmente se le vostre coppie di colore passano il test usando un color contrast checker.<\/p>\n

\n

Contrast checker<\/h2>\n

Uno dei miei tool preferiti \u00e8 Contrast Ratio<\/a> di Lea Verou (Fig 3.2<\/strong>). Vi d\u00e0 la possibilit\u00e0 di inserire un codice di un colore per il background e un codice colore per il testo e calcola il rapporto per voi.<\/p>\n

\"Lea<\/p>\n

Fig 3.2: Contrast Ratio checker di Lea Verou.<\/p>\n<\/div>\n

Contrast Ratio supporta i color names, i codici colore esadecimali, i valori RGBA, HSLA e perfino una combinazione di questi. Il supporto dei valori RGBA e HSLA significa che il tool di Lea Verou supporta i colori trasparenti, un comoda feature. Potete anche condividere i risultati in maniera semplice copiando e incollando l’URL. Inoltre, potete modificare i colori cambiando i valore nella stringa dell’URL invece di usare i campi di input della pagina.<\/p>\n

Un altro ottimo tool che ha il vantaggio di mostrare simultaneamente se una combinazione di colori passa entrambe i livelli di compliance AA e AAA \u00e8 il Colour Contrast Check<\/a> di Jonathan Snook (Fig 3.3<\/strong>).<\/p>\n

\"Colour<\/p>\n

Fig 3.3: Colour Contrast Check di Jonathan Snook.<\/p>\n<\/div>\n

Al momento in cui scrivo, Colour Contrast Check non supporta i valori alpha di HSL ma mostra la differenza di brightness calcolata e i valori della differenza di colore, che potrebbero interessarvi se voleste maggiori informazioni.<\/p>\n<\/div>\n

\n

Color picker<\/h2>\n

Se vi serve aiuto per scegliere colori accessibili fin dall’inizio, provate Color Safe<\/a>. Questo tool web-based aiuta i designer a sperimentare con le combinazioni di colore e a sceglierle in modo che siano immediatamente contrast-compliant. Inserite un valore per il colore di background come punto di inizio, poi scegliete una famiglia di font standard, la dimensione del font, il peso del font e il vostro obiettivo di livello di compliance WCAG. Color Safe vi dar\u00e0 un elenco esaustivo di suggerimenti che possono essere usati come colori di testo accessibile (Fig 3.4<\/strong>).<\/p>\n

\"Color<\/p>\n

Fig 3.4: Color Safe ricerca colori di testo conformi basandosi su un colore di background esistente.<\/p>\n<\/div>\n<\/div>\n

\n

Tool di regolazione<\/h2>\n

Quando vi trovate di fronte a scelte di colore che ricadono nei rapporti di contrasto minimi, prendete in considerazione l’utilizzo di qualcosa come Tanaguru Contrast Finder<\/a> per avere un aiuto nel trovare delle alternative appropriate (Fig 3.5<\/strong>). Questo tool incredibilmente utile prende una coppia di colori, uno in primo piano e uno di sfondo, e poi presenta un range di opzioni compliant confrontabili con i colori originali. \u00c8 importante notare che questo strumento funziona meglio quando i colori sono gi\u00e0 prossimi all’essere conformi ma hanno bisogno solo di una piccola spinta. Coppie di colori con rapporti di contrasto drasticamente bassi potrebbero non risultare in alcun suggerimento (Fig 3.6<\/strong>).<\/p>\n

\"Examples<\/p>\n

Fig 3.5: Questa coppia di colori non \u00e8 AA compliant.<\/p>\n

\u00a0<\/p>\n<\/div>\n

\"Una<\/p>\n

Fig 3.6: Una selezione delle alternative AA compliant suggerite da Tanaguru.<\/p>\n<\/div>\n<\/div>\n

\n

C’\u00e8 altro da dove abbiamo tratto questo brano!<\/h2>\n

Leggete il resto di Color Accessibility Workflows<\/em> su A Book Apart<\/a>.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Il colore \u00e8 uno strumento potente che ci offre opzioni quasi infinite per il design. Tuttavia, quando applichiamo il colore al nostro lavoro, possiamo avere un punto di vista \u201cmiope\u201d che mette noi al centro invece del nostro pubblico. L’autrice Geri Coady ci propone alcune considerazioni sul colore per il nostro pubblico in questo estratto dal suo nuovo libro, Color Accessibility Workflows, disponibile presso A Book Apart.<\/p>\n","protected":false},"author":818,"featured_media":7000821,"comment_status":"open","ping_status":"open","template":"","categories":[245,185,9,86],"tags":[],"coauthors":[511],"class_list":["post-744","article","type-article","status-publish","has-post-thumbnail","hentry","category-accessibilita","category-numero-207-4-luglio-2017","category-usabilita","category-user-experience"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/744","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=744"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000821"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=744"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}