良いパレットを作るのは難しい

先日、見栄えの良いカラーパレットを作成しようと1時間も費やしました。

最初の問題点は、プライマリからクォータナリまでのコントロールが具体的に何を指すのかが曖昧なことです。

テキストで説明できることには限りがあることは理解していますが、実際には、色がどのように変化するかを知る唯一の方法は、毎回ハードリフレッシュを行うことです。これも非常に時間がかかりました。

2番目の問題点は、「プライマリ」と「セカンダリ」の単一の色が、実際には --primary-low や --primary high などとして使用される一連の他の色を秘密裏に計算していることです。#2b2b2b のような色を使用すると、少し青みがかった類似の暗い色よりも非常に異なる結果が得られることに気づきました。これは、生成されたパレットが非常に異なるものになるためです。結果の色が予測不可能になるため、新しい色を試すたびに手探りでやっているような気分になります。基本的に3つの変数でパレット全体を制御できる単純さはありがたいですが、結果は非常に確率的だと感じます。

最後に、コントラストに多くの問題を抱えています。私が選んだ色では、テキストと背景のコントラスト、水平線と背景のコントラスト、返信/編集ボタンと背景のコントラストの間でトレードオフがありました。例えば、テキストのコントラストを上げると線が見えにくくなり、その逆も同様でした。

ここでは特に何も求めているわけではありません。おそらく、より柔軟性を高めるためにパレットのサイズを大きくすることが解決策になるでしょう。しかし、シンプルさを保つことの利点も理解しています。リアルタイムプレビューのようなものがあれば役立つかもしれませんが、これも優先度の低いリクエストであることは理解しています。

ただ、私の経験を記録しておきたかっただけです。最終的にはパレットを作成できましたが、完全に満足はしていません。他の人も同様の課題に直面したことがあるか、あるいは問題は私にあるのか、興味があります。アドバイスがあれば幸いです。

「いいね!」 2

はい、当初の意図は、管理者ダッシュボードのオプションを色を設定するための簡単な方法、基本的に「イージーモード」にすることでした。それが制限的であり、一部の色の組み合わせではコントラストが良くないことには同意します。

良いニュースは、リモートテーマが自動生成されたすべての色をオーバーライドできることです。Override values for auto-generated color variables を参照してください。

また、最近、色スキームやライト/ダークモードを管理者とユーザーの両方にとって扱いやすくするという希望を持って、色の仕組みを詳しく調べてきました。そのため、いくつかの役立つ改良を行うことができることを願っています。

「いいね!」 7

あなたの技術的な指摘を損なうつもりはありませんが、これは役に立つかもしれません。

「いいね!」 2

これが可能だとは知りませんでした。これが私が落ち着くべき解決策かもしれません :slight_smile:

「いいね!」 1

WCAG のハイコントラスト パレットから始めて、さらに多くのカラー フィールドを提供するパレットを作成すると役立ちますか?

WCAG パレットには、望ましくない可能性のある自動生成されたカラー計算の違いがあるかどうかはわかりません。

「いいね!」 1

はい、それらには追加のCSS(https://github.com/discourse/discourse/blob/main/app/assets/stylesheets/wcag.scss)が付属しているため、意図しない追加が含まれている可能性があります。

「いいね!」 1