Wikipedia:Bar/Discussioni/Introduzione di una tavolozza di colori per maggiore accessibilità

Apro questa discussione per parlare di accessibilità per quanto riguarda il colore. Per chi è interessato c'è molto altro, ma comunque cerco di spiegare brevemente il problema anche qui.

Il problema

Su Wikipedia facciamo uso del colore molto liberamente: talvolta in maniera moderata e gradevole, come ad esempio nell'infobox in Violino, Parigi e Inception. Altre volte usiamo combinazioni di colore poco accessibili: magari perché il testo non è ben distinguibile dallo sfondo, come nell'infobox in Gaio Giulio Cesare, oppure dai link, come nell'infobox in Attentati dell'11 settembre 2001 (esempio valevole anche per il testo); oppure i link stessi non sono riconoscibili dal testo, come nel template {{UNESCO}}, ad esempio in Catania#Monumenti e luoghi d'interesse. E a volte cadiamo direttamente nello psichedelico, come in MasterChef Italia (dodicesima edizione)#Concorrenti, o i navbox in Football Club Internazionale Milano#Collegamenti esterni, Camila Giorgi#Statistiche WTA, Jacques Laffite#Risultati completi in F1, Eurovision Song Contest 2024#Prima semifinale, o Félix Auger-Aliassime#Statistiche.

Per gli utenti ipovedenti può risultare molto difficile distinguere certi colori, e a questo proposito le linee guida WCAG prescrivono l'utilizzo di colori sufficientemente diversi tra testo e sfondo (tecnicamente si parla di contrast ratio). Molti degli esempi sopra non rispettano questa linea guida, neanche nella versione AA pensata per garantire un livello sufficiente (ma non ottimale) di accessibilità. Quando poi il colore non è puramente estetico ma serve anche a veicolare delle informazioni (come nelle tabelle sopra), sopraggiungono ulteriori problemi: ad esempio, le persone daltoniche possono non essere in grado di distinguere determinate categorie. Idem per coloro che usano uno screen reader. E onestamente, alle volte il problema ce l'hanno proprio tutti, se non viene fornita una legenda dei colori usati, come in Eurovision Song Contest 2024#Finale.

Questo naturalmente è sempre stato un problema, ma la semplicità di utilizzo dei colori, unita all'incoraggiamento fornito da certi template (basti pensare ai parametri per gli stili nel {{Navbox}} e tanti altri esempi analoghi), e alla non necessariamente buona conoscenza di HTML o accessibilità del wikipediano medio, hanno fatto sì che il problema dilagasse ben più rapidamente di quanto potesse essere frenato. Negli ultimi tempi sta arrivando il tema scuro, e i problemi di accessibilità sono quanto mai attuali: attivando la modalità notte e imbattendovi in scelte di colori dubbie (perlomeno quelle che non sono state ancora corrette) vi accorgerete di prima mano dell'entità del problema.

La soluzione

Premetto subito che risolvere il problema nella sua interezza sarebbe un'impresa titanica. Occorrerebbe intervenire in tantissime pagine, nonché educare tutti gli utenti sulla questione dell'accessibilità. Con questa discussione vorrei proporre invece una soluzione parziale a questo problema: l'introduzione di una tavolozza (o palette) standardizzata, da usare idealmente in tutti i template e le voci, che ci aiuterebbe a raggiungere tre obiettivi:

1. Uniformità: dovendo scegliere tra un numero limitato di opzioni, componenti analoghe useranno lo stesso colore in maniera predefinita. Non avremo quindi, per fare un esempio, mille sfumature di blu, simili tra loro eppure diverse, per le testate dei sinottici.
2. Accessibilità: la tavolozza in oggetto verrebbe gestita dagli amministratori dell'interfaccia, che si premureranno (vero?!) di scegliere colori tali da garantire un buon livello di accessibilità nei vari casi d'uso, senza che l'utente debba preoccuparsene.
3. Semplicità: sia d'uso, perché non serve di andare a cercare il codice esadecimale di un certo colore, che di modifica: se, per dire, un giorno volessimo modificare un certo colore, basterà farlo in un singolo posto e avrà comunque effetto su ogni pagina in cui quel colore viene usato.

Valcio e io abbiamo buttato giù una bozza di colori proposti, completa di esempi d'uso e spiegazioni. Per il momento si tratta di una prima versione, quindi abbondantemente modificabile. Il rispettivo CSS verrebbe implementato come gadget nascosto e attivo per tutti. Poi inizieremmo a migrare tutti i template che utilizzano colori, partendo ad esempio dai sinottici, e cercando per quanto possibile di non discostarci troppo dal colore attuale. Lo scopo ultimo sarebbe di non dovere avere la necessità di usare i colori direttamente nelle voci (creando invece dei template che permettano di usare agevolmente quelli della tavolozza), ma questo ovviamente è un obiettivo ancora molto lontano. Mi farebbe piacere se la comunità ci buttasse un occhio e si esprimesse in proposito: cosa va bene, cosa non va bene, cosa si può fare diversamente. --Daimona Eaytoy (Scrivimi!) 22:29, 16 mag 2024 (CEST)

Favorevole alla proposta fatta. Come abbiamo potuto vedere all'hackathon di Catania, ci sarà parecchio da fare a sistemare template e tabelle (specie calcistiche e mediche) prima dell'arrivo del dark mode qui su it.wp. Meglio iniziare da subito il lavoro. Segnalo anche fra le cose da rivedere i moduli Sports table e Sports results, che sono stati da me importati tanto tempo fa da en.wp e che probabilmente andranno adeguati al sistema previsto. --Sannita - L'admin (a piede) libero 11:56, 17 mag 2024 (CEST)

[@ Valcio, Daimona Eaytoy] Proprio a tal proposito vi segnalo il ticket T363197. — $ZandDev ↩ 16:41, 22 mag 2024 (CEST)

Favorevole. Credo che l'introduzione del tema scuro possa essere l'occasione per dare una bella sistemata alla questione dei colori su 'pedia. Partendo dal presupposto che i colori in tabelle, infobox, navbox e compagnia non possono e non devono essere veicolo informativo. E se hanno solo motivazioni estetiche, che ci possono pure stare, non devono impedire la fruizione dei contenuti da parte degli ipovedenti. Ma anche se fossimo tutti ipervedenti, rimane il fatto che in molti casi l'uso e l'abuso dei colori stride con l'interfaccia di Wikipedia che da sempre è, se così si può dire, "sobria". In questa discussione, mi pare, si è arrivati a trovare un minimo di consenso sul rendere, appunto, più sobri i navbox sportivi, ma allargherei se possibile a tutti i campi. In sostanza IMHO dobbiamo iniziare a impostare regole più stringenti sull'uso dei colori e la proposta di Daimona e Valcio mi pare un bel passo avanti in tal senso, rendendo più semplice, per i contributori, rimanere nell'alveo corretto. NB Lascerei fuori solo i portali per i quali, magari, si possono accettare un po' di effetti speciali, tanto non li legge nessuno :-) --Amarvudol (msg) 13:47, 17 mag 2024 (CEST) Aggiungo. Fosse per me i nav box li farei tutti, ma proprio tutti, di un unico colore, quello violetto standard...

Favorevole a una paletta per l'accessibilità, ma Commento: meno favorevole a questa bozza: per il mio gusto personale è e sarà sempre molto molto brutta... XD Se si potessero fare più proposte sarebbe meglio. Anche ridurre il numero di colori (esempio) per me è un'opzione.

Per completezza, segnalo che su altre wikipedie esistono dei progetti dedicati a questi aspetti (Elemento Wikidata Q15222455 con 3 link), es di colori da ptwiki. Esistono tantissimi tipi di palette, basta googolare "palette colori online". Di solito Meta è all'avanguardia per estetica: loro cosa usano? --Pątąfişiķ 15:59, 17 mag 2024 (CEST)

[@ Patafisik] Non hai tutti i torti :D Il problema è che non c'è tantissima scelta visti i requisiti sul contrasto. In più, ho cercato di riproporre colori simili a quelli usati in alcuni template "grossi", per quanto possibile. I colori di Codex non ci bastano perché sono pochi, e perché alcuni di essi sono da scartare a priori (ad esempio il blu e il rosso usati per i link). Comunque diciamo che, come scrivevo sopra, uno dei vantaggi dell'avere una tavolozza standard è che cambiare uno o più colori diventa semplicissimo, quindi ci sarà senz'altro spazio per trovarne di migliori. --Daimona Eaytoy (Scrivimi!) 23:54, 17 mag 2024 (CEST)

[@ Patafisik] Su meta non ho trovato niente del genere. Però ho scoperto che anche su dewiki hanno un accessorio di questo tipo, ma molti dei colori proposti non hanno abbastanza contrasto per i link. In generale il problema (anche con palette trovate a giro) è questo: ci serve abbastanza contrasto coi colori specifici usati dalle skin. Laddove possibile, ho anche cercato di mantenere colori già usati in alcuni dei nostri template, mentre altri sono delle tinte base, schiarite fino a ottenere abbastanza contrasto (c'è una tabella molto utile su enwiki). --Daimona Eaytoy (Scrivimi!) 03:07, 24 mag 2024 (CEST)

@Daimona Eaytoy Compito arduo vedo. :/ --Pątąfişiķ 17:17, 25 mag 2024 (CEST)

Favorevole in linea generale. sfondo-testata-1 mi pare un po' troppo tenue e indistinguibile da sfondo-intestazione. Non potremmo intanto partire dallo stato attuale dei default dei sinottici? ricordiamoci poi che c'è anche la classe wikitable molto importante, magari è una buona occasione per uniformare sfondo-intestazione con quello delle wikitable. --Bultro (m) 20:10, 17 mag 2024 (CEST)

[@ Bultro] Lo stato attuale dei sinottici è rappresentato dalle tre classi in cima (base, intestazione e testata-1). Penso che si tratti un effetto ottico dovuto al vedere i campioni in isolamento, perché sfondo-testata-1 è il colore predefinito per le testate dei sinottici, e il risultato finale mi sembra abbastanza distinguibile (ad es. Template:Infobox/man#Esempi). Riguardo alla classe wikitable, in effetti quella che citi è una modifica che ho valutato, ed è citata tra i commenti per la variabile sfondo-intestazione (il colore usato nella versione mobile è lo stesso della wikitable). --Daimona Eaytoy (Scrivimi!) 23:54, 17 mag 2024 (CEST)

no sono proprio diversi, #dedede e #ededed :) --Bultro (m) 17:25, 18 mag 2024 (CEST)

[@ Bultro] E te pareva, mi son fatto confondere dai codici quasi uguali. Ora però ricordo perché sono diversi: il default attuale (#dedede) non ha abbastanza contrasto coi link (3.98:1 su #36c), quindi l'avevo cambiato con un colore simile ma più accessibile. E avevo invece messo #dedede come sfondo-testata-testo-1, da usarsi quando non ci sono link. Volendo rimanere su quella tonalità di grigio, #ebebeb è il colore più scuro che ci possiamo permettere coi link. --Daimona Eaytoy (Scrivimi!) 19:56, 18 mag 2024 (CEST)

Favorevole Sull'accessibilità abbiamo tanto terreno da recuperare. --ArtAttack (msg) 17:30, 18 mag 2024 (CEST)

Fortemente favorevole e disponibile anche a dare una mano, per quanto possibile. --Y_iyi – (scrivimi) 01:30, 20 mag 2024 (CEST)

Fortemente favorevole, l'accessibilità, specialmente in dark mode, ha bisogno di essere migliorata, però penso che la questione si possa (e forse si debba) ampliare ad una questione strettamente legata alla qui discussa. Domanda:: da quello che sembra a me, alcuni colori in Dark mode sono come in negativo, cosa che va ad intaccare alcune scelte cromatiche che ho visto in termini di firme e/o template in Pagina utente (vedasi come esempio gli avvisi in testa la mia pagina di discussione o i colori degli avvisi nel namespace principale). Ora, premesso che non so per nulla come funzioni in termini cromatici il passaggio light/dark mode e in materia di colori in programmazione sono molto ignorante, non capisco perché alcuni vengano invertiti e altri no, come gestire questa cosa in modo che in light mode non diventi illeggibile e proporrei una riflessione a riguardo dell'uso di colori che siano "neutri" rispetto al passaggio dark/light mode o ad un sistema per evitare che l'uso di una modalità obblighi a vedere accostamenti cromatici discutibili a fronte di una scelta di colori efficace nella modalità opposta. Sarebbe anche utile una linea guida con la spiegazione, in parole spicce, delle motivazioni e del funzionamento di questi meccanismi (passaggio dark/light e accessibilità) che, non avendo partecipato alle prime implementazioni, mi permettano di capire come utilizzare efficacemente i colori.
Se non sono stato chiaro resto a disposizione per chiarimenti --Esc0fans -and my 12 points go to... 14:29, 20 mag 2024 (CEST)

Aggiungo già alcuni esempi che mi fanno supporre quanto affermato sopra: in primis gli avvisi. Gli avvisi gialli e viola non sono distinguibili e anche il giallo è, concedetemi l'espressione, "poco giallo". Considerando si tratti in prevalenza di una barra verticale messa per differenziare le categorie, si potrebbe considerare l'ipotesi di utilizzare colori più simili alla versione light che, seppur contrastino meno, restano, almeno a mio avviso più riconoscibili. --Esc0fans -and my 12 points go to... 14:35, 20 mag 2024 (CEST)

Ho trovato un altro esempio di come si presenta il problema colori: la legenda della cartina presente in Alfabeto cirillico#Uso_nelle_lingue --Esc0fans -and my 12 points go to... 15:09, 20 mag 2024 (CEST)

[@ Esc0fans] Per i colori in night mode c'è ancora molto da fare. Anche la tavolozza qui proposta non offre delle vere e proprie scelte cromatiche in dark mode. L'idea è però quella di semplificare e standardizzare l'utilizzo che facciamo del colore, così da rendere le modifiche future (ad esempio per la night mode) molto più facili da effettuare. Riguardo a come funzioni di preciso il cambio/inversione dei colori, mi è difficile risponderti perché la night mode è ancora sperimentale e ho l'impressione che certi dettagli siano ancora in sviluppo e fortemente soggetti a modifiche. A margine, con la night mode di vector a me gli avvisi risultano tutti in scala di grigi, non invertiti. --Daimona Eaytoy (Scrivimi!) 15:54, 20 mag 2024 (CEST)

@Daimona Eaytoy, grazie mille della spiegazione. La mia idea è quella di porre l'attenzione anche su questa problematica. --Esc0fans -and my 12 points go to... 16:01, 20 mag 2024 (CEST)

[@ Daimona Eaytoy] Mi sembra che venga imposta una direttiva !important che va a sovrascrivere il colore dei bordi con     #c8ccd1, comprese le barre colorate a sx degli avvisi visto che sono anch'esse bordi "grossi". — $ZandDev ↩ 22:09, 20 mag 2024 (CEST)