使用 a11y-color-tokens 生成可访问的 UI 颜色

2025-06-08

使用 a11y-color-tokens 生成可访问的 UI 颜色

我很高兴与大家分享a11y-color-tokens包的发布：

从基本颜色标记生成可访问的互补文本或 UI 颜色作为 Sass 变量和/或 CSS 自定义属性。

我为什么需要这个？

虽然有很多工具可以用来检查对比度，但高效地挑选一个容易上手的调色板可能既费时又费力。作为一个有太多业余项目的人，我得说，色彩对比度总是会拖慢我的工作流程。事实上，我开发这个工具正是为了加快我自己的流程！

此外，每个人都可以从有关颜色标记对比的文档中受益，以确保标记能够被方便地使用。

a11y-color-tokens让您只需专注于选择基色，同时生成对比度安全的互补色调，以确保您满足这一重要的成功标准。该项目的独特之处在于，它会缩放原始颜色值，以获得更令人愉悦的视觉对比度，而不是仅返回白色或黑色。（别担心 - 如果需要，您可以覆盖对比色！）

💡 “Tokens” 源自设计系统世界术语“设计令牌”，您可以从原创者 Jina Anne 那里了解更多信息。

包装内容

示例输出：

// `primary` name and value provided in your tokens
$color-primary: rebeccapurple !default;
// `on-primary` name and value generated by a11y-color-tokens
// and guaranteed to have at least 4.5 contrast with `primary`
$color-on-primary: #ceb3e9 !default;
Enter fullscreen mode Exit fullscreen mode

默认选项会生成单独的 Sass 变量，以及这些变量的映射和包含调色板作为 CSS 自定义属性的混合，可供您放入:root或选择其他位置。

Sass 变量和映射包含!default标志，作为扩展、缩放和共享令牌的另一种方式。

查看示例默认输出 >

或者，将"css"其作为tokenOutputFormat仅在选择器内输出 CSS 自定义属性:root。

此外，还会生成一个可选的 Markdown 文档，其中包含所有可用颜色标记之间的对比交叉兼容性。

查看使用生成的 Sass 资产的示例>

用法

使用以下方法安装a11y-color-tokens到任何项目中：

npm install a11y-color-tokens --save-dev
Enter fullscreen mode Exit fullscreen mode

然后，您可以将其添加到脚本中或直接从命令行调用它，但首先，您必须准备一个颜色标记文件。

创建颜色标记文件

在脚本运行之前，您需要将颜色标记准备为导出标记数组的模块。

预期格式如下：

// Example color-tokens.js
module.exports = [
  {
    /*
     * `name` - Required
     * Any string, will be used for color reference
     */
    name: "primary",
    /*
     * `color` - Required
     * Any valid CSS color value
     */
    color: "rgb(56, 84, 230)",
    /*
     * `onColor` - Optional
     * enum: undefined | "[css color value]" | false
     *
     * If undefined, will be generated as relative tone of `color`
     * that meets contrast according to `ratioKey`
     *
     * If a color value provided, will still be checked for contrast
     * and a warning comment added if it doesn't pass
     *
     * Set to `false` to omit generation
     */
    /*
     * `ratioKey` - Optional
     * enum: undefined | "small" (default) | "large"
     *
     * Corresponds to mimimum contrast for either normal text ("small" = 4.5)
     * or large text/user interface components ("large" = 3)
     */
  },
];
Enter fullscreen mode Exit fullscreen mode

查看包仓库中的color-tokens.js以获取更完整的示例。

推荐设置

添加为独立脚本，然后在构建和启动命令之前调用以确保令牌始终是最新的。

至少，确保将现有的outputDirPath（默认值：）"sass"和点colorTokensPath（默认值"color-tokens.js"：）传递给您的令牌文件。

"scripts": {
  "color-tokens": "a11y-color-tokens --outputDirPath='src/sass' --colorTokensPath='_theme/color-tokens.js'",
  "start": "npm-run-all color-tokens [your other scripts]",
  "build": "npm-run-all color-tokens [your other scripts]"
},
Enter fullscreen mode Exit fullscreen mode

不包含 SASS 处理，您必须单独添加。此软件包与我的11ty-sass-skeleton 模板（一个基本的 Eleventy 静态站点）完美匹配。

更多详情

有关更多配置选项和实施示例，请查看：

版权页

大家好！我是Stephanie Eckles - @5t3ph，从事前端开发十余年。欢迎查看我的更多项目，包括ModernCSS.dev上帮助你提升 CSS 技能的深度教程，以及我关于各种前端主题的Egghead 视频课程。

如果您发现这个项目有用，我将非常感激☕️一杯咖啡让我继续编码！

鏂囩珷鏉ユ簮锛�https://dev.to/5t3ph/generate-accessible-ui-colors-with-a11y-color-tokens-28m1
Devto 翻译
PREV
高级 CSS 选择器指南 - 第二部分
NEXT
等高元素：Flexbox 与 Grid