Accessible Contrast Pairs
Generate color ramps specifically designed for accessible text/background combinations. Uses an 11-step scale for predictable WCAG-compliant pairing.
When to Use
- "Create accessible color combinations"
- "I need WCAG compliant colors"
- "Generate high contrast pairs"
- "Make sure my text is readable"
Installation
npx @basiclines/rampa
The 11-Step Strategy
Why 11 steps? It creates predictable pairing math:
| Pair |
Indices |
Contrast Level |
| Maximum |
0 + 10 |
Highest (near white + near black) |
| AAA Normal |
1 + 9, 2 + 8 |
7:1+ ratio |
| AA Normal |
3 + 7 |
4.5:1+ ratio |
| AA Large |
4 + 6 |
3:1+ ratio |
Recipe
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.
Complete Example
For brand color #3b82f6:
rampa -C "#3b82f6" -L 98:5 --size=11 -O css --name=blue
Output:
: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)
/* 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 */
}
For Large Text (3:1 minimum - WCAG AA)
.large-text {
background: var(--blue-3);
color: var(--blue-7); /* 3+7 = AA Large */
}
Maximum Contrast
.max-contrast {
background: var(--blue-0);
color: var(--blue-10); /* 0+10 = Maximum */
}
Quick Reference Table
| Background |
Text for AA |
Text for 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 |
Multiple Colors
Generate accessible ramps for multiple brand colors:
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.
Tips
- The
-L 98:5 range is crucial - it ensures full contrast range
- Middle values (4, 5, 6) work for disabled/muted states
- Always test actual rendered contrast - tools like Stark, axe can verify
- The index math (0+10, 1+9, 2+8) makes theming predictable
- For buttons: use index 5-6 as background, 0-1 as text
1---2name: accessible-contrast3description: Generate color ramps designed for WCAG-compliant contrast pairing. Creates 11-step scales with predictable foreground/background combinations.4license: SEE LICENSE IN LICENSE.md5---67# Accessible Contrast Pairs89Generate color ramps specifically designed for accessible text/background combinations. Uses an 11-step scale for predictable WCAG-compliant pairing.1011## When to Use1213- "Create accessible color combinations"14- "I need WCAG compliant colors"15- "Generate high contrast pairs"16- "Make sure my text is readable"1718## Installation1920```bash21npx @basiclines/rampa22```2324## The 11-Step Strategy2526Why 11 steps? It creates predictable pairing math:2728| Pair | Indices | Contrast Level |29|------|---------|----------------|30| Maximum | 0 + 10 | Highest (near white + near black) |31| AAA Normal | 1 + 9, 2 + 8 | 7:1+ ratio |32| AA Normal | 3 + 7 | 4.5:1+ ratio |33| AA Large | 4 + 6 | 3:1+ ratio |3435## Recipe3637```bash38rampa -C "<brand-color>" -L 98:5 --size=11 -O css --name=color39```4041- `-L 98:5` ensures full range from near-white to near-black42- `--size=11` creates indices 0-10 for easy pairing43- Pairs are symmetrical: 0+10, 1+9, 2+8, etc.4445## Complete Example4647For brand color `#3b82f6`:4849```bash50rampa -C "#3b82f6" -L 98:5 --size=11 -O css --name=blue51```5253Output:54```css55:root {56 --blue-0: #f8fafc; /* Near white */57 --blue-1: #f1f5f9;58 --blue-2: #e2e8f0;59 --blue-3: #cbd5e1;60 --blue-4: #94a3b8;61 --blue-5: #64748b; /* Middle gray */62 --blue-6: #475569;63 --blue-7: #334155;64 --blue-8: #1e293b;65 --blue-9: #0f172a;66 --blue-10: #020617; /* Near black */67}68```6970## Contrast Pairing Guide7172### For Normal Text (4.5:1 minimum - WCAG AA)7374```css75/* Light backgrounds with dark text */76.light-subtle {77 background: var(--blue-0);78 color: var(--blue-7); /* 0+7 = AA */79}8081.light-default {82 background: var(--blue-1);83 color: var(--blue-8); /* 1+8 = AA */84}8586.light-strong {87 background: var(--blue-2);88 color: var(--blue-9); /* 2+9 = AAA */89}9091/* Dark backgrounds with light text */92.dark-subtle {93 background: var(--blue-10);94 color: var(--blue-3); /* 10+3 = AA */95}9697.dark-default {98 background: var(--blue-9);99 color: var(--blue-2); /* 9+2 = AA */100}101102.dark-strong {103 background: var(--blue-8);104 color: var(--blue-1); /* 8+1 = AAA */105}106```107108### For Large Text (3:1 minimum - WCAG AA)109110```css111.large-text {112 background: var(--blue-3);113 color: var(--blue-7); /* 3+7 = AA Large */114}115```116117### Maximum Contrast118119```css120.max-contrast {121 background: var(--blue-0);122 color: var(--blue-10); /* 0+10 = Maximum */123}124```125126## Quick Reference Table127128| Background | Text for AA | Text for AAA |129|------------|-------------|--------------|130| 0 | 7, 8, 9, 10 | 8, 9, 10 |131| 1 | 7, 8, 9, 10 | 8, 9, 10 |132| 2 | 8, 9, 10 | 9, 10 |133| 3 | 8, 9, 10 | 9, 10 |134| 7 | 0, 1, 2, 3 | 0, 1, 2 |135| 8 | 0, 1, 2, 3 | 0, 1, 2 |136| 9 | 0, 1, 2 | 0, 1 |137| 10 | 0, 1, 2 | 0, 1 |138139## Multiple Colors140141Generate accessible ramps for multiple brand colors:142143```bash144rampa -C "#3b82f6" -L 98:5 --size=11 -O css --name=blue145rampa -C "#22c55e" -L 98:5 --size=11 -O css --name=green146rampa -C "#ef4444" -L 98:5 --size=11 -O css --name=red147```148149All ramps use the same index pairing logic.150151## Tips1521531. The `-L 98:5` range is crucial - it ensures full contrast range1542. Middle values (4, 5, 6) work for disabled/muted states1553. Always test actual rendered contrast - tools like Stark, axe can verify1564. The index math (0+10, 1+9, 2+8) makes theming predictable1575. For buttons: use index 5-6 as background, 0-1 as text
basiclines