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

brightness_difference フィルター（色のコントラスト計算）

2つの色の知覚的な明度差を計算する。W3C のアクセシビリティ基準に基づいた数値を返す。

用途

ストアの背景色とテキスト色を動的に組み合わせるとき、その組み合わせが視認性を満たしているか（明度差 125 以上）をチェックする。メタフィールドで色を指定した場合の自動コントラスト判定に使える。

設置場所

section や product-card 内で、2つの色の 16 進数コード（例: `#E800B0`、`#FECEE9`）を指定して `{{ color1 | brightness_difference: color2 }}` の形で使う。結果が 125 以上なら十分なコントラストを持つと判定できる。

注意点

引数の色は # 付きの 16 進数文字列で指定する必要があり、RGB() や HSL() 形式には対応していない。返り値は 0～255 の数値で、明度差が大きいほど値が大きくなる。アクセシビリティ対応としてテキストと背景のコントラスト比を厳密に検証したい場合は、このフィルターだけでなく contrast_ratio フィルターと組み合わせることを推奨する。

タグ:coloraccessibilitycontrastfilter

仕様

40 行 / json

{
  "category": "color",
  "deprecated": false,
  "deprecation_reason": "",
  "description": "&gt; Tip:\n&gt; For accessibility best practices, it's recommended to have a minimum brightness difference of 125.",
  "parameters": [
    {
      "description": "A color to compare with the provided color.",
      "name": "color",
      "positional": true,
      "required": true,
      "types": [
        "string"
      ]
    }
  ],
  "return_type": [
    {
      "type": "number",
      "name": "",
      "description": "",
      "array_value": ""
    }
  ],
  "examples": [
    {
      "name": "",
      "description": "",
      "syntax": "",
      "path": "/",
      "raw_liquid": "{{ '#E800B0' | brightness_difference: '#FECEE9' }}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    }
  ],
  "summary": "Calculates the [perceived brightness difference](https://www.w3.org/WAI/ER/WD-AERT/#color-contrast) between two colors.",
  "syntax": "string | brightness_difference: string",
  "name": "brightness_difference"
}

出典・ライセンス

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

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

brightness_difference フィルター（色のコントラスト計算）

仕様

出典・ライセンス

関連項目

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

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

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

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

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

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