📚 ブログノート

学習したことを書くブログ。主にエンジニアリング・マーケティング関係

color-ccontrast() : ブラウザが色リストかららよしなに値を返してくれるよ!

State of CSS 2022に書いてあったけど、2022年にくる…?機能として CSS Color Module Level 5 のcolor-contrast()が挙げられていた。

color-contrast()関数に色のリストを渡すと、コントラスト比を満たす色を決めてくれてるってやつ。

color: color-contrast(gray vs black, white)

たとえば背景色に対してテキスト色のコントラスト比を担保したいとき、関数の引数としてまず背景色を渡して、続いて後ろにテキスト色のリストを渡すと、コントラスト比率が高い方、この場合は白か黒かをブラウザが判定して返してくれる。

さらに続けてコントラスト比も渡せるらしい。

color: color-contrast(gray vs black, white to AA)

コントラスト比は数字のほかにキーワードが策定されてる。AA (4.5)、AA-large (3)、AAA (7)となっている。WCAG2.1に策定されてるコントラスト比が設定されている模様。ちなみにこれはcolorプロパティ以外にも適用が可能。

これはカラーテーマがたくさんあるときはめちゃくちゃ便利だなと。

:root {
  --theme-main-1: red;
  --theme-main-2: green;
  --theme-main-3: blue;
}

.box {
    color: color-contrast(var(--background-color) vs black, white);
}

body.theme-1 {
  --background-color: var(--theme-main-1);
}

body.theme-2 {
  --background-color: var(--theme-main-2);
}

body.theme-3 {
  --background-color: var(--theme-main-3);
}

てな感じで。ちなみに色リストを指定しない場合は白か黒かで判定されるそうです。

2022年5月現在のモダンブラウザ対応はSafari 15のみ。ほんとに今年中に来るのかな…?

こうやってだんだんブラウザがよしなに判定してくれるやつがふえてくんでしょうか。いい時代になりました。