 Tanta tre virgola nove per cento di questi siti web presenta almeno un elemento con contrasto al di sotto di quello che è previsto dalle linee guida per l'accessibilità dei contenuti web a livello AA. Dopo vediamo nello specifico cosa vuol dire, ma diciamo che è al di sotto del minimo sindacale. E tra l'altro il numero medio di elementi in realtà per ciascuna di queste pagine che ha un problema è 31,6 per cui all'interno di un milione di siti web abbiamo già 25 milioni di errori per cui diciamo che è un argomento di cui vale la pena parlare. Ma visto che abbiamo iniziato parlando di contrasto andiamo a vedere cosa vuol dire contrasto e di cosa dicono le linee guida su l'accessibilità dei contenuti web riguardo al contrasto. Partiamo dalla definizione di contrasto. Il contrasto è una differenza nella percezione visiva di due o più elementi presentati simultaneamente o successivamente. L'idea è che se io ho due elementi uno di fianco all'altro oppure che mi vengono fatto vedere prima uno e poi l'altro, se sono in grado di distinguerli allora significa che c'è sufficiente contrasto altrimenti vuol dire che il contrasto non è sufficiente che quindi due elementi sono indistinguibili. Quando parliamo di contrasto parliamo di due cose di tante cose in realtà ma limitiamoci a due argome a due concetti fondamentali che sono il concetto di contrasto cromatico e di contrasto luminoso. Il contrasto cromatico è un contrasto che è dovuto esclusivamente una differenza di tonalità, croma o saturazione sostanzialmente. Contrasti di questo tipo non sono ammessi per quanto riguarda l'accessibilità perché persone che presentano anomalie nella visione del colore non sarebbero in grado di andare a distinguere questi colori quindi l'uso del solo colore per distinguere elementi con questo criterio è dietato e invece ammesso andare a distinguere due elementi tramite il contrasto luminoso cioè quello che è dovuto una differenza di luminosità. Il contrasto luminoso può essere definito in tante maniere ma tendenzialmente viene sempre definito come differenza o rapporto tra luminanze che sono delle grandezze che è una grandezza fisica, l'aluminanza che può essere misurata in laboratorio. Tenete conto che è questa cosa che è misurata in laboratorio. Cosa ci dicono le linee guida sull'accessibilità dei contenuti web a livello doppia? Quella di cui dicevamo prima che danno errori sulle on page? Beh ci dicono che se prendo in considerazione i testi e immagini di testo il rapporto di contrasto deve essere almeno pari a quattro virgola cinque a uno con tre eccezioni. Se il testo è grande il rapporto di contrasto può scendere a tre a uno perché tendenzialmente più un oggetto è grande più è comunque distinguibile anche se la differenza di luminosità tra i due elementi è minore. Se ho del testo non essenziale quindi ho del testo delle immagini contenenti testo che sono parti native delle componenti. Esempio un pulsante nativo è un testo non essenziale. Se sono elementi di pura decorazione, se sono elementi che non sono visibili a nessuno ad esempio gli skip link quando non hanno focus in genere sulle pagine dei siti web e nel caso in cui facciano parte di immagini contenuti contenenti contenuti visuali maggiormente significativi in tutti questi casi non è necessario rispettare alcun criterio minimo di contrasto. Potete anche mettere un grigio estremamente chiaro su un bianco e non andresti a violare la normativa. La normativa le linee guida più che altro. E poi l'altra eccezione sono i logotipi. Se io ho un testo che fa parte di un logo di un marchio ovviamente non sono ottenuto a rispettare nessun criterio perché ovviamente ha la precedenza tra virgolette il colore del brand per modo di dire. Poi io quello che dico è se il contrasto tra il tra il logo di un brand e lo spondo è molto basso sarà meno riconoscibile meno memorabile e quindi tendenzialmente servirà meno al tuo scopo. Ok entriamo rapidamente rapidissimamente nel dettaglio sulle definizioni della di questa sulle definizioni della linea guida del buca. Il rapporto di contrasto è definito come un rapporto per l'appunto tra due valori che sono l'illuminanze relative del colore più chiaro e del colore più scuro con un'aggiunta di un fattore più 0,05 che serve per dare una correzione dovuta all'illuminazione ambientale. L'illuminanze vi è detto prima che sono misurati in laboratorio ma ovviamente noi non andiamo di solito a utilizzare i nostri dispositivi nel buio assoluto per cui bisogna andare a introdurre questo fattore per tenere conto dell'illuminazione ambientale. L'altra cosa importante è che il rapporto tra il colore più chiaro e il colore più scuro non c'è differenza tra qual è il colore del testo e il colore dello sfondo ma solo tra il colore più chiaro e il colore più scuro. È un parametro che varia da uno a uno fino a 21,1 uno punto uno il rapporto di sostanzialmente un colore con sé stesso o due colori comunque che non hanno alcun contrasto e 21 a uno è il rapporto tra il nero e il bianco. L'illuminanza relativa è un valore sostanzialmente che mi rappresenta la luminosità in qualunque punto di un certo spazio colore ed è un numero che varia da 0 a 1, 0 per il nero più scuro e 1 per il bianco più chiaro. Adesso questa bella formulona sostanzialmente riguardo all'illuminanza relativa è purtroppo scusate un deformazione professionale però diciamo che questa cosa non è fondamentale sono importanti due cose diciamo che sostanzialmente ci sono i pre-canali rosso verde e blu e ci sono dei pesi diversi. Questi pesi diversi dipendono in sostanza dalla fisiologia umana. L'occhio umano è molto capace di percepire il colore verde è molto meno capace di percepire il colore rosso ed è ancora meno capace di percepire il colore blu per cui in realtà quei valori quei coefficienti li davanti a R, G e B stanno a indicare esattamente questo. L'altra cosa è che questi valori di R, G e B crescono al crescere del valore di R, G e B a 8 bit quindi con i valori che vanno da 0, 250 a 5 in maniera esponenziale quindi se la differenza di colore sostanzialmente sono con un colore che è molto vicino al nero tendenzialmente la luminosità cresce molto poco mentre cresce tantissimo nel man mano che io mi avvicino ai colori più chiari. Visto che abbiamo citato prima la differenza tra il contrasto a 4.5 e il contrasto a 3 dicendo che la differenza è quando un testo è grande un testo è considerato grande se è più grande di 18 punti tipografici o 14 punti tipografici se in grassetto o che sono punti tipografici e non pixel quindi se vogliamo andare in pixel diventano 24 pixel 18 punti tipografici 19 pixel 14 punti tipografici. Ok tutto questo per quanto riguarda il criterio di base ma esiste un criterio di contrasto avanzato che però è a livello AAA per cui in realtà non è necessario in generale andare a soddisfare questo criterio e anzi secondo me c'è in questo periodo un trend andare verso contrasti molto elevati che in realtà però possono causare problemi soprattutto le persone che alle persone dislessiche e le persone con autismo c'è una tendenza ad andare verso contrasti elevati ma in realtà non è necessario se però volete avere un contrasto molto elevato allora per il testo e le immagini di testo normali dovete utilizzare un contrasto di 7 a 1 e per i testi grandi dovete usare un contrasto di 4,5 a 1 fin qui abbiamo parlato di testo ma le linee guida nella versione 2.1 introducono anche delle informazioni per quanto riguarda i contenuti non testuali per i contenuti non testuali è necessario un rapporto di contrasto di 3 a 1 per quali però contenuti non testuali per i componenti attivi dell'interfaccia utente quindi di nuovo se un componente è in attivo non è necessario un rapporto di contrasto e per gli oggetti grafici quindi per gli elementi che io inserisco all'interno del sito web che sono necessari per capire l'interfaccia del tipo inserisco una cornetta di fianco un numero di telefono la cornetta non è un componente attivo perché non succede niente se io ci faccio clic sopra però diciamo che è un oggetto grafico necessario per capire che il numero a fianco è un numero di telefono piuttosto che non un numero di partita IVA e quindi è necessario fare in modo che il rapporto di contrasto in questo caso sia 3 a 1 ok allora questo diventa interessante perché tutti questi questi tre criteri che fanno parte delle linee guida sulla accessibilità perché da un lato mi permettono nel caso vi abbia un sito esistente di andare a verificare se io rispetto o meno questi criteri ma dall'altro dato mi dicono anche che se io voglio andare a crearmi una paletta di colore adatta per il mio sito web allora devo fare in modo a priori che i rapporti di contrasto rispettino questi valori per cui diventa una cosa non a posteriori ma una cosa a priori e mi dice anche quando usarlo per cui se ho un testo grande o un testo grande un testo in grassetto vado a prendermi dei colori e a decidere di usare dei colori che hanno un certo rapporto di contrasto se ho delle icone ad esempio l'icona del menu nei menu in quel caso anche in quel caso devo avere un vado a scegliere un certo rapporto di contrasto è un'operazione che faccio a priori e non a posteriori fin qui tutto bene e questo diciamo che per modo di dire è quello che è la situazione oggi però in realtà quello che ci si riesi conto nel corso degli anni è che le linee guida del wukag non sono correttissime per cui in realtà quello che è stato fatto ah sì questo scusate ho saltato una slide non è non è fondamentale però diciamo che se non volete mettervi a fare i conti a mano ci sono migliaia di di tool sul web che potete utilizzare io di solito utilizzo questo che è il contrast checker di web aim se fate cercate su google contrast checker vi salta fuori questo di solito come primo risultato usate anche gli strumenti di sviluppo del browser che usiate chrome firefox tutti hanno dei pool che permettono di verificare e anche di darmi delle correzioni in realtà ma come vi dicevo andiamo avanti e andiamo oltre le linee guida per l'accessibilità dei contenuti web andiamo a parlare del lapka cos'è l'apka l'apka è l'acronimo di accessible perceptual contrast algorithm cioè algoritmo di contrasto perceptibile accessibile più o meno diciamo che è un metodo che permette di andare a determinare il contrast dei colori all'interno dello spazio srgb quindi in modo del tutto analogo a quello che abbiamo fatto adesso che però è stato pensato in realtà per i nuovi standard web che sono in fase di sviluppo in questo momento quindi quelle che saranno le linee guida su l'accessibilità dei contenuti web nella versione 3 ok questo questo algoritmo qui deriva da un modello di colore che si chiama sucked di mindex che è stato pensato specificamente per i display retroilluminati e tenendo conto veramente dei criteri di accessibilità in che senso anzi tutto una premessa si tratta di un algoritmo sperimentale per cui in realtà è stabile nel senso che l'ultima modifica che è stata fatta è stata fatta a febbraio del 2021 però diciamo che se voi volete essere rispettosi delle linee guida attuali sull'accessibilità non potete utilizzare l'app ca oppure potete farlo ma dovete mettere conviene mettere sempre un bel avviso sul sito in cui dite guardate che questa cosa in realtà non rispetta le linee guida sull'accessibilità perché sto facendo dell'altro mai meglio non farlo in linea di massima tiene conto di faggottori legati allo stimolo e all'osservatore lo stimolo quindi sostanzialmente è quello che vi dicevo prima il fatto che c'è una luce ambientale che va a cambiare l'effetto della luminosità e anche dell'osservatore in sostanza perché adesso vediamo nello specifico la differenza fondamentale che permette di andare a calcolare diversamente dalle book ag il valore del contrasto di luminosità che in questo caso si chiama lc tra due colori ma in modo che sia percettivamente uniforme vi faccio vedere in che senso qui vi presento sostanzialmente tre blocchi di testo in cui esso sostanzialmente i colori più chi ha il i colori il bianco e il grigi sostanzialmente che hanno un rapporto quanto più basso possibile tra testo espondo a livello con un rapporto di contrasto di 3 a 1 di 4,5 a 1 e di 7 a 1 dall'alto verso il basso ora penso che anche qui si vede in realtà possiate percepire anche voi sul display retroilluminato è più facile ovviamente questa qui la luce ambientale complica ulteriormente le cose che è molto difficile dire che la percezione dei testi in alto del testo grigio su fondo bianco a sinistra e del testo grigio su fondo nero a destra si hanno uguali eppure rispetto alle book ag in realtà il rapporto è corretto per cui potreste essere potreste legalmente utilizzarlo stessa cosa per il 4.5 7 diventa meno evidente però diciamo che c'è questo grosso problema stessa cosa per quanto riguarda le apca le apca esatto per cui sostanzialmente in questo caso ho messo gli equivalenti sostanzialmente di 3 a 1 4.5 a 1 e 7 a 1 che sono lc pari a 60 75 e 90 e in questo caso vedete che tendenzialmente in realtà tutti i testi che fanno parte dello stesso blocco possono essere letti più o meno con la stessa facilità questo è il concetto di percettivamente uniforme nel senso che l'occhio umano con la sua fisiologia percepisce questi contrasti come dello stesso valore ci sono altre due cose in cui le apca si differenzia non rispetto alle book ag la prima che c'è una differenza viene presa in considerazione la polarità cioè il fatto che usa un testo chiaro su fondo scuro o un testo scuro su fondo chiaro torna indietro un momento giusto per farvelo vedere se voi guardate ad esempio torno ancora più indietro in realtà se voi guardate ad esempio il testo in alto a destra quindi quello grigio su fondo nero il rapporto il il contrasto luminoso per questo in questo caso è di meno 18 mentre il contrasto del fondo grigio del testo grigio su fondo bianco quello a fianco è di 57.1 c'è una differenza in realtà tra quella che è la percezione dei colori cari su fondo scuro e dei colori chiuri scuri su fondo chiaro questa è la differenza sostanzialmente che le apca prendono in considerazione quindi lc varia da un valore di 0 fino a 106 per testo scuro su fondo chiaro e da meno 107.9 a 0 per un testo chiaro su fondo scuro l'altra cosa che le apca prendono in considerazione è la differenza è il tipo di carattere utilizzato in particolare due parametri il peso ma questo da un certo punto di vista lo facevano anche le book ag la differenza nel testo grande testo normale testo ingrassetto ma anche la altezza la la exit sostanzialmente l'altezza della lettera x rispetto alla lettera meiuscola le apca sono state sviluppate basandosi su alcuni caratteri di cui quello fondamentale l'elvetica però diciamo che vale a livello standard per quei caratteri che hanno una exit compresa tra 0.52 e 0.57 se il carattere che utilizzate non è questa altezza dovete fare delle correzioni in maniera tale che l'altezza sostanzialmente corrisponda e poi dovete andare a verificare che i pesi corrispondano ulteriormente una cosa non semplice secondo me per cui diciamo che la mia preoccupazione nell'uso di questo algoritmo è che non sia di facilissima applicazione però effettivamente migliora notevolmente quella che è la fruibilità dei contenuti questo è l'algoritmo poi distribuirò le slide andrete a leggervelo sostanzialmente ci sono due differenti sono delle cose interessanti in realtà il rapporto di luminosità e l'aluminosità relativa che è mostrata in basso nelle slide è identica la luminosità del vocag viene introdotta una correzione per quanto riguarda i colori molto scuri per cui si alimenta la luminosità dei colori che sono vicini al nero e poi c'è una differenza per l'appunto tra il valore della luminosità quando si calcola quando si prende un testo scuro su fondo chiaro e quando si prende un testo chiaro su fondo scuro c'è proprio una differenza nella formula che si va utilizzare mentre le vocag nelle vocag è tutto assolutamente simmetrico ma cosa ci dice anche anche in questo caso se volete andare a fare a vedere i vostri contrasti quindi questo caso conviene assolutamente andare a utilizzare un sistema automatico di calcolo ok perfetto cosa ci dicono i contrasti allora abbiamo tanti valori diversi sostanzialmente in questo caso abbiamo l con c che va in scarti di 15 per cui partiamo da un valore di di luminosità di 90 che è un testo che ha adatto esclusivamente a un colore che un coppia di colori che può essere utilizzata esclusivamente per testi piccoli qui scusate se in inglese il testo ma purtroppo non le traduzioni che stavo cercando di fare erano orrende per cui ho detto lascio il testo in inglese che forse è meglio diciamo che in linea di massima 90 è il contrasto che ci deve essere che il contrasto che è meglio utilizzare per i corpi di testo e per i testi che devono essere letti in maniera fluida questa prima cosa fondamentale tra l'altro è anche il rapporto di contrasto massimo che bisognerebbe andare a utilizzare per degli elementi molto grandi quindi qui interessante perché non abbiamo semplicemente dei valori minimi ma abbiamo anche un valore massimo se lc 75 un valore che va bene per il corpo del testo quindi in generale questo coso generale va bene per qualsiasi corpo del testo 60 è ancora un valore più basso ma che va bene sostanzialmente che può essere utilizzato in qualsiasi caso per il testo fluido vedete che ci sono molto dettagliati i valori delle dimensioni del carattere dei tesi in realtà qui va molto nello specifico in realtà nella descrizione lc 45 è il testo che deve essere utilizzato il contrasto minimo che deve essere utilizzato per i te per i titoli sostanzialmente quando inserite un titolo interno della pagina meglio utilizzare un valore di 45 è anche il valore minimo che deve essere utilizzato per le icone sostanzialmente che hanno dei dettagli sottili per cui se andate utilizzare delle icone fatte con l'outline invece che le icone tiene allora in questo caso dovete utilizzare questo valore qua sempre andato avanti 30 il valore per i cosiddetti testi spot cioè quei testi che anche se una persona non è in grado di leggere in maniera fluida non è gravissimo quindi ad esempio i playsolder nelle bucaga non c'è nessuna linea guida sostanzialmente che vi dice quale contrasto utilizzare per i playsolder ed è anche il valore minimo da utilizzare per le icone semantiche e infine 15 che è il valore minimo da utilizzare per gli elementi non testuali elementi non testuali non semantici qui io mi sono scervellato per capire che cosa potesse essere un elemento non testuale non semantico sono riuscito anche a trovare un esempio pensate alle zebrature nelle tabelle se voi andate a prendere una tabella è comodo andare a inserire le zebrature per fare in modo che non si perda la linea questo è il rapporto di contrasto minimo da utilizzare attenzione altra nota i designer devono trattare qualsiasi cosa con lc al di sotto di 15 come se fosse impercettibile per cui due oggetti con lc al di sotto di 15 non sono di distinguibili l'uno dall'altro sostanzialmente quindi abbiamo una una relazione tra i valori delle è possibile andare a mettere in relazione le app con il vcag sostanzialmente dicendo che livello doppia scusate valore di 60 di lc uguale al rapporto di contrasto 3 a 1 4.5 delle buca 75 di apca e 90 del apca uguale a 7 delle buca eventualmente per andare sul livello tripla diciamo che per un livello doppia per il livello tripla andate aumentare i valori di lc di 15 quindi in questo caso qual è la cosa anche in questo caso posso andare a disegnarmi la mia paletta in maniera tale che i rapporti di che le differenze di contrasto sostanzialmente vadano in gradini di 15 in 15 ok e anche in questa maniera ho dei criteri per andare a disegnarmi la paletta che è quello che proviamo a fare adesso queste le saltiamo che sono non sono fondamentali diciamo che mi sono inventato un'ipotetica azienda che vi arriva vi arriva con questo logo sostanzialmente e vi dice ok disegnami una paletta create mi una paletta di colore per questo logo qua sostanzialmente ho preso il valore i valori dei due colori qui a un colore bianco e poi un colore che è un verde sostanzialmente e uso i valori di tonalità saturazione e luminosità per andare a creare la mia paletta ok per semplificare va a crearmi una paletta monocromatica per cui di questi partendo dei colori di base io vado a utilizzare esclusivamente le ombre che sono le combinazioni dei colori di base con il nero le tinte che sono le combinazioni dei colori di base con il bianco e i toni che sono le combinazioni dei colori di base con il grigio questo è un esempio ad esempio di alcune ombre di verde ci sono migliaia di city web che vi permettono di andare a creare ombre partendo da un colore e queste sono invece alcune tinte del verde ok adesso come vado a selezionarmi io tra tutte le possibili ombre tutte le possibili tinte ad esempio qui ci sono degli sfondi qui vado a prendermi possibili i valori come colore di sfondo uso cerco delle ombre di verde da utilizzare come sfondo che cosa faccio vado a prendermi i valori 105 90 75 60 e vado a prendere cercarmi dei delle ombre del verde che siano al penalti sopra di questi valori qui ad esempio nell'angolo in alto a sinistra o un verde che se messo come sfondo su un testo bianco ha una l con ci pari a meno 105 il valore subito sotto è un uno sfondo che ha rispetto al testo verde che ha un testo verde con il verde del colore di base della mia paletta pari a meno 30 e così via stessa cosa andò a sostituire al posto del testo perché ricordatevi che nell'appca la differenza tra il colore dello sfondo il colore del testo a senso è significativa e così mi vado a costruire un po di ombre qui vedete un confronto e vedete ad esempio che le ombre che tiro fuori in questa maniera sono diverse alcune coincidono ma altre sono diverse stesso cosa con le sulle tinte del verde a del video qui salto perché siamo già in ritardo e non c'è molta differenza stessa cosa coi toni del bianco e in questa maniera io mi creo un po di colori forse troppi nel senso che mi sono andato in questa maniera io utilizza usando questo sistema io mi sono riuscito a andare a creare 15 ombre e tinte di verde che hanno questi valori esadecimali e 26 toni di bianco sono 41 colori direi che per una paletta sono un po troppi dobbiamo sfoltire come facciamo beh prima cosa ricordatevi che abbiamo un valore di l con c per cui i colori al di sotto di quel al di sotto di quel limite i colori sono indistinguibili ok per cui io vado a cancellarmi dai possibili colori tutti quei colori che hanno un rapporto di l con c al di sotto di 15 rispetto al verde di base e rispetto al bianco di base e in questa maniera passo da 15 per il verde a 11 e da 26 a 18 quindi sono già passato da 49 colori a 19 però questo non è sufficiente allora che cosa faccio vado ulteriormente a raggruppare i colori raggruppando gli colori in maniera indistinguibile sostanzialmente vado a mettere insieme vado a raggrupparmi i colori vado a raggrupparmi insieme tutti quei colori che hanno l con c tra tutti i colori all'interno dello stesso gruppo pari a zero ad esempio se prendo i colori più scuri della mia paletta io ho sette colori che in realtà sono tra loro indistinguibili questi colori li raggruppo è quello che farò a scegliere un unico colore perché tanto qualsiasi altro colore sarebbe indistinguibile da quel colore è la pena di sceglierlo in questa maniera io posso raggrupparmi i miei colori in sei cluster ma non solo in realtà perché se vado a prendere i colori del secondo e del terzo cluster in realtà vedo che questi colori pura appartenendo a cluster diversi sono comunque indistinguibili perché le con c è inferiore a uno qui è una clusterizzazione quindi ho con questi cluster a questo punto procedo in sostanza andando a cercare di massimizzare i contrasti quindi devo fare in modo sostanzialmente di vado a scegliermi quei quelle coppie di colori sostanzialmente che mi permettono di massimizzare i contrasti relativi adesso il tempo purtroppo tiranno per cui siamo veramente al limite però diciamo che sostanzialmente utilizzando questo strumento qui che è una matrice di contrasto che è uno strumento che vi permette di creare matrici di contrasto che rispettano i criteri del buca e questo altro strumento che invece che vi permette di farlo utilizzando gli app voi potete andare a prendere i colori e andare a analizzarveli un po la volta andando man mano a scartare i colori che non vi interessano e quindi andate ad aggiungere andate a togliere poi magari qualcosa va storto per cui scoprite di avere delle cose per cui in realtà e tutti i colori che dovreste andare ad aggiungere sono indistinguibili d'altri colori che sono stati inseriti e quindi dovete tornare indietro a cambiare la paletta è un certo punto scartate e potreste arrivare a questo punto ad arrivare a una soluzione a un dovreste riuscire ad arrivare a una soluzione di questo tipo per cui una soluzione in cui in pratica ovviamente la diagonale centrale per intenderci è il rapporto di il contrasto tra un colore e il colore stesso che quindi è sempre pari a zero se mi allontano i due elementi hanno quasi sempre un valore che è almeno 15 se mi allontano ancora 30 45 60 75 90 105 e poi andate ad attattare ad attattare questa paletta agli elementi in base alle definizioni dell'algoritmo adca ovviamente tenendo conto che in realtà poi dovete sempre andare a controllare che i colori che andate a scegliere siano rispettosi delle buca vi spiace purtroppo che sia di essere andato così lungo ma vi ringrazio per l'attenzione non so se c'è il tempo per le domande credo di no ma se volete mi trovate comunque qui fuori per cui grazie mille