Back to Details

accessible-contrast

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Accessible Contrast Pairs

可访问对比度配色组合

Generate color ramps specifically designed for accessible text/background combinations. Uses an 11-step scale for predictable WCAG-compliant pairing.
生成专为可访问文本/背景组合设计的配色渐变。采用11层级色阶，确保符合WCAG标准的可预测配色。

When to Use

使用场景

  • "Create accessible color combinations"
  • "I need WCAG compliant colors"
  • "Generate high contrast pairs"
  • "Make sure my text is readable"
  • "创建可访问的配色组合"
  • "我需要符合WCAG标准的颜色"
  • "生成高对比度配色对"
  • "确保我的文本可读"

Installation

安装

bash
npx @basiclines/rampa
bash
npx @basiclines/rampa

The 11-Step Strategy

11层级策略

Why 11 steps? It creates predictable pairing math:
PairIndicesContrast Level
Maximum0 + 10Highest (near white + near black)
AAA Normal1 + 9, 2 + 87:1+ ratio
AA Normal3 + 74.5:1+ ratio
AA Large4 + 63:1+ ratio
为什么是11层？因为它能实现可预测的配色配对逻辑：
配对类型索引组合对比度等级
最高对比度0 + 10最高（近白色+近黑色）
AAA级常规文本1 + 9, 2 + 87:1及以上对比度
AA级常规文本3 + 74.5:1及以上对比度
AA级大文本4 + 63:1及以上对比度

Recipe

使用示例

bash
rampa -C "<brand-color>" -L 98:5 --size=11 -O css --name=color
  • -L 98:5
    ensures full range from near-white to near-black
  • --size=11
    creates indices 0-10 for easy pairing
  • Pairs are symmetrical: 0+10, 1+9, 2+8, etc.
bash
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等

Complete Example

完整示例

For brand color 
#3b82f6
:
bash
rampa -C "#3b82f6" -L 98:5 --size=11 -O css --name=blue
Output:
css
: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 */
}
对于品牌色 
#3b82f6
：
bash
rampa -C "#3b82f6" -L 98:5 --size=11 -O css --name=blue
输出：
css
: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 */
}

Contrast Pairing Guide

对比度配对指南

For Normal Text (4.5:1 minimum - WCAG AA)

常规文本（最低4.5:1 - WCAG AA级）

css
/* 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 */
}
css
/* 浅色背景配深色文本 */
.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-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 */
}

For Large Text (3:1 minimum - WCAG AA)

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

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

Maximum Contrast

最高对比度

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

Quick Reference Table

快速参考表

BackgroundText for AAText for AAA
07, 8, 9, 108, 9, 10
17, 8, 9, 108, 9, 10
28, 9, 109, 10
38, 9, 109, 10
70, 1, 2, 30, 1, 2
80, 1, 2, 30, 1, 2
90, 1, 20, 1
100, 1, 20, 1
背景色索引AA级文本索引AAA级文本索引
07, 8, 9, 108, 9, 10
17, 8, 9, 108, 9, 10
28, 9, 109, 10
38, 9, 109, 10
70, 1, 2, 30, 1, 2
80, 1, 2, 30, 1, 2
90, 1, 20, 1
100, 1, 20, 1

Multiple Colors

多色生成

Generate accessible ramps for multiple brand colors:
bash
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
All ramps use the same index pairing logic.
为多个品牌色生成可访问的配色渐变：
bash
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
所有配色渐变都使用相同的索引配对逻辑。

Tips

小贴士

  1. The 
    -L 98:5
    range is crucial - it ensures full contrast range
  2. Middle values (4, 5, 6) work for disabled/muted states
  3. Always test actual rendered contrast - tools like Stark, axe can verify
  4. The index math (0+10, 1+9, 2+8) makes theming predictable
  5. For buttons: use index 5-6 as background, 0-1 as text
  1. -L 98:5
    的色域范围至关重要——它确保了完整的对比度区间
  2. 中间值（4、5、6）适用于禁用/弱化状态
  3. 始终测试实际渲染的对比度——可以使用Stark、axe等工具进行验证
  4. 索引配对逻辑（0+10、1+9、2+8）让主题配色更具可预测性
  5. 按钮样式：使用索引5-6作为背景色，0-1作为文本色