다크 모드에서 하이퍼링크 대비

원본 주제가 닫혀서 여기에 게시합니다.

@sam님과 @chapoi님, 안녕하세요. @hugovk님의 다크 모드 코드 하이라이팅 보고에 대해 신속하게 응답해 주셔서 감사합니다. Python Discourse 팀도 하이퍼링크의 어두운前景(전경) 색상을 지적했지만, 이는 이 거의 읽을 수 없는 코드 하이라이팅 주제에서 누락되었습니다.


볼드 처리되지 않은 하이퍼링크가 어딘가 가라앉는 것처럼 보이는 것을 확인할 수 있습니다.

다크 모드에서 하이퍼링크 텍스트의 색상을 다시 검토해 주실 수 있을까요?

hljs-builtin-names에 사용된 동일한 색상이 잘 작동할 것입니다. 메시지 본문 배경색 덕분에 코드 블록 텍스트 스킴과 다른 색상이 되며, 더 어두운 메시지 본문 배경색과 대비가 더 강해질 것입니다.

감사합니다! -Leland

그렇게 해 주지 마세요!

모두가 시각 장애를 가진 것은 아닙니다!

다크 모드에서는 일반 텍스트가 흰색이고 하이퍼링크가 파란색입니다.
그걸로 어떤 문제가 있다는 건가요?

1개의 좋아요

저는 당신과 완전히 같은 색조는 아닙니다. 제가 가진 파란색은 좀 더 밝고, 완벽하게 잘 어울립니다.

2개의 좋아요

알렉스, 더 많은 대비를 얻기 위해 색조만 살짝 조정하면 되는 문제일 뿐입니다. 하이퍼링크가 약간 어두워서 스크린샷에서 보듯 배경으로 묻히는 현상이 발생하고 있습니다. 색조 레벨을 1~2단계만 조정하면 충분합니다.

디스코urse 개발자들과 Python.org 팀의 대부분은 사용자 인터페이스 설계에 풍부한 경험을 갖춘 전문가들입니다. 이는 미묘한 조정 사항이며, 여기서는 거친 수정을 제안하거나 요청하는 것이 아닙니다.

1개의 좋아요

테마 설정에서 CSS를 사용하여 하이퍼링크의 색상을 쉽게 변경할 수 있습니다.

1개의 좋아요

@Jonathan_Poyer 님과 동일한 문제를 겪고 있습니다. 제 화면의 하이퍼링크 색상이 이미 스크린샷 속 색상보다 약간 더 밝은 파란색입니다:

혹시 사용 중인 테마의 색상 설정 문제일까요?

2개의 좋아요

비교해 주셔서 감사합니다, @Jonathan_Poyer 님과 @JammyDodger 님. 정말 도움이 많이 됩니다. 네, 제 하이퍼링크도 여기서는 더 잘 보입니다. 제 예상했던 수준과 정확히 일치하는 조정이라고 할 수 있겠습니다. 여기는 OP의 하이퍼링크와 스크린샷을 보여주는 스크린샷입니다.

제가 아는 한, 우리는 기본 CSS 설정을 사용하고 있습니다. 관리자 그룹은 Python 코어 개발 팀이므로, 자연스럽게 Python 관리보다 Discourse 관리에 집중하는 것을 선호합니다.

Sam Saffron이 참여한 코드 하이라이팅에 대한 논의가 있었고, Charlie 'Chapoi’가 다음 릴리스를 위해 조정을 했습니다. 우리는 하이퍼링크 주제를 포함하는 것을 잊어버렸습니다. (흥미롭게도, 조정된 릴리스가 아직 대기 중임에도 불구하고 그곳의 코드 하이라이팅은 이제 더 좋습니다. 아마도 누군가가 색상 배정을 찾아서 조정했을 것입니다.)

처음에는 discuss.python.org가 다른 Discourse 빌드를 실행하고 있다고 생각했습니다. 그러나 우리는 현재 2.9.0.beta4를 실행 중이며, 페이지 요소 뷰어는 여기서도 동일한 내용을 표시합니다:

<meta name="generator" content="Discourse 2.9.0.beta4 - https://github.com/discourse/discourse version 8a58ce6578ab697f29cea211049c37c2ab341ba5">

혹시 하이퍼링크 색상 사양이 어디에 있는지 아시나요?

1개의 좋아요

왜 릴리스가 대기 상태인가요? 대부분의 포럼은 베타가 아니라 테스트를 통과한 버전을 업데이트에 사용합니다. 버전 이름은 당신이 얻을 수 있는 유일한 정보가 아닙니다.

1개의 좋아요

버전 번호를 확인해 보니 6월 4일에 업데이트된 것으로 보이므로 해당 업데이트가 적용되어 있어야 합니다. :+1:

3차 색상(tertiary colour)인 것 같습니다. /admin/customize/colors에서 다크 테마를 선택하면 찾을 수 있습니다. 메타 사이트와 제 테스트 사이트 모두 색상 코드로 0f82af를 사용하고 있습니다.

1개의 좋아요

현재 코어에 추가된 고대비 다크 컬러 스킴이 이 문제를 해결할 가능성이 높습니다. 메타 사이트에서 해당 스킴을 바로 사용해 볼 수 있으며, 이름은 'WCAG Dark’입니다.

다만, Python 커뮤니티 사이트에서는 이 스킴이 사용 가능하지 않은 것으로 보입니다(대부분 커뮤니티가 코어에 WCAG 스킴이 추가되기 전에 설립되었기 때문일 것입니다). 따라서 해당 사이트의 관리자에게 연락하여 WCAG 컬러 스킴을 활성화해 달라고 요청하는 것이 가장 좋은 방법입니다.

4개의 좋아요

Discourse Meta에서는 상황이 약간 더 나아졌지만, Python Discourse에서는 기본적으로 설정된 색상들을 사용하고 있다고 확신합니다.

하이퍼링크

Python Discourse에서 하이퍼링크는 회색 #222222 배경에 파란색 #306897으로, 명도 대비 비율이 2.69:1이며, 이는 W3C 웹 콘텐츠 접근성 지침(AA 등급: 4.5:1, AAA 등급: 7:1) 기준에 미치지 못합니다.

(여기 Discourse Meta에서는 상황이 약간 더 좋습니다: 같은 회색 #222222 배경에 파란색 #0F82AF, 비율 3.61:1이지만, 여전히 AA와 AAA 기준에 미치지 못합니다.)

코드 블록

Python Discourse에서는 코드 블록 수정 사항이 이제 배포되었으며, 확실히 큰 개선입니다.

하지만 회색 #3F3F3F 배경에 파란색 #4288C3으로 2.77:1인 명도 대비는 여전히 WCAG 지침에 미치지 못하므로 개선의 여지가 있습니다.

(여기 Discourse Meta에서는 회색 #3F3F3F 배경에 파란색 #4288C3으로 4.34:1로 비슷하게 더 나아졌지만, AA와 AAA 기준에는 여전히 미치지 못합니다.)

3개의 좋아요

이 기능 덕분에 감사합니다. 와! 정말 훌륭하네요. 모든 것이 너무 선명해서 실제로 화면 밝기를 낮췄습니다. 하단에 있는 활성 게시글 편집기가 정말 눈에 잘 띕니다. 일반적인 다크 테마에서는 이렇게 두드러지지 않거든요.

다만 편집기에 약간의 “스트리트 네온” 같은 하단 발광 효과가 있습니다. 한두 단계 정도 낮추는 것을 고려해 보시면 어떨까요 (색조를 어둡게 하거나 빨강/초록을 더 추가하는 식으로). 컬러 테두리를 1픽셀 얇게 만드는 것이 이상적일 수 있지만, 테두리 두께는 테마 매개변수 중 하나에 해당하지 않는다고 생각합니다.

저는 이 고대비 다크 테마를 정말 좋아합니다.

2개의 좋아요

여기서 대비 수준이 꽤 잘 균형 잡혀 있다고 생각합니다. 다양한 UI 요소들도 서로 대비가 필요합니다.

예를 들어, 하이퍼링크가 W3C의 전경/배경 대비 비율에 너무 가까워지면 본문 텍스트와 섞여 보이게 됩니다. 따라서 본문 텍스트와 하이퍼링크 색상 간의 대비도 마찬가지로 중요합니다. 특히 본문 단락 중앙에 있는 짧은 하이퍼링크 텍스트의 경우 더욱 그렇습니다.

@sam님과 @chapoi님, Discourse Meta의 하이퍼링크와 코드 하이라이팅 색상이 기본값에서 조정되었는지 알고 계신가요?

1개의 좋아요

면책 조항: 저는 Sam이 아니기도 하고 Chapoi도 아니지만 :slightly_smiling_face:, 제 테스트 사이트의 기본 다크 스킴 색상입니다(이 색상들은 Meta에서도 사용 중인 색상입니다):


이 특정 테스트 사이트는 2021년 10월 말에 생성되었습니다.

2개의 좋아요

**0f82af**이 현재 다크 테마의 기본 3차 색상(tertiary color)인가요?

1개의 좋아요

그렇게 생각합니다. 테스트 사이트의 색상 팔레트는 건드리지 않았기 때문에, 그렇게 추측하는 것이 타당하다고 봅니다. 다만, 더 전문적인 분이 더 자세한 정보를 알고 계실 수도 있습니다. :slightly_smiling_face:

2개의 좋아요

여러분의 버전은 어떤가요?

<meta name="generator" content="Discourse 2.9.0.beta4 - https://github.com/discourse/discourse version 8a58ce6578ab697f29cea211049c37c2ab341ba5">

1개의 좋아요

17227e9e53에서 색상 팔레트를 확인했는데, 내 쪽이 몇 개의 커밋 뒤처져 있는 것 같아 확실하게 확인하려고 업데이트했습니다. 지금은 42683d4874로 업데이트되었는데, 여전히 동일한 다크 테마의 서티어리(tertiary) 색상 코드(0f82af)를 사용하고 있습니다.

1개의 좋아요