无障碍功能

凡是浏览器本身已经处理得当的地方，选择器都直接使用原生输入控件，再在外面补上标签、焦点处理和选中状态。下面几节会分清哪些由组件包负责，哪些需要你自己添加标签。

每一条颜色轴都是一个真实的 <input type="range">，只是在视觉上隐藏了。因此键盘操作和屏幕阅读器支持都来自浏览器本身，而不是重新实现一遍。

你能得到什么

• 方向键逐步调整。和任何原生滑块一样，Page Up 和 Page Down 调整幅度更大，Home 和 End 直接跳到两端。
• 模式切换器是一个使用 roving tab stop 的 tablist，详见 ModeToolbar。
• 数值以文字形式朗读，例如「色相 210 度」，而不是只报一个数字。
• 弹出层会锁定焦点，按 Escape 关闭，并把焦点交还给触发器。
• 色块都是带可访问名称的按钮。
• ColorInput 接受 id，让你自己的 <label htmlFor> 可以指向它的触发器；没有可见标签时，还可以传 aria-label。详见表单。
• prefers-reduced-motion 和强制颜色模式都已处理。

用于自定义 UI 的辅助函数

import { readableTextColor, contrastRatio } from "chroma-panel";
 
readableTextColor("#001f3f"); // '#ffffff'
contrastRatio("#fff", "#001f3f"); // WCAG 2.1 ratio

readableTextColor 使用 APCA，而不是简单的亮度计算。遇到中等蓝色时它会选白色，旧方法则会错误地选黑色。

更多内容见对比度。

数据属性

面板通过 data-cp-* 属性暴露自身状态，方便你用 CSS 选中它。可以配合主题中的 CSS 变量一起使用。