color-contrast()

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

color-contrast() は関数表記で、ある色の値と他の色の値のリストを取り、リストから最もコントラストが高くなる値を選択します。

構文

css
color-contrast(wheat vs tan, sienna, #d2691e)
color-contrast(#008080 vs olive, var(--myColor), #d2691e)

値

  • 関数記法: color-contrast(color vs color-list)

  • color

    • : あらゆる有効な <color> です。

  • vs

    • : 構文の部品としてのリテラルトークンです。

  • color-list

    • : 最初の値と比較する、少なくとも 2 つの色値のカンマ区切りリストです。

仕様書

Specification
CSS Color Module Level 6
# colorcontrast

ブラウザーの互換性

BCD tables only load in the browser

関連情報