对比与可读性

尚无可操作的示例；插画为编辑用途，用于说明对比度是可测量的量化检查这一概念，不代表已验证的实现。应用到实际产品前，仍需用真实的颜色值和渲染环境测量对比度，并覆盖深浅色主题、悬停与禁用状态等各种实际情形。

{
  "evidenceType": "W3C 无障碍标准中的可测量成功标准",
  "limit": "本条目仅覆盖 WCAG 2.2 AA 级列出的对比度与文字间距数值；更高的 AAA 级阈值、色觉缺陷模拟等更细致的可读性议题不在本条目范围内，需要另行评估。"
}

{
  "id": "contrast-legibility",
  "type": "principle",
  "name": {
    "zh": "对比与可读性",
    "en": "Contrast and Legibility"
  },
  "aliases": [
    "Contrast Ratio",
    "对比度",
    "文字可读性"
  ],
  "granularity": "component",
  "intents": [
    "read-content",
    "include-users"
  ],
  "tags": [
    "对比度",
    "可读性",
    "无障碍",
    "文字",
    "量化检查"
  ],
  "definition": "正文文字与其背景之间需要达到规定的最小对比度，界面控件的边界与状态指示需要达到另一条更低的最小对比度；这是可以用测量结果通过或不通过的量化检查，不是某种视觉风格的名称。",
  "boundary": "图形与背景说明的是人眼把前景从背景中分离出来的知觉机制；本条目是该分离是否\"足够清晰\"的量化检查——用对比度数值判断文字和控件能不能被看清，两者关注的问题不同，可以同时适用。低对比不是某个视觉风格的代称：玻璃拟态、极简主义、扁平化、极繁主义、孟菲斯风格等多种视觉风格都可能在实现不当时产生低对比，修复方式是让该风格下的文字与控件达到量化阈值，而不是放弃这个风格。",
  "signature": [
    "正文文字与其可能出现的每一种背景（含半透明、图片背景）之间的对比度达到规定最小值",
    "控件边界、勾选框、单选按钮等状态指示与相邻颜色之间达到非文字对比的最小值",
    "对比度是通过实际渲染效果测量得出的数值，而不是设计稿中孤立色块的对比"
  ],
  "when": [
    "设计或审查正文、说明文字、标签等需要被阅读的文字内容",
    "设计或审查表单控件、按钮边界、勾选状态等需要被识别的界面元素",
    "文字或控件叠加在半透明层、渐变或图片等复杂背景之上"
  ],
  "when_not": [
    "把\"看起来是某种流行视觉风格\"当作对比度已经达标的证明",
    "只在一张干净的示意图上量一次对比度，就认为所有实际渲染场景都合格",
    "把纯装饰性、非必需理解内容的图形元素也套用相同的强制阈值"
  ],
  "tradeoff": "提高对比度能确保文字与控件在更多光照条件和视觉能力下被看清，但过高对比或不加选择地加粗描边可能削弱视觉层级，让所有内容显得同等重要。",
  "comparison": {
    "focus": "文字与控件是否达到规定的最小对比度数值",
    "mechanism": "用对比度公式计算前景色与背景色（含半透明合成后的实际颜色）之间的比值，与规定阈值比较",
    "cost": "需要在每一种实际背景条件下重新测量，并在视觉风格与达标之间反复调整配色"
  },
  "sources": [
    {
      "id": "wcag-contrast-minimum",
      "title": "W3C WAI · Understanding SC 1.4.3 Contrast (Minimum)",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html",
      "claim": "WCAG 2.2 成功标准 1.4.3（AA 级）要求正文文字与背景的对比度至少为 4.5:1，大字号文字（18 点或加粗 14 点及以上）的对比度至少为 3:1。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html",
        "status": "pending",
        "checkedAt": "2026-09-16T05:52:47.510Z",
        "error": "status-request-failed",
        "jobId": "spn2-aaf35e85f6721a576e2120d151675a94b3ebc3e0"
      }
    },
    {
      "id": "wcag-non-text-contrast",
      "title": "W3C WAI · Understanding SC 1.4.11 Non-text Contrast",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html",
      "claim": "WCAG 2.2 成功标准 1.4.11（AA 级）要求用于识别界面控件及其状态的视觉信息、以及理解内容所需的图形对象部分，与相邻颜色的对比度至少为 3:1。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html",
        "status": "pending",
        "checkedAt": "2026-09-16T05:52:52.102Z",
        "error": "status-request-failed",
        "jobId": "spn2-cf85e71cf3338249ce7764cb535e017ff5de05ba"
      }
    },
    {
      "id": "wcag-text-spacing",
      "title": "W3C WAI · Understanding SC 1.4.12 Text Spacing",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html",
      "claim": "WCAG 2.2 成功标准 1.4.12（AA 级）要求当用户将行高调整为至少字号的 1.5 倍、段后间距调整为字号的 2 倍、字符间距调整为字号的 0.12 倍、单词间距调整为字号的 0.16 倍时，内容不得因此丢失或被遮挡。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html",
        "status": "pending",
        "checkedAt": "2026-09-16T05:53:26.469Z",
        "error": "status-request-failed",
        "jobId": "spn2-292cc6729740f2beb21addea2125d2b260fcd314"
      }
    }
  ],
  "relations": [
    {
      "target": "figure-ground",
      "kind": "related",
      "condition": "都涉及前景与背景的分离",
      "reason": "图形与背景描述的是分离前景与背景的知觉机制；本条目是该分离是否达到可测量阈值的量化检查，二者互补但衡量对象不同。",
      "basis": "editorial"
    },
    {
      "target": "glassmorphism",
      "kind": "conflicts_when",
      "condition": "半透明磨砂层压低了文字或控件与其实际背景之间的对比度",
      "reason": "玻璃拟态依赖半透明与背景透出制造质感，但若叠加后的实际对比度低于规定阈值，就构成本条目定义的缺陷，需要调整透明度、加深遮罩或改变配色来达标，而不必放弃该风格。",
      "basis": "editorial"
    },
    {
      "target": "minimalism",
      "kind": "conflicts_when",
      "condition": "为追求极简观感而使用浅灰文字或去掉控件边框，导致对比度不达标",
      "reason": "极简主义常通过降低视觉噪音来减少元素，但如果因此让正文或控件边界的对比度低于规定阈值，就是可测量的缺陷，应在保留极简观感的前提下调整颜色达标。",
      "basis": "editorial"
    },
    {
      "target": "focus-indicator",
      "kind": "composes_with",
      "condition": "设计键盘焦点环或其他状态指示的颜色",
      "reason": "焦点指示器要被看见，首先需要满足非文字对比的最小阈值，本条目提供该阈值，焦点指示器条目描述其可见性与可发现性的具体规则。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "设计或实现正文、说明文字等需要被阅读的内容",
      "instruction": "确保文字与其可能出现的每一种实际背景（含半透明合成、图片或渐变背景）之间的对比度不低于规定的最小值，大字号可适用更低的阈值。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "设计或实现表单控件边界、勾选框、单选按钮等状态指示",
      "instruction": "确保用于识别控件及其状态的视觉信息与相邻颜色之间的对比度不低于规定的非文字对比最小值。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "评审对比度是否达标",
      "instruction": "在真实渲染环境下（叠加实际背景、不同状态、深浅色主题）测量对比度，而不是只检查设计稿中孤立色块的采样。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "principle": {
    "evidenceType": "W3C 无障碍标准中的可测量成功标准",
    "limit": "本条目仅覆盖 WCAG 2.2 AA 级列出的对比度与文字间距数值；更高的 AAA 级阈值、色觉缺陷模拟等更细致的可读性议题不在本条目范围内，需要另行评估。"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "尚无可操作的示例；插画为编辑用途，用于说明对比度是可测量的量化检查这一概念，不代表已验证的实现。应用到实际产品前，仍需用真实的颜色值和渲染环境测量对比度，并覆盖深浅色主题、悬停与禁用状态等各种实际情形。",
  "image": {
    "src": "/images/contrast-legibility.webp",
    "alt": "一个虚构的 FIELDNOTES 文字块并排出现两次：左侧叠在繁忙的半透明面板上显得模糊难辨，右侧有一块实色衬底、边缘分离清晰、文字清楚易读，两者之间有一个小的比例尺样式图形，暖色调的奶油、赤陶、鼠尾草绿与石板灰。"
  },
  "searchTerms": [
    "contrast ratio",
    "legibility",
    "accessibility",
    "text",
    "quantified check"
  ]
}