{ "@context": "https://schema.org", "@type": "Article", "@id": "https://appstoryo.com/zh-hans/blog/check-text-contrast-picked-color-ui", "url": "https://appstoryo.com/zh-hans/blog/check-text-contrast-picked-color-ui", "identifier": "https://appstoryo.com/zh-hans/blog/check-text-contrast-picked-color-ui", "name": "如何在将选取的颜色用于界面之前检查文字对比度", "headline": "如何在将选取的颜色用于界面之前检查文字对比度", "description": "学习如何检查 WCAG 对比度并在 HSL 中调整颜色，让您的界面始终无障碍且易于阅读。", "inLanguage": "zh-Hans", "datePublished": "2026-08-29", "dateModified": "2026-08-29", "author": { "@type": "Person", "name": "Lubor Šimůnek" }, "publisher": { "@type": "Organization", "name": "lapnito.cz s.r.o.", "url": "https://appstoryo.com" }, "isPartOf": { "@type": "WebSite", "name": "AppStoryo", "url": "https://appstoryo.com" }, "license": "https://creativecommons.org/licenses/by/4.0/", "keywords": [ "设计", "article", "AppStoryo" ], "articleSection": "设计", "image": "https://appstoryo.com/upload/blog/check-text-contrast-picked-color-ui-hero.jpg", "encoding": [ { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/zh-hans/blog/check-text-contrast-picked-color-ui.pdf", "encodingFormat": "application/pdf" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/zh-hans/blog/check-text-contrast-picked-color-ui.md", "encodingFormat": "text/markdown" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/zh-hans/blog/check-text-contrast-picked-color-ui.txt", "encodingFormat": "text/plain" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/zh-hans/blog/check-text-contrast-picked-color-ui.json", "encodingFormat": "application/json" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/zh-hans/blog/check-text-contrast-picked-color-ui.epub", "encodingFormat": "application/epub+zip" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/zh-hans/blog/check-text-contrast-picked-color-ui.jats.xml", "encodingFormat": "application/xml" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/zh-hans/blog/check-text-contrast-picked-color-ui.bib", "encodingFormat": "application/x-bibtex" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/zh-hans/blog/check-text-contrast-picked-color-ui.ris", "encodingFormat": "application/x-research-info-systems" }, { "@type": "MediaObject", "contentUrl": "https://appstoryo.com/zh-hans/blog/check-text-contrast-picked-color-ui.csl.json", "encodingFormat": "application/vnd.citationstyles.csl+json" } ], "cite": "Lubor Šimůnek (2026). 如何在将选取的颜色用于界面之前检查文字对比度. AppStoryo, lapnito.cz s.r.o. https://appstoryo.com/zh-hans/blog/check-text-contrast-picked-color-ui", "sections": [ { "level": 2, "heading": "为什么对比度至关重要", "text": "全球约有 3 亿人患有某种形式的色觉障碍。具有良好对比度的设计不仅仅是美观问题——在许多地区，这已成为法律要求。参考标准是 WCAG 2.1，定义了两个主要级别：\n\n- AA 级：正常文字对比度为 4.5:1，大号文字（18px 以上或 14px 粗体）为 3:1。\n- AAA 级：正常文字为 7:1。" }, { "level": 2, "heading": "常见错误", "text": "最常见的问题包括：白色背景上的浅灰色文字（对比度可低至 1.5:1）、视觉上看起来还好但无法通过 AA 标准的彩色按钮白色文字，以及在浅色模式下通过但在深色模式下失败的颜色。" }, { "level": 2, "heading": "实用工作流程", "text": "1. 获取背景颜色。打开 Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)，将相机对准表面轻触即可立即获得 HEX 值。该应用同时显示 HSL 值。\n2. 以同样方式获取文字颜色。\n3. 在对比度检查器中验证这对颜色——例如 WebAIM Contrast Checker、浏览器 DevTools 无障碍面板或 Figma 的 Contrast 插件。\n4. 在 HSL 中调整亮度直到通过标准。保持 H（色相）和 S（饱和度）不变，降低 L 值使颜色变暗而不改变视觉身份。" }, { "level": 2, "heading": "为什么 HSL 最适合对比度调整", "text": "RGB 和 HEX 无法直观控制亮度。HSL 将色相、饱和度和亮度分开。Color Picker Camera: HEX RGB (https://play.google.com/store/apps/details?id=com.tomas.color_picker) 同时显示 HEX、RGB、HSL 和 CMYK，无需手动转换。" }, { "level": 2, "heading": "实际示例", "text": "中等蓝色（#4A90E2）白色文字按钮的对比度约为 3.1:1——未达到 AA 标准。改为深海军蓝（#1A3A6B）后对比度达到 9.4:1，甚至超过了 AAA。" }, { "level": 2, "heading": "关于 WCAG 3.0 和 APCA", "text": "下一代指南引入了 APCA——一种更精细的感知对比度模型。WCAG 2.1 AA 仍是当前适用标准，但对于长期项目而言，针对 APCA 进行测试也值得考虑。\n\n立即在 iOS (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) 或 Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker) 上免费下载 Color Picker Camera: HEX RGB——无广告、无跟踪，完全离线运行。" } ], "text": "为什么对比度至关重要\n\n全球约有 3 亿人患有某种形式的色觉障碍。具有良好对比度的设计不仅仅是美观问题——在许多地区，这已成为法律要求。参考标准是 WCAG 2.1，定义了两个主要级别：\n\n- AA 级：正常文字对比度为 4.5:1，大号文字（18px 以上或 14px 粗体）为 3:1。\n- AAA 级：正常文字为 7:1。\n\n常见错误\n\n最常见的问题包括：白色背景上的浅灰色文字（对比度可低至 1.5:1）、视觉上看起来还好但无法通过 AA 标准的彩色按钮白色文字，以及在浅色模式下通过但在深色模式下失败的颜色。\n\n实用工作流程\n\n1. 获取背景颜色。打开 Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)，将相机对准表面轻触即可立即获得 HEX 值。该应用同时显示 HSL 值。\n2. 以同样方式获取文字颜色。\n3. 在对比度检查器中验证这对颜色——例如 WebAIM Contrast Checker、浏览器 DevTools 无障碍面板或 Figma 的 Contrast 插件。\n4. 在 HSL 中调整亮度直到通过标准。保持 H（色相）和 S（饱和度）不变，降低 L 值使颜色变暗而不改变视觉身份。\n\n为什么 HSL 最适合对比度调整\n\nRGB 和 HEX 无法直观控制亮度。HSL 将色相、饱和度和亮度分开。Color Picker Camera: HEX RGB (https://play.google.com/store/apps/details?id=com.tomas.color_picker) 同时显示 HEX、RGB、HSL 和 CMYK，无需手动转换。\n\n实际示例\n\n中等蓝色（#4A90E2）白色文字按钮的对比度约为 3.1:1——未达到 AA 标准。改为深海军蓝（#1A3A6B）后对比度达到 9.4:1，甚至超过了 AAA。\n\n关于 WCAG 3.0 和 APCA\n\n下一代指南引入了 APCA——一种更精细的感知对比度模型。WCAG 2.1 AA 仍是当前适用标准，但对于长期项目而言，针对 APCA 进行测试也值得考虑。\n\n立即在 iOS (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) 或 Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker) 上免费下载 Color Picker Camera: HEX RGB——无广告、无跟踪，完全离线运行。", "markdown": "## 为什么对比度至关重要\n\n全球约有 3 亿人患有某种形式的色觉障碍。具有良好对比度的设计不仅仅是美观问题——在许多地区，这已成为法律要求。参考标准是 **WCAG 2.1**，定义了两个主要级别：\n\n- **AA 级**：正常文字对比度为 4.5:1，大号文字（18px 以上或 14px 粗体）为 3:1。\n- **AAA 级**：正常文字为 7:1。\n\n## 常见错误\n\n最常见的问题包括：白色背景上的浅灰色文字（对比度可低至 1.5:1）、视觉上看起来还好但无法通过 AA 标准的彩色按钮白色文字，以及在浅色模式下通过但在深色模式下失败的颜色。\n\n## 实用工作流程\n\n1. **获取背景颜色。**打开 [Color Picker Camera: HEX RGB](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237)，将相机对准表面轻触即可立即获得 HEX 值。该应用同时显示 HSL 值。\n2. 以同样方式**获取文字颜色**。\n3. **在对比度检查器中验证这对颜色**——例如 WebAIM Contrast Checker、浏览器 DevTools 无障碍面板或 Figma 的 Contrast 插件。\n4. **在 HSL 中调整亮度直到通过标准。**保持 H（色相）和 S（饱和度）不变，降低 L 值使颜色变暗而不改变视觉身份。\n\n## 为什么 HSL 最适合对比度调整\n\nRGB 和 HEX 无法直观控制亮度。HSL 将色相、饱和度和亮度分开。[Color Picker Camera: HEX RGB](https://play.google.com/store/apps/details?id=com.tomas.color_picker) 同时显示 HEX、RGB、HSL 和 CMYK，无需手动转换。\n\n## 实际示例\n\n中等蓝色（#4A90E2）白色文字按钮的对比度约为 3.1:1——未达到 AA 标准。改为深海军蓝（#1A3A6B）后对比度达到 9.4:1，甚至超过了 AAA。\n\n## 关于 WCAG 3.0 和 APCA\n\n下一代指南引入了 APCA——一种更精细的感知对比度模型。WCAG 2.1 AA 仍是当前适用标准，但对于长期项目而言，针对 APCA 进行测试也值得考虑。\n\n**立即在 [iOS](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) 或 [Android](https://play.google.com/store/apps/details?id=com.tomas.color_picker) 上免费下载 Color Picker Camera: HEX RGB**——无广告、无跟踪，完全离线运行。", "html": "

为什么对比度至关重要

全球约有 3 亿人患有某种形式的色觉障碍。具有良好对比度的设计不仅仅是美观问题——在许多地区，这已成为法律要求。参考标准是 WCAG 2.1，定义了两个主要级别：

常见错误

最常见的问题包括：白色背景上的浅灰色文字（对比度可低至 1.5:1）、视觉上看起来还好但无法通过 AA 标准的彩色按钮白色文字，以及在浅色模式下通过但在深色模式下失败的颜色。

实用工作流程

  1. 获取背景颜色。打开 Color Picker Camera: HEX RGB，将相机对准表面轻触即可立即获得 HEX 值。该应用同时显示 HSL 值。
  2. 以同样方式获取文字颜色。
  3. 在对比度检查器中验证这对颜色——例如 WebAIM Contrast Checker、浏览器 DevTools 无障碍面板或 Figma 的 Contrast 插件。
  4. 在 HSL 中调整亮度直到通过标准。保持 H（色相）和 S（饱和度）不变，降低 L 值使颜色变暗而不改变视觉身份。

为什么 HSL 最适合对比度调整

RGB 和 HEX 无法直观控制亮度。HSL 将色相、饱和度和亮度分开。Color Picker Camera: HEX RGB 同时显示 HEX、RGB、HSL 和 CMYK，无需手动转换。

实际示例

中等蓝色（#4A90E2）白色文字按钮的对比度约为 3.1:1——未达到 AA 标准。改为深海军蓝（#1A3A6B）后对比度达到 9.4:1，甚至超过了 AAA。

关于 WCAG 3.0 和 APCA

下一代指南引入了 APCA——一种更精细的感知对比度模型。WCAG 2.1 AA 仍是当前适用标准，但对于长期项目而言，针对 APCA 进行测试也值得考虑。

立即在 iOS 或 Android 上免费下载 Color Picker Camera: HEX RGB——无广告、无跟踪，完全离线运行。

" }