---
title: "如何在将选取的颜色用于界面之前检查文字对比度"
author: "Lubor Šimůnek"
date: 2026-08-29
modified: 2026-08-29
language: "zh-Hans"
url: "https://appstoryo.com/zh-hans/blog/check-text-contrast-picked-color-ui"
publisher: "AppStoryo (lapnito.cz s.r.o.)"
license: "CC BY 4.0"
license_url: "https://creativecommons.org/licenses/by/4.0/"
category: "设计"
keywords: ["设计", "article", "AppStoryo"]
---

# 如何在将选取的颜色用于界面之前检查文字对比度

> 在将任何颜色应用于界面之前，请先检查对比度。以下是从 HEX 值到无障碍设计的完整工作流程。

## 为什么对比度至关重要

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

- **AA 级**：正常文字对比度为 4.5:1，大号文字（18px 以上或 14px 粗体）为 3:1。
- **AAA 级**：正常文字为 7:1。

## 常见错误

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

## 实用工作流程

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

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

RGB 和 HEX 无法直观控制亮度。HSL 将色相、饱和度和亮度分开。[Color Picker Camera: HEX RGB](https://play.google.com/store/apps/details?id=com.tomas.color_picker) 同时显示 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](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**——无广告、无跟踪，完全离线运行。

---

Source: <https://appstoryo.com/zh-hans/blog/check-text-contrast-picked-color-ui>  
License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)  
Cite as: Lubor Šimůnek (2026). 如何在将选取的颜色用于界面之前检查文字对比度. AppStoryo, lapnito.cz s.r.o. https://appstoryo.com/zh-hans/blog/check-text-contrast-picked-color-ui