💡 在线取色器
HSL 色环 · 屏幕取色 · WCAG 对比度检测
#3F51B5
WCAG 对比度检测
检测文字色与背景色的对比度，判断是否符合无障碍标准。
示例文字 The quick brown fox jumps over the lazy dog. 1234567890
HSL 色环 · 屏幕取色 · WCAG 对比度检测
检测文字色与背景色的对比度，判断是否符合无障碍标准。
点击"屏幕取色"按钮（需Chrome 95+或Edge浏览器），浏览器会进入取色模式，鼠标移到屏幕任意位置点击即可采集该像素颜色。Firefox/Safari暂不支持，可用下方色相环+SV方块选色。
WCAG（Web内容无障碍指南）要求文字与背景色对比度达标：AA级正文≥4.5:1，大字≥3:1；AAA级正文≥7:1。本工具检测所选颜色作为文字/背景时的对比度等级，帮助设计无障碍页面。
先拖动色相环选择色调（H），再在方块中横向拖动选饱和度（S）、纵向拖动选明度（V）。方块右上角为最纯色，左下角为黑色，左上角为白色。
1. 拖动色相环选择色调，在方块中点击/拖动选择饱和度与明度。
2. 或点击"屏幕取色"采集屏幕任意像素（Chrome/Edge）。
3. 下方实时显示HEX/RGB/HSL值，点击复制。
4. 在对比度检测区设置文字色与背景色，查看WCAG等级。