$primary-medium SCSS 変数の問題

デフォルトのプライマリカラーは #4d238c です。問題は、生成される $primary-medium の色(#a179de)がアクセシビリティガイドラインを満たしていないため、これを暗くする必要があることです。

システムがミディアムカラーを使用しているすべての場所で変更するのは手間がかかりますが、例えば $primary-medium を赤に上書きするだけで済むはずです。

はい、その気持ちよく分かります。現時点では、自動生成されるセカンダリ変数を直接上書きする方法はありません。これらは CSS がビルドされる時点で固定されてしまうためです。そのため、当面はこれらの変更を手動で行う必要があります。

補足説明:

カラースケームは、色を定義する超シンプルな手段として設計されています。それ以上の詳細な制御が必要な場合は、カスタム CSS を使用してください。この点については、こちらでさらに詳しく議論されています: Customizing colors - #2 by awesomerobot

私たちが検討すべき点:

セカンダリ変数へのアクセスを許可する高度なカラースケームエディタの導入は悪いアイデアではないと思いますが、これらは非常に広範に使用されているため、結局のところ何らかの CSS を記述する必要があるでしょう。

例えば、$primary-medium のすべての テキスト 出現箇所を上書きしたい場合でも、境界線や他の要素など、より高いコントラストの $primary-medium が望ましくない場所でも使用されています。そのため、最良の場合でも高度なカラーエディタは必要なカスタム CSS を 削減 するかもしれませんが、完全に排除することはできません。

とはいえ、ここでの主要な問題は、アクセシビリティのためのテキストコントラストですよね?デフォルトのスタイルには、一部の領域でテキストコントラストの基準を満たしていない箇所があります。もし私たちがそこを改善すれば、最初からこの問題が発生しなかったかもしれません…

そのため、近い将来にチームでデフォルトのテキストアクセシビリティを見直し、将来的にはカラースケームツールを改善してアクセシビリティを考慮できるようにする計画です(例えば、https://cloudflare.design/color/ はテキストコントラストを考慮した興味深い実験です)。

クリスさん

早速のご返信、ありがとうございます。

はい、政府関連のプロジェクトで貴社製品を使用しているため、アクセシビリティが最大の懸念事項です。

コントラストに関するアクセシビリティの問題については、段階的な回避策を講じていますが、前述の通り、デフォルトの色設定自体がアクセシビリティ基準を満たすようにすることが望ましいと考えています。

なお、サイトはコントラストの問題だけでなく、他の要素でも問題が発生しています。例えば、リスト項目(<li>)が <ul> または <ol> の親要素に含まれていないケースなどです。

現時点ではコントラストの問題のみを制御できるため、修正が実装されるまでの間は現状で問題ありません。

類似の問題が発生したため、このスレッドにたどり着きました。テーマの共通 CSS に以下のコードを追加するワークアラウンドで解決しました。

:root {
  --primary-medium: #666666;
}