为什么WCAG要求4.5:1的对比度？
这个比例是AA无障碍标准，确保中度低视力用户无需辅助设备也能阅读文本。更严格的AAA标准要求7:1。
颜色选择器
HEX、RGB、HSL颜色代码互转
对比度
⬜ ⬛
互补色 & 相似色
颜色选择器
应该使用HEX还是RGB？
HEX更简洁，在CSS中更常用。需要透明度时使用rgba()，例如rgba(0,0,0,0.5)表示50%透明的黑色。
如何实现深色模式颜色？
使用CSS自定义属性配合 @media (prefers-color-scheme: dark) 实现。默认定义亮色模式变量，在深色媒体查询中覆盖它们。
色彩代码：HEX、RGB和HSL
HEX、RGB和HSL是计算机表示颜色的三种方式。HEX（如#FF5733）在Web中最常用，RGB（如rgb(255,87,51)）通过红绿蓝混合，HSL（如hsl(11,100%,60%)）通过色相、饱和度和亮度表示。三种格式描述的是同一种颜色，只是表达方式不同。
WCAG对比度是什么？
WCAG（Web内容无障碍指南）AA标准要求普通文本与背景的对比度至少达到4.5:1。这是确保中度低视力用户无需辅助设备也能阅读文本的最低标准，AAA标准更严格要求7:1。设计时验证对比度是构建无障碍UI的第一步。
HSL：人类直觉的颜色模型
HSL用色相（Hue: 0-360°）、饱和度（Saturation: 0-100%）和亮度（Lightness: 0-100%）来描述颜色，比RGB更直观。想要品牌色的浅色变体，只需提高L值，无需复杂的RGB计算。HSL在设计系统中应用广泛，便于色彩调整和生成调色板。
互补色和相似色的应用
互补色在色轮上相差180°（如蓝色与橙色、红色与绿色），产生强烈对比和视觉张力。相似色是色轮上的邻近色（如蓝色、蓝紫色、紫色），营造和谐统一的配色方案。优秀的UI色彩系统通常包含主色、强调色（互补色）、中性色以及成功/警告/错误的语义色。
CSS自定义属性管理颜色
使用CSS自定义属性（变量）可以集中管理颜色：--color-primary: #2563EB; 声明后，全站通过 background-color: var(--color-primary); 统一引用。修改品牌色只需更改一处。结合 @media (prefers-color-scheme: dark) 轻松实现深色模式主题切换。
常见问题
应该使用HEX还是RGB？
HEX更简洁，在CSS中更常用。需要透明度时使用rgba()，例如rgba(0,0,0,0.5)表示50%透明的黑色。
为什么WCAG要求4.5:1的对比度？
这个比例是AA无障碍标准，确保中度低视力用户无需辅助设备也能阅读文本。更严格的AAA标准要求7:1。
如何实现深色模式颜色？
使用CSS自定义属性配合 @media (prefers-color-scheme: dark) 实现。默认定义亮色模式变量，在深色媒体查询中覆盖它们。