Closed4
LCH色空間でアクセシビリティを考慮したカラーパレットをつくる
を見てたら、LCH色空間というものを知った。
HSLだと明度や彩度を固定して、色相を変えたときにコントラスト比がかなりバラつくという問題がある。そのため、アクセシビリティを考慮したカラーパレットを作るときに不便。
LCHだと人間の知覚にあわせていい感じに設計されているらしく、Lightnessの値でコントラスト比を調整できる。Lightness(明度)とChroma(彩度)を固定して、色相を変えたときに、コントラスト比をある程度揃えたカラーパレットが簡単に作れる。
FigmaだとLCHというプラグインがあって、これで色調整できた。
カラーパレットの例
まずはLightnessを50ぐらいでつくって、色味や全体のバランスをみて調整した。
コントラスト比のチェックはこのWidgetを使っている。
(色を変えたときに手動で更新しないといけなくて少し不便)
このスクラップは2023/08/25にクローズされました