시력 저하자를 위한 WCAG 고대비 색상 팔레트

@pmusaraj와 저의 작업 덕분에, 이제 Discourse 설정 마법사에서 더 높은 대비 색 팔레트를 선택할 수 있는 옵션이 제공됩니다.

이 팔레트들은 텍스트 대비를 우선시하며, 웹 콘텐츠 접근성 지침(WCAG)의 색상 대비 기준(Level AA)을 충족하도록 설계되었습니다. 백엔드에서는 일반적인 색상 팔레트와 다르며, 추가적인 CSS도 자동으로 포함됩니다.

라이트 모드와 다크 모드 버전 모두 사용할 수 있습니다(목록에서 마지막 두 가지 옵션입니다). 기존 사이트는 community.yoursite.com/wizard/steps/color을 방문하거나, admin > customize > colors에서 새 팔레트를 만들 때 기본 팔레트로 선택하여 이 색상들에 접근할 수 있습니다.

생성된 후 이 팔레트들은 admin > customize > colors 아래에 목록으로 표시됩니다. 사이트의 기본 색상으로 사용하지 않는 경우, 사용자가 이 팔레트를 선택할 수 있도록 설정할 수도 있습니다.

사용자 선택 가능하도록 설정하면, 각 사용자는 개인 설정의 인터페이스 섹션(community.yoursite.com/my/preferences/interface)에서 자신의 색상 팔레트를 선택할 수 있습니다.

이 팔레트들의 대비와 관련하여 문제가 발생하면 알려주시면, WCAG에서 정한 기준을 계속 충족할 수 있도록 조치하겠습니다!

27개의 좋아요

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개의 좋아요

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개의 좋아요

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

8개의 좋아요

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개의 좋아요

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개의 좋아요

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

3개의 좋아요

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개의 좋아요

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개의 좋아요

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

I then enabled Color scheme can be selected by users

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

then going to SWI-Prolog - Users and developers of SWI-Prolog, an implementation of the Prolog programming language 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

7개의 좋아요

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개의 좋아요

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).

9개의 좋아요

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개의 좋아요

Great to see this new feature! Curious - does Discourse currently meet the full WCAG guidelines or is there still some more work to do?

1개의 좋아요

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.

7개의 좋아요

That’s excellent to hear for all the users. And which WCAG guidelines are you working towards? WCAG 3.0?

2개의 좋아요

We’re working towards WCAG 2.0, 3.0 is still in the draft stage according to WCAG 3 Introduction | Web Accessibility Initiative (WAI) | W3C

7개의 좋아요

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?

2개의 좋아요

You can manually add subtitles by using the HTML5 video tag, and there is also a theme component that provides a bit of a UI for it.

8개의 좋아요

Thank you so much for WCAG Dark! I love it!!

I don’t actually have a need for it, per se (as far as I know) - I just think it looks fantastic. :heart:

3개의 좋아요