跳到主要内容

验证调色板对比度

验证调色板对比度功能会检查您设计调色板中的颜色组合，以确保它们符合 WCAG（Web 内容无障碍指南）标准，然后再将这些颜色应用到您的主题上。

概述​

此功能通过验证文本和背景颜色之间的对比度比，确保您的网站配色方案符合无障碍标准。这有助于防止那些可能让视力障碍用户难以阅读的颜色组合。

输入格式​

该功能接受一个颜色调色板作为输入：

{
  "colors": [
    {
      "name": "primary",
      "hex": "#678233"
    },
    {
      "name": "text",
      "hex": "#ffffff"
    },
    {
      "name": "background",
      "hex": "#f5f5f5"
    }
  ],
  "wcag_level": "AA"
}

参数​

参数类型是否必需描述
colorsarray是包含 name 和 hex 属性的颜色对象数组
wcag_levelstring否WCAG 合规级别："A"、"AA"（默认）或 "AAA"
pairs_to_checkarray否需要验证的特定颜色对（例如：["primary-text", "background-text"]）

检查的 WCAG 级别​

该功能根据 WCAG 标准验证对比度比：

级别普通文本大文本最小比例
A3:13:13:1
AA4.5:13:14.5:1
AAA7:14.5:17:1
  • 普通文本 — 小于 18pt（或 14pt 粗体）的文本
  • 大文本 — 18pt 或更大的文本（或 14pt 粗体或更大）

输出结构​

该功能会返回一份详细的验证报告：

{
  "compliant": true,
  "wcag_level": "AA",
  "pairs": [
    {
      "pair": "primary-text",
      "color1": "#678233",
      "color2": "#ffffff",
      "contrast_ratio": 5.2,
      "wcag_a": true,
      "wcag_aa": true,
      "wcag_aaa": false,
      "status": "pass"
    },
    {
      "pair": "background-text",
      "color1": "#f5f5f5",
      "color2": "#333333",
      "contrast_ratio": 12.1,
      "wcag_a": true,
      "wcag_aa": true,
      "wcag_aaa": true,
      "status": "pass"
    }
  ],
  "summary": {
    "total_pairs": 2,
    "passing": 2,
    "failing": 0,
    "recommendations": []
  }
}

输出字段​

FieldType描述
compliantboolean整个调色板是否符合指定的 WCAG 级别
wcag_levelstring检查的 WCAG 级别
pairsarray每个颜色对的详细结果
contrast_rationumber计算出的对比度比（1:1 到 21:1）
statusstring每个颜色对的 "pass"（通过）或 "fail"（失败）状态
recommendationsarray改进失败颜色对的建议

用法示例​

Prompt:

Check if my color palette meets WCAG AA standards. I have primary color #678233, text color #ffffff, and background #f5f5f5.

结果: 该功能会验证所有颜色组合并返回：

  • ✅ Primary + Text: 5.2:1 比例（通过 WCAG AA）
  • ✅ Background + Text: 12.1:1 比例（通过 WCAG AAA）
  • 总体：符合 WCAG AA 标准

与主题构建器的集成​

当使用 Theme Builder 的设计方向选择功能时，验证调色板对比度功能：

  1. 分析您选择的颜色调色板
  2. 检查所有文本与背景的组合
  3. 根据您选择的 WCAG 级别进行验证
  4. 为不合规的颜色对提供建议
  5. 防止应用无法访问的配色方案

最佳实践​

  • 从 AA 级别开始 — WCAG AA 是大多数网站的标准
  • 应用前进行测试 — 在确定设计之前，先验证您的调色板
  • 检查所有组合 — 确保文本、链接和 UI 元素都符合标准
  • 考虑用户偏好 — 有些用户可能有额外的颜色敏感度
  • 使用对比度检查器 — 将此功能与浏览器工具结合使用进行验证

失败的颜色对和建议​

如果某个颜色对验证失败，该功能会提供建议：

{
  "pair": "primary-text",
  "status": "fail",
  "contrast_ratio": 2.8,
  "wcag_aa": false,
  "recommendations": [
    "将文本颜色调亮到 #ffffff（比例将为 5.2:1）",
    "将背景颜色调暗到 #556b2f（比例将为 4.8:1）",
    "使用不同的主色，例如 #4a6b1f（比例将为 6.1:1）"
  ]
}

相关功能​