Liquid Snippets by ALSEL
📘 公式リファレンス🔧 リファレンス/フィルター中級

color_contrast フィルター(2色間のコントラスト比を計算)

2つの色のコントラスト比を計算し、比の分子を数値で返すフィルター。分母は常に1なので、戻り値が3.5なら3.5:1の比率を示す。

用途
テーマカスタマイザーで背景色とテキスト色を選択させるとき、WCAG アクセシビリティ基準を満たしているか検証して警告を表示したい場合に使う。
設置場所
Liquid 内で `{{ '#E800B0' | color_contrast: '#D9D8FF' }}` のように2つの色(16進数)を指定し、コントラスト比を数値で取得する。返り値が4.5以上なら AA レベル、7以上なら AAA レベルの基準をクリアしている。
注意点
色は16進数形式(#RRGGBB など)の文字列で指定する。戻り値は比の分子のみのため、WCAG 2.0 AA の基準(通常テキスト4.5:1、大きいテキスト3:1)や AAA 基準(通常テキスト7:1、大きいテキスト4.5:1)と直接比較できる。色の指定順序は結果に影響しない。
タグ:coloraccessibilitywcagcontrast-ratiovalidation

仕様

40 行 / json
{
  "category": "color",
  "deprecated": false,
  "deprecation_reason": "",
  "description": "The order in which you specify the colors doesn't matter.\n\n> Tip:\n> For accessibility best practices, the\n> [WCAG 2.0 level AA](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-visual-audio-contrast-contrast) requires a\n> minimum contrast ratio of 4.5:1 for normal text, and 3:1 for large text. [Level AAA](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-visual-audio-contrast7)\n> requires a minimum contrast ratio of 7:1 for normal text, and 4.5:1 for large text.",
  "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' | color_contrast: '#D9D8FF' }}",
      "parameter": false,
      "display_type": "text",
      "show_data_tab": true
    }
  ],
  "summary": "Calculates the contrast ratio between two colors and returns the ratio's numerator. The ratio's denominator, which isn't\nreturned, is always 1. For example, with a contrast ratio of 3.5:1, this filter returns 3.5.",
  "syntax": "string | color_contrast: string",
  "name": "color_contrast"
}

出典・ライセンス

License:
MIT

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

関連項目

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

avatar フィルター(顧客アバター画像HTML生成)

顧客アバターが存在する場合、それを表示する HTML タグを生成するフィルター。customer オブジェクトに対して使用する。

📁 theme-liquid-docs·MIT·19
📘 公式リファレンス🔧 リファレンス/フィルター初級

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

form.errors の各エラーコードに対応する既定のエラーメッセージを自動生成するフィルター。フォーム送信時の入力値不正や必須項目空白などのエラーを言語別に出力する。

📁 theme-liquid-docs·MIT·19
📘 公式リファレンス🔧 リファレンス/フィルター初級

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

日付値を指定されたフォーマット文字列に従って整形する。フォーマット文字列が空の場合は元の値がそのまま返される。入力が日付に変換できない場合も元の値が返される。

📁 theme-liquid-docs·MIT·19
📘 公式リファレンス🔧 リファレンス/フィルター初級

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

product フォームまたは cart フォームに対して使用し、Shop Pay の分割払いオプションを表示するための HTML を生成するフィルター。顧客が購入時に分割払いプランを選択できるようにする。

📁 theme-liquid-docs·MIT·19
📘 公式リファレンス🔧 リファレンス/フィルター初級

abs フィルター(数値の絶対値を取得)

負の数を正の数に変換する。数値の絶対値(ゼロからの距離)を返すフィルター。

📁 theme-liquid-docs·MIT·30
📘 公式リファレンス🔧 リファレンス/フィルター初級

append フィルター(文字列の末尾に追加)

文字列の末尾に別の文字列を連結するフィルター。URL パスの結合やテキストの接尾辞追加に使う。

📁 theme-liquid-docs·MIT·30