Closed4

LCH色空間でアクセシビリティを考慮したカラーパレットをつくる

sagarayasagaraya

HSLだと明度や彩度を固定して、色相を変えたときにコントラスト比がかなりバラつくという問題がある。そのため、アクセシビリティを考慮したカラーパレットを作るときに不便。

LCHだと人間の知覚にあわせていい感じに設計されているらしく、Lightnessの値でコントラスト比を調整できる。Lightness(明度)とChroma(彩度)を固定して、色相を変えたときに、コントラスト比をある程度揃えたカラーパレットが簡単に作れる。

sagarayasagaraya

カラーパレットの例

まずはLightnessを50ぐらいでつくって、色味や全体のバランスをみて調整した。

コントラスト比のチェックはこのWidgetを使っている。
https://www.figma.com/community/widget/1123669584321839030

(色を変えたときに手動で更新しないといけなくて少し不便)

このスクラップは2023/08/25にクローズされました