시력 저하자를 위한 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개의 좋아요

디스커스의 기본 색상 스키마가 WCAG에서 정한 기준을 충족한다면 정말 좋겠습니다. 그렇지 않은 이유에 대해 설명해 주실 수 있으신가요?

4개의 좋아요

Discourse는 원래 고대비 색상으로 설계되지 않았기 때문에, 색상 변경만으로는 이러한 차이를 수용하기 위해 보다 근본적인 변경이 필요할 것입니다. 첫 단계로 이 접근을 취함으로써, 보다 접근성이 높은 색상을 오늘 바로 적용할 수 있습니다.

간단한 예시로, 읽은 주제와 읽지 않은 주제를 어떻게 구분하는지 살펴볼 수 있습니다. 기본적으로는 주제를 읽은 후 대비를 낮추어 이를 표시합니다:

WCAG 표준을 충족하려면 읽은 제목의 대비를 높여야 하는데, 그 결과 읽은 주제와 읽지 않은 주제 간의 대비가 거의 사라집니다. 따라서 장기적으로는 대비가 아닌 다른 방식으로 두 상태를 구분하는 방안을 고려해야 할 것 같습니다.

15개의 좋아요

알겠습니다. 팀이 해당 업무를 지속적으로 추진해 나가도록 독려하고 싶습니다.

8개의 좋아요

정말 훌륭합니다. 감사합니다. 시력이 불편한 사용자들 중 몇 분이 이에 대해 불만을 제기했는데, 정말 고맙게 생각합니다. 바로 활성화했습니다.

15개의 좋아요

첫 번째 게시글을 읽고 나서는 새 색상을 마법사(Wizard)에서 선택해야 목록에 추가되는 줄 알았습니다. 마법사를 실행해 색상 페이지에 도착했을 때, 새 색상을 목록에 추가하고 싶었기 때문에 모든 색상을 선택할 방법을 찾았습니다. 그런데 제 이해가 잘못된 것 같습니다. 색상 페이지에서 색상이 선택되는 방식을 보면, 색상 스킴은 오직 하나만 선택할 수 있는 것으로 보입니다. 그래서 지금은 혼란스럽습니다.

  1. 색상 페이지에서 스킴을 선택하면 어떤 일이 일어나나요? 모든 사용자의 기본값으로 설정되나요?
  2. 왜 마법사에서는 색상 스킴을 하나만 선택할 수 있나요? 아마도 질문 1의 답과 같은 이유일 것입니다.

첫 번째 게시글을 따라가며 작업하면서 이 글을 쓰고 있으므로, 색상 페이지의 설정은 그대로 두었습니다.

admin > customize > colors로 이동했습니다. 몇 가지 실험을 해본 결과,

  1. New(새로 만들기)를 선택하고
  2. Base palette(기본 팔레트)의 드롭다운을 열면 이제 WCAG Light와 WCAG Dark가 포함되어 있습니다.
    이렇게 하면 항목을 선택할 수 있는 방법이 생깁니다.

따라서 WCAG Light를 선택했고, 색상 팔레트 이름과 색상을 선택하는 대화상자가 표시되었습니다. 예시처럼 이름에 WCAG Light를 입력하고 Color scheme can be selected by users(사용자가 색상 스킴을 선택할 수 있음)를 선택한 후 Save(저장)를 클릭했습니다.

community.yoursite.com/my/preferences/interface로 이동했는데, Color Scheme(색상 스킴) 섹션을 찾을 수 없었습니다.

또한 우리 사이트에는 Hamburger Theme Selector(햄버거 테마 선택기)가 있는데, 여기서 자동으로 표시될 줄 알았지만, 이들을 사용하려면 새로운 Base Theme(기본 테마)를 만들어야 하는 것으로 보입니다.

이것은 불만이 아니라, 게시글을 처음 읽고 테스트해 본 사용자의 피드백일 뿐입니다. :slightly_smiling_face:

2개의 좋아요

음, 정상적으로 작동해야 합니다. 인터페이스 설정 페이지를 새로고침해야 했을 수도 있습니다.

3개의 좋아요

제가 보고 있는 것은 이것입니다. HTML 페이지도 새로고침했는데도 아무 변화가 없습니다.

참고: 이 사이트는 Discourse 호스팅으로 운영되고 있으니, 그것이 관련이 있다면요 - https://swi-prolog.discourse.group/

1개의 좋아요

사이트를 확인해 봤는데, 두 스키마 모두에서 "Color scheme can be selected by users"가 활성화되어 있지 않은 것 같습니다. 선택 사항을 저장하기 위해 체크박스를 클릭하지 않으셨나요?

