Palette di colori ad alto contrasto WCAG per la bassa visione

Grazie al lavoro di @pmusaraj e al mio, Discourse ora include l’opzione per selezionare una palette di colori ad alto contrasto direttamente dalla procedura guidata di configurazione.

Queste palette danno priorità al contrasto del testo e sono progettate per rispettare le Linee Guida per l’Accessibilità dei Contenuti Web (WCAG) per il contrasto dei colori (Livello AA). Sotto il cofano, queste non sono palette di colori normali; includono anche automaticamente CSS aggiuntivo.

Sono disponibili sia una versione chiara che una scura (sono le ultime due opzioni nell’elenco). I siti esistenti possono accedere ai colori visitando community.yoursite.com/wizard/steps/color o selezionandoli come palette di base quando ne creano una nuova da admin > personalizza > colori.

Una volta create, queste palette saranno elencate sotto admin > personalizza > colori — se non le stai utilizzando come colori predefiniti del tuo sito, puoi anche consentire agli utenti di selezionarle.

Quando impostate come selezionabili dagli utenti, le persone possono scegliere la propria palette di colori nella sezione interfaccia delle loro preferenze (community.yoursite.com/my/preferences/interface).

Se riscontri problemi con il contrasto di queste palette, faccelo sapere in modo che possiamo continuare a rispettare gli standard stabiliti dalle WCAG!

27 Mi Piace

It sure would be nice if the Discourse default color scheme met the standards set by WCAG. Can you comment on why that isn’t the case?

4 Mi Piace

Since Discourse wasn’t originally designed with the higher contrast colors, we’d probably want to make more significant changes beyond colors alone to accommodate the differences. Doing this as a first step gets these more accessible colors out there today.

One quick example is how we show the difference between read and unread topics. By default we do this by reducing the contrast after you’ve read a topic:

When meeting the WCAG standards we have to increase the contrast of the read titles, and as a result there’s not much contrast between read and unread… so I think longer term we’d want to consider a different treatment other than contrast to distinguish the two.

15 Mi Piace

Got it. I’d just like to encourage the team to continue driving that work.

8 Mi Piace

This is phenomenal, and thank you. On behalf of some of my vision-impaired users who have complained about this, it is greatly appreciated. I’ve immediately enabled this.

15 Mi Piace

After reading the first post was under the impression that the new colors have to be selected in the Wizard to be added to a list. Upon running the wizard and getting to the Colors page was looking for a way to select all of the colors as I was wanting to add the new colors to the list. Apparently my understanding is incorrect. From what I am seeing based on the way colors are selected on the Colors page, only one color scheme can be selected. So now I am confused.

  1. What is done by choosing a scheme on the Colors page. Does it set the default for everyone?
  2. Why is only one color scheme allowed to be chosen in the Wizard? Probably same as answer for question1.

Since I writing this as I work through following the first post, I am leaving the setting of the Colors page as it was.

Moving onto admin > customize > colors. After some experimenting found that

  1. Select New
  2. For Base palette open drop down which now includes WCAG Light and WCAG Dark.
    gives a way to select the items.

So selected WCAG Light and then was presented with dialog to name Color Palette and select colors. As in the example entered name WCAG Light, selected Color scheme can be selected by users and then clicked Save

Moving onto community.yoursite.com/my/preferences/interface, I did not find the Color Scheme section.

Also our site has the Hamburger Theme Selector, I was thinking these might show up there automatically, but it appears I have to create a new Base Theme (Theme) to use them.

This is not a complaint, just some feedback from someone reading the post for the first time and giving it a test run. :slightly_smiling_face:

2 Mi Piace

Hmm, that should have worked. It’s possible you needed a refresh of the interface preferences page.

3 Mi Piace

This is what I am seeing. Even did a refresh of the HTML page and no change.

Note: The site is hosted by Discourse hosting if that matters - https://swi-prolog.discourse.group/

1 Mi Piace

I took a look at your site, I don’t see “Color scheme can be selected by users” enabled on either scheme. Perhaps you didn’t click the check box to save the selection?

5 Mi Piace

Oh this was so funny. Not you, but what I did. Thanks for checking and replying.

From Admin > Settings > Customize > Colors

See WCAG Light and WCAG Dark in the left panel.

Click on WCAG Light brings up

image

I then enabled Color scheme can be selected by users

image

What I did not notice the first time around was the added blue check box

Clicking the added blue check box changes the display to

image

then going to https://swi-prolog.discourse.group/my/preferences/interface now shows

:slightly_smiling_face:


After adding a few more colors that can be used by users the interface option changed to give me a choice for both Regular and Dark mode

image

7 Mi Piace

Can you elaborate what this means? I am about to set up my first forum and will want to customize the color scheme, and also support automatic dark mode switching based on user system preferences.

Will I want to customize colors using these new schemes as a base?

What is the current steps for creating a custom color scheme given recent changes to how color schemes are constructed to support dark mode (as discussed on recent threads) and these new accessible schemes?

Thank you!

2 Mi Piace

Quindi, quando vengono selezionate queste palette WCAG, viene caricato del CSS aggiuntivo (trovato qui) per modificare i colori di vari elementi (solitamente per utilizzare una variabile di colore a contrasto più elevato rispetto a quella che usiamo di default). Credo che il CSS venga caricato in base al nome della palette di colori…

Quindi, se vuoi modificare queste palette e mantenere alcuni dei miglioramenti di contrasto forniti dal CSS personalizzato, penso che dovrai semplicemente non cambiare il nome (è corretto, @pmusaraj?).

In alternativa, puoi copiare il CSS dal link sopra e utilizzarlo nel tuo tema (anche se perderai gli aggiornamenti che apportiamo).

9 Mi Piace

No, the WCAG-specific CSS is included if the current scheme is a derivative of one of the two base WCAG schemes. So you can name the new scheme however you like, but if it is created from a base WCAG scheme, it will have the extra CSS.

10 Mi Piace

È fantastico vedere questa nuova funzionalità! Sono curioso: Discourse rispetta attualmente tutte le linee guida WCAG o c’è ancora del lavoro da fare?

1 Mi Piace

C’è ancora un po’ di lavoro da fare, ma non molto. Siamo al 99% e stiamo lavorando attivamente con un consulente per l’accessibilità per colmare le ultime lacune.

7 Mi Piace

È ottimo sentirlo per tutti gli utenti. E a quali linee guida WCAG state lavorando? WCAG 3.0?

2 Mi Piace

Stiamo lavorando per conformarci alle WCAG 2.0; la versione 3.0 è ancora in fase di bozza, come indicato su WCAG 3 Introduction | Web Accessibility Initiative (WAI) | W3C

7 Mi Piace

Seguendo questo thread, sono felice di sapere che WCAG 2.0 è supportato. Potrei averlo perso, ma non vedo menzionata la sottotitolazione. Discourse supporta i sottotitoli per i file video? Esiste un meccanismo in Discourse per pubblicare video con sottotitoli?

2 Mi Piace

Puoi aggiungere manualmente i sottotitoli utilizzando il tag video HTML5, ed esiste anche un componente del tema che fornisce una piccola interfaccia utente per questo.

8 Mi Piace

Grazie mille per WCAG Dark! Lo adoro!!

In realtà non ne ho un bisogno specifico (per quanto ne so) - penso solo che abbia un aspetto fantastico. :heart:

3 Mi Piace