Menü
Generate color ramps designed for WCAG-compliant contrast pairing. Creates 11-step scales with predictable foreground/background combinations.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | accessible-contrast |
| description | Generate color ramps designed for WCAG-compliant contrast pairing. Creates 11-step scales with predictable foreground/background combinations. |
| license | SEE LICENSE IN LICENSE.md |
| metadata | {"author":"ismael.fyi","version":"1.0.0"} |
Generate color ramps specifically designed for accessible text/background combinations. Uses an 11-step scale for predictable WCAG-compliant pairing.
npx @basiclines/rampa
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 |
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 pairingFor 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 */
}
/* 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 */
}
.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 */
}
| 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 |
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.
-L 98:5 range is crucial - it ensures full contrast rangeAudit and update all rampa project documentation after code changes. Use when adding features, changing defaults, modifying APIs, or before a release.
Generate mathematically accurate color palettes using OKLCH color space. Use when creating design systems, color ramps, accessible palettes, CSS variables for themes, or when user asks about color generation.
Create cohesive color themes for code editors, terminals, and IDEs. Generates semantic token systems from a brand color with reusable palette variables for rapid iteration.
Expand a single brand color into a complete multi-hue color system using harmonies. Creates primary, analogous, complementary, and split-complementary ramps.
Generate distinct, accessible colors for charts, graphs, and data visualizations. Uses color harmonies for maximum perceptual distinction.
Generate success, warning, danger, and info status colors that harmonize with your brand using square harmony. All colors mathematically derived from one input.