Thanks to work from @pmusaraj and myself, Discourse now includes the option to select a higher contrast color palette from the setup wizard.
These palettes prioritize text contrast and are intended to meet the Web Content Accessibility Guidelines for color contrast (Level AA). Behind the scenes these aren’t normal color palettes; they also automatically include additional CSS.
Both a light and dark version are available (they’re the last two options in the list). Existing sites can access the colors by visiting community.yoursite.com/wizard/steps/color or by selecting them as base palettes when creating a new one from admin > customize > colors.
Once created these palettes will be listed under admin > customize > colors — if you’re not using them as your site’s default colors, you can also allow users to select these palettes.
When set as user-selectable individuals can pick their color palette in the interface section of their preferences (community.yoursite.com/my/preferences/interface).
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.
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.
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.
What is done by choosing a scheme on the Colors page. Does it set the default for everyone?
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
Select New
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.
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?
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?
So when these WCAG palettes are selected, some additional CSS (found here) is loaded to change colors of various elements (usually to use a higher-contrast color variable than what we use by default). I believe the CSS is loaded based on the color palette’s name…
So if you want to modify these palettes and retain some of the contrast improvements from the custom CSS, I think you’ll just have to not change the name (is that right @pmusaraj?).
Or you could alternatively copy the CSS from the link above and use that in your own theme (though you’ll miss out on updates we make).
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.
There is still some more work to do, but not much. We’re about 99% of the way and are currently actively working with an accessibility consultant to close the last gaps.
In following this thread I’m happy to hear WCAG 2.0 is supported. I may have missed it, but I don’t see closed captioning mentioned. Does Discourse support closed captioning on video assets? Is there a mechanism in Discourse to publish videos with closed captioning?
