Контраст гиперссылок в тёмной теме

Опубликовал здесь, так как исходная тема была закрыта.

Привет @sam и @chapoi. Спасибо за быстрый ответ на сообщение @hugovk о подсветке кода в тёмной теме. Команда Python Discourse также отметила тёмный цвет переднего плана для гиперссылок, но это было упущено в теме Почти нечитаемая подсветка кода здесь.


Как видно, невыделенная гиперссылка как бы проваливается в темноту.

Не могли бы вы пересмотреть цвет текста гиперссылок в тёмной теме?

Вероятно, хорошо подойдёт тот же оттенок, что используется для hljs-builtin-names. Цвет фона тела сообщения придаст ему оттенок, отличный от схемы текста в блоке кода, а цвет будет сильнее контрастировать с более тёмным фоном тела сообщения.

Спасибо! — Леланд

Пожалуйста, не надо!

Не все, кажется, слепы!

В тёмной теме обычный текст белый, а гиперссылки синие.
Так в чём же проблема с этим?

1 лайк

У меня нет точно такого же оттенка, как у вас. Мой синий немного ярче и идеально подходит.

2 лайка

Дело лишь в том, чтобы слегка скорректировать оттенок для повышения контрастности, Алекс. Гиперссылки немного темноваты, из-за чего они теряются на фоне, как показано на скриншоте. Достаточно изменить оттенок на один-два уровня.

Имейте в виду, что разработчики Discourse и большая часть команды Python.org — это профессионалы с богатым опытом в проектировании пользовательских интерфейсов. Это тонкие корректировки. Здесь не предлагаются и не запрашиваются какие-либо грубые изменения.

1 лайк

Вы можете легко изменить цвета гиперссылок для себя в настройках темы с помощью CSS.

1 лайк

У меня то же самое, что и у @Jonathan_Poyer: гиперссылки на моём экране уже немного ярче синего, чем на вашем скриншоте:

Это может быть выбором цвета в используемой вами теме?

2 лайка

Спасибо за сравнения, @Jonathan_Poyer и @JammyDodger. Это очень полезно. Да, мои гиперссылки здесь тоже отображаются лучше. Я бы сказал, что это именно тот объём изменений, который я имел в виду. Вот скриншот, показывающий гиперссылку и скриншот из первого сообщения здесь.

Насколько мне известно, у нас настроен CSS по умолчанию. Группа администраторов — это команда основной разработки Python, поэтому они, понятно, предпочитают сосредоточиться на управлении Python, а не на управлении Discourse.

У них была дискуссия о подсветке синтаксиса, в которой участвовал Сэм Сафрон, и Чарли «Чапой» внёс соответствующие изменения для следующего релиза. Мы просто забыли затронуть тему гиперссылок. (Интересно, что подсветка синтаксиса теперь лучше там, даже хотя обновлённый релиз ещё не вышел. Возможно, кто-то нашёл настройки цветов и скорректировал их.)

Сначала я подумал, что 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 лайк

Судя по вашему номеру версии, обновление было установлено 4 июня, так что у вас должны быть эти обновления. :+1:

Полагаю, это третичный цвет. Его можно найти по адресу /admin/customize/colors, выбрав тёмную тему. На Meta и на моём тестовом сайте код цвета — 0f82af.

1 лайк

Теперь в ядре доступна дополнительная тёмная цветовая схема с высоким контрастом, которая, вероятно, решает вашу проблему. Вы можете протестировать эту схему здесь, на Meta; она называется «WCAG Dark».

Однако я вижу, что эта схема недоступна в сообществе Python (скорее всего, потому что сообщество было создано до того, как мы добавили схемы WCAG в ядро). Поэтому ваш лучший вариант — обратиться к администраторам этого сайта и попросить их включить цветовые схемы WCAG.

4 лайка

Здесь, на Discourse Meta, ситуация немного лучше, но я почти уверен, что на Python Discourse используются цвета по умолчанию.

Гиперссылки

На Python Discourse гиперссылки имеют цвет синий #306897 на сером #222222, с коэффициентом контрастности 2.69:1, что ниже рекомендаций W3C по доступности веб-контента (уровень AA: 4.5:1, уровень AAA: 7:1).

(Здесь, на Discourse Meta, ситуация немного лучше: синий #0F82AF на том же сером #222222, коэффициент 3.61:1, но всё ещё ниже уровней AA и AAA.)

Блоки кода

На Python Discourse исправление для блоков кода уже развернуто, и это определённо значительное улучшение.

Однако синий #4288C3 на сером #3F3F3F с коэффициентом 2.77:1 всё ещё не соответствует рекомендациям WCAG, поэтому есть куда расти.

(Здесь, на Discourse Meta, синий #4288C3 на сером #3F3F3F с коэффициентом 4.34:1 также лучше, но всё ещё ниже уровней AA и AAA.)

3 лайка

Спасибо за это. Вау! Это просто мастерски. Всё настолько хорошо видно, что я даже снизил яркость! Активный редактор сообщений внизу действительно хорошо заметен. В обычной тёмной теме он не так выделяется.

У редактора, правда, есть немного «уличного неона» в виде подсветки снизу. Возможно, стоит чуть приглушить этот эффект (либо затемнить оттенок, либо добавить больше красного/зелёного). Уменьшение толщины цветной рамки на один пиксель, возможно, было бы идеальным решением, но я предполагаю, что толщина рамки не является одним из параметров темы.

Мне очень нравится тёмная тема с высокой контрастностью.

2 лайка

Я бы сказал, что уровни контрастности здесь довольно сбалансированы. Различные элементы интерфейса также должны контрастировать друг с другом.

Например, если гиперссылки слишком близки к соотношению контрастности переднего и заднего плана W3C, они начнут сливаться с основным текстом. Поэтому контраст между цветом основного текста и цветом гиперссылок также важен, особенно когда речь идет о коротком тексте гиперссылки в центре абзаца основного текста.

@sam и @chapoi, знаете ли вы, были ли здесь цвета гиперссылок и подсветки кода в Discourse Meta изменены относительно значений по умолчанию?

1 лайк

Отказ от ответственности: я не Sam и не Chapoi :slightly_smiling_face:, но это цвета стандартной тёмной темы с моего тестового сайта (которые также используются на Meta):


Этот конкретный тестовый сайт был создан в конце октября 2021 года.

2 лайка

Является ли 0f82af текущим цветом по умолчанию для третичного цвета в тёмной теме?

1 лайк

Я так полагаю. Я не трогал свои цветовые палитры на тестовом сайте, поэтому считаю, что это разумное предположение. Однако кто-то более осведомлённый может располагать дополнительной информацией. :slightly_smiling_face:

2 лайка

А как насчёт вашей версии?

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

1 лайк

Я проверял цветовые палитры на коммите 17227e9e53, но заметил, что он отставал от вашего на несколько коммитов, поэтому решил обновить, чтобы быть уверенным. Сейчас это 42683d4874, и код цвета третичного цвета тёмной темы (0f82af) остался прежним.

1 лайк