📘 公式リファレンス🔧 リファレンス/フィルター初級

color_brightness フィルター（明るさ取得）

16進カラーコード（例: #EA5AB9）から認知された明るさを 0 ～ 255 の数値で算出するフィルター。W3C の AERT (Accessibility Evaluation and Repair Tools) の定義に準拠。

用途

カラーピッカーで選んだ色の背景上に白黒テキストを自動選択するとき、または色が十分な視認性を持つかアクセシビリティ検証をするとき。

設置場所

Liquid テンプレート内で `{{ '#EA5AB9' | color_brightness }}` の形で使う。メタフィールドの色値を取得して明るさ判定する場合は `{{ product.metafields.custom.color_value | color_brightness }}` のように組み込む。

注意点

入力は 6 桁の 16 進カラーコード（# 付き）である必要がある。短縮形(#RGB)や rgb() 形式は動作しないため、事前に正規化する。戻り値は 0（最暗）～ 255（最明）の整数なので、テキスト色を決めるときは閾値（例: 128 以上なら黒、未満なら白）を設定して比較する。

タグ:coloraccessibilitybrightnesscontrast

仕様

30 行 / json

{
  "category": "color",
  "deprecated": false,
  "deprecation_reason": "",
  "description": "",
  "parameters": [],
  "return_type": [
    {
      "type": "number",
      "name": "",
      "description": "",
      "array_value": ""
    }
  ],
  "examples": [
    {
      "name": "",
      "description": "",
      "syntax": "",
      "path": "/",
      "raw_liquid": "{{ '#EA5AB9' | color_brightness }}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    }
  ],
  "summary": "Calculates the [perceived brightness](https://www.w3.org/WAI/ER/WD-AERT/#color-contrast) of a given color.",
  "syntax": "string | color_brightness",
  "name": "color_brightness"
}

出典・ライセンス

Source:: Shopify/theme-liquid-docs/data/filters.json
Repository:: https://github.com/Shopify/theme-liquid-docs
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

color_brightness フィルター（明るさ取得）

仕様

出典・ライセンス

関連項目

avatar フィルター（顧客アバター画像HTML生成）

default_errors フィルター（フォーム送信エラーを日本語化）

date フィルター（日付を指定形式でフォーマット）

payment_terms フィルター（Shop Pay分割払いバナーを生成）

abs フィルター（数値の絶対値を取得）

append フィルター（文字列の末尾に追加）