accessible-contrast

Name: accessible-contrast
Author: basiclines

github.com/basiclines设计与 UI1652 次安装32 周前更新

代码仓库

关于 accessible-contrast

accessible-contrast 是面向设计师和开发者的配色技能，用于生成易读的界面颜色。它以 11 级色阶和对称索引配对，辅助选择符合 WCAG 对比度要求的组合。

主要功能

01生成 11 级色阶
02按对称索引配对
03提供 WCAG AA 与 AAA 指引
04输出带名称的 CSS 变量

适用场景

01生成易读的文字与背景配色
02为品牌色创建一致色阶
03为按钮和大号文字选择对比组合

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/basiclines/rampa-studio --skill accessible-contrast

安装后在 Claude Code 中输入/accessible-contrast确认已加载。

详细介绍

无障碍对比度配色组合

生成专为无障碍文本／背景搭配设计的色阶。使用 11 级比例，实现可预测且符合 WCAG 标准的搭配。

适用场景

“创建无障碍配色组合”
“我需要符合 WCAG 标准的颜色”
“生成高对比度配色组合”
“确保我的文本清晰易读”

安装

npx @basiclines/rampa

11 级策略

为什么是 11 级？这样可以实现可预测的配对计算：

配对	索引	对比度级别
最大	0 + 10	最高（近白色 + 近黑色）
AAA 普通文本	1 + 9、2 + 8	对比度 7:1+
AA 普通文本	3 + 7	对比度 4.5:1+
AA 大号文本	4 + 6	对比度 3:1+

配方

rampa -C "<brand-color>" -L 98:5 --size=11 -O css --name=color

-L 98:5 确保范围从近白色延伸到近黑色
--size=11 创建索引 0-10，便于配对
配对是对称的：0+10、1+9、2+8 等

完整示例

品牌颜色为 #3b82f6：

rampa -C "#3b82f6" -L 98:5 --size=11 -O css --name=blue

输出：

:root {
  --blue-0: #f8fafc;   /* Near white */
  --blue-1: #f1f5f9;
  --blue-2: #e2e8f0;
  --blue-3: #cbd5e1;
  --blue-4: #94a3b8;
  --blue-5: #64748b;   /* Middle gray */
  --blue-6: #475569;
  --blue-7: #334155;
  --blue-8: #1e293b;
  --blue-9: #0f172a;
  --blue-10: #020617;  /* Near black */
}

对比度配对指南

普通文本（最低 4.5:1 - WCAG AA）

/* Light backgrounds with dark text */
.light-subtle {
  background: var(--blue-0);
  color: var(--blue-7);  /* 0+7 = AA */
}

.light-default {
  background: var(--blue-1);
  color: var(--blue-8);  /* 1+8 = AA */
}

.light-strong {
  background: var(--blue-2);
  color: var(--blue-9);  /* 2+9 = AAA */
}

/* Dark backgrounds with light text */
.dark-subtle {
  background: var(--blue-10);
  color: var(--blue-3);  /* 10+3 = AA */
}

.dark-default {
  background: var(--blue-9);
  color: var(--blue-2);  /* 9+2 = AA */
}

.dark-strong {
  background: var(--blue-8);
  color: var(--blue-1);  /* 8+1 = AAA */
}

大号文本（最低 3:1 - WCAG AA）

.large-text {
  background: var(--blue-3);
  color: var(--blue-7);  /* 3+7 = AA Large */
}

最大对比度

.max-contrast {
  background: var(--blue-0);
  color: var(--blue-10);  /* 0+10 = Maximum */
}

快速参考表

背景	AA 文本	AAA 文本
0	7、8、9、10	8、9、10
1	7、8、9、10	8、9、10
2	8、9、10	9、10
3	8、9、10	9、10
7	0、1、2、3	0、1、2
8	0、1、2、3	0、1、2
9	0、1、2	0、1
10	0、1、2	0、1

多种颜色

为多种品牌颜色生成无障碍色阶：

rampa -C "#3b82f6" -L 98:5 --size=11 -O css --name=blue
rampa -C "#22c55e" -L 98:5 --size=11 -O css --name=green
rampa -C "#ef4444" -L 98:5 --size=11 -O css --name=red

所有色阶都使用相同的索引配对逻辑。

提示

-L 98:5 范围至关重要，可确保完整的对比度范围
中间值（4、5、6）适用于禁用／弱化状态
始终测试实际渲染后的对比度；Stark、axe 等工具可以进行验证
索引计算（0+10、1+9、2+8）让主题配置更可预测
对于按钮：使用索引 5-6 作为背景，0-1 作为文本

支持 Markdown

登录后评论