ダークモードでのハイパーリンクのコントラスト

ソーストピックが閉じられたため、ここに投稿します。

@sam@chapoi 様。ダークモードでのコードハイライトに関する@hugovkの報告への迅速なご対応、ありがとうございます。Python Discourseのチームも、リンクの色が暗いことに気づいていましたが、これはここのほとんど読めないコードハイライトトピックには記載されていませんでした。

太字になっていないリンクが、穴に沈んでいるように見えるのがわかります。

ダークモードでのリンクテキストの色合いを再検討していただけますか?

おそらく、hljs-builtin-namesに使用されているのと同じ色合いがうまく機能するでしょう。メッセージ本文の背景色により、コードブロックのテキストスキームとは異なる色合いになり、暗いメッセージ本文の背景とのコントラストが強くなります。

ありがとうございます! - Leland

しないでください!

誰もが盲目ではないようです!

ダークモードでは、通常のテキストは白で、ハイパーリンクは青です。
それで、何が問題なのですか?

「いいね!」 1

私はあなたと全く同じ色合いを持っていません。私が持っている青はもう少し明るく、完璧に機能します。

「いいね!」 2

アレックス、コントラストを上げるために色合いを微調整するだけです。ハイパーリンクが少し暗いため、スクリーンショットに示すように背景に沈んでしまいます。色合いを1、2段階調整するだけで済みます。

Discourseの開発者やPython.orgのチームのほとんどは、ユーザーインターフェイスデザインにおいて豊富な経験を持つプロフェッショナルであることを念頭に置いてください。これらは微妙な調整です。ここで提案または要求されているのは、大雑把な変更ではありません。

「いいね!」 1

CSS を使用して、テーマ設定でハイパーリンクの色を簡単に変更できます。

「いいね!」 1

@Jonathan_Poyer さんと同じように、ここ/私の画面上のハイパーリンクは、あなたのスクリーンショットのものよりもすでに少し明るい青色になっています。

これは、あなたが使用しているテーマの色設定によるものでしょうか?

「いいね!」 2

比較していただきありがとうございます、@Jonathan_Poyer@JammyDodger。大変参考になります。はい、私のハイパーリンクもここでより良く表示されます。私が考えていたまさにその調整量だと思います。ここに、OPのハイパーリンクとスクリーンショットを示すスクリーンショットがあります。

私の知る限り、デフォルトの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

version numberを確認したところ、6月4日に更新されているようですので、それらのアップデートが含まれているはずです。:+1:

それは第三の色だと思います。/admin/customize/colors でダークテーマを選択すると見つかります。Meta と私のテストサイトでは、どちらも色コードは 0f82af です。

「いいね!」 1

コアに追加されたハイコントラストのダークカラースキームを出荷しました。これにより、おそらく問題が解決するはずです。メタでこのスキームを試すことができます。WCAG Darkと呼ばれています。

このスキームはPythonコミュニティでは利用できないことがわかりました(おそらく、コミュニティがコアにWCAGスキームを追加する前に確立されたためです)。そのため、このサイトの管理者に連絡して、WCAGカラースキームを有効にするように依頼するのが最善の方法です。

「いいね!」 4

Discourse Meta では少し改善されていますが、Python Discourse ではデフォルトの色を使用していると確信しています。

ハイパーリンク

Python Discourse では、ハイパーリンクは 青色 #306897、背景色は灰色 #222222、コントラスト比 2.69:1 で、W3C の Web コンテンツ アクセシビリティ ガイドライン (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

ありがとうございます。すごいですね!非常に見やすいので、実際に明るさを下げました!下部のアクティブな投稿エディターが非常に目立ちます。通常のダークテーマではそれほど目立ちません。

エディターには、少し「ストリートネオン」のようなアンダーグローがあります。もう少し抑えることを検討してもよいかもしれません(色相を暗くするか、赤/緑を増やす)。色の境界線を1ピクセル細くするのが理想的かもしれませんが、境界線の太さはテーマのパラメータではないと仮定します。

高コントラストダークは本当に気に入っています。

「いいね!」 2

ここのコントラストレベルはかなりバランスが取れていると思います。さまざまなUI要素も互いにコントラストが必要です。

たとえば、ハイパーリンクがW3Cのフォアグラウンド/バックグラウンドコントラスト比に近すぎると、本文テキストに溶け込み始めます。したがって、本文テキストとハイパーリンクの色のコントラストも同様に重要です。特に、本文テキストの段落の中央にある短いハイパーリンクテキストの場合はなおさらです。

@samと@chapoi、Discourse Metaのハイパーリンクとコードのハイライトの色は、ここでデフォルトから調整されていますか?

「いいね!」 1

免責事項:私は Sam でも Chapoi でもなく :slightly_smiling_face:、これは私のテストサイトのデフォルトのダークカラースキームの色です(Meta のものと同じです):


この特定のテストサイトは 21 年 10 月下旬に作成されました。

「いいね!」 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にあり、ダークテーマの3次色コード(0f82af)は同じです。

「いいね!」 1