2021-09-12

背景色の色相をコロコロ変えると

v9.21.0で背景色の色相がコロコロ変わるようにしていたが、戻した。一部の色相でコントラストが落ちるためだ。コントラストは60(APCAで計算した値で、WCAG 2.1の4.5:1相当)くらい確保できるが、一部の色相で57くらいまで落ちる。機械的にどうにかできるが、大変そうだった。

何か別のものがないといけない。多分color-contrast()関数が必要になるだろう。具体的には、彩度や明度を前後3%ずつずらしたもので比較する関数を作る。

:root {
  --hue: 48;
  --color-on-ground: hsl(0 0% 15%);
  --color-background: color-contrast(
    var(--color-on-background) vs
      hsl(var(--hue) 51% 93%),
      hsl(var(--hue) 51% 90%),
      hsl(var(--hue) 51% 87%),
      hsl(var(--hue) 48% 93%),
      hsl(var(--hue) 48% 90%),
      hsl(var(--hue) 48% 87%),
      hsl(var(--hue) 45% 93%),
      hsl(var(--hue) 45% 90%),
      hsl(var(--hue) 45% 87%)
    to AA
  );
}

こうすると、最もコントラスト比が4.5に近い色が選択される。これでコントラストの問題を低コストで機械的に解消できるだろう。パフォーマンスの点で懸念があるが、面倒で実装のあるSafari 15 TPで試しておらず、どうなるかわからない。

color-contrast関数は、accent-colorプロパティーで利用するといいのかもしれない。ユーザー指定の色(がinitialで参照できれば、それ)よりコントラストが出る場合にのみ、独自の色に差し替えるというようなことができる(かもしれない)。accent-colorプロパティーについては、コントラストではなく色で判断するためにユーザーが指定している可能性が否定できないので、あまり積極的に使いたくないが、使いたい気持ちもわかる。