5개의 좋아요

아, 정말 웃겼어요. 당신 때문이 아니라 제가 한 일 때문이었죠. 확인해 주시고 답장해 주셔서 감사합니다.

Admin > Settings > Customize > Colors

왼쪽 패널에서 WCAG Light와 WCAG Dark를 확인하세요.

WCAG Light를 클릭하면 다음이 표시됩니다.

그 다음 Color scheme can be selected by users를 활성화했습니다.

처음에는 추가된 파란색 체크박스를 알아채지 못했습니다.

추가된 파란색 체크박스를 클릭하면 화면이 다음과 같이 변경됩니다.

그 후 https://swi-prolog.discourse.group/my/preferences/interface로 이동하면 이제 다음과 같이 표시됩니다.

:slightly_smiling_face:


사용자가 사용할 수 있는 색상을 몇 가지 더 추가한 후, 인터페이스 옵션이 변경되어 일반 모드와 다크 모드 모두에 대해 선택할 수 있게 되었습니다.

7개의 좋아요

이것이 정확히 무슨 뜻인지 더 자세히 설명해 주실 수 있나요? 저는 첫 포럼을 설정하려 하고 있으며, 색상 스킴을 커스터마이징하고, 또한 사용자 시스템 설정에 기반한 자동 다크 모드 전환을 지원하고 싶습니다.

이 새로운 스킴을 기반으로 색상을 커스터마이징하는 것이 좋을까요?

최근 다크 모드 지원을 위해 색상 스킴 구성 방식이 변경된 점(최근 스레드에서 논의된 내용)과 이 새로운 접근성 스킴을 고려할 때, 현재 커스텀 색상 스킴을 만드는 단계는 무엇인가요?

감사합니다!

2개의 좋아요

즉, 이러한 WCAG 팔레트가 선택되면, 다양한 요소의 색상을 변경하기 위한 추가 CSS(대부분 기본으로 사용하는 것보다 대비가 높은 색상 변수를 사용하도록)가 로드됩니다. 이 CSS는 색상 팔레트의 이름에 기반하여 로드된다고 생각합니다…

따라서 이러한 팔레트를 수정하면서 커스텀 CSS의 일부 대비 개선 사항을 유지하려면 이름을 변경하지 않아야 할 것 같습니다(그렇습니까 @pmusaraj?).

또는 위의 링크에서 CSS를 복사하여 자체 테마에서 사용할 수도 있습니다(다만, 우리가 진행하는 업데이트는 반영되지 않습니다).

9개의 좋아요

아니요, 현재 스킴이 두 개의 기본 WCAG 스킴 중 하나에서 파생된 것이라면 WCAG 전용 CSS가 포함됩니다. 따라서 새 스킴의 이름을 원하는 대로 지정할 수 있지만, 기본 WCAG 스킴에서 생성된 경우 추가 CSS가 적용됩니다.

10개의 좋아요

이 새로운 기능이 기대됩니다! 궁금한 점이 있는데, 현재 Discourse가 WCAG 가이드라인을 완전히 준수하고 있나요, 아니면 아직 더 개선할 부분이 있나요?

1개의 좋아요

아직 해야 할 일이 조금 더 있지만, 많지는 않습니다. 현재 작업의 약 99%를 완료했으며, 마지막 남은 부분을 채우기 위해 접근성 전문가와 적극적으로 협력하고 있습니다.

7개의 좋아요

모든 사용자분들께 정말 좋은 소식입니다. 어떤 WCAG 지침을 기준으로 작업하고 계신가요? WCAG 3.0인가요?

2개의 좋아요

WCAG 2.0를 향해 나아가고 있으며, 3.0은 아직 초안 단계입니다. https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/ 참조

7개의 좋아요

이 스레드를 따라가면서 WCAG 2.0이 지원된다는 소식을 듣게 되어 기쁩니다. 제가 놓친 것일 수도 있지만, 자막(closed captioning)에 대한 언급은 보이지 않습니다. Discourse는 동영상 자산에 자막을 지원하나요? Discourse에 자막이 포함된 동영상을 게시할 수 있는 메커니즘이 있나요?

2개의 좋아요

HTML5 비디오 태그를 사용하여 자막을 수동으로 추가할 수 있으며, 이를 위한 UI를 약간 제공하는 테마 컴포넌트도 있습니다.

8개의 좋아요

WCAG Dark 정말 감사합니다! 너무 마음에 들어요!!

사실 제가 꼭 필요한 건 아니에요(아는 한에서는요) - 그냥 디자인이 정말 멋있다고 생각해서요. :heart:

3개의 좋아요