Menu
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/gnurio/refactoring-ui-plugin --skill manage-color-contrastLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Determine what UI element draws attention first, second, third using size, weight, color, and de-emphasis strategies
Create clear typographic hierarchy using hand-crafted font sizes, weights, and colors
Create comprehensive palette with 8-10 greys, 5-10 primary, 5-10 accent shades
Basé sur la classification professionnelle SOC
Affichage de SKILL.md
| name | manage-color-contrast |
| description | Ensure WCAG AA accessibility and readability |
| domain | ui-design |
| skill-type | evaluative |
| version | 1.0.0 |
| author | refactoring-ui-expert |
| prerequisites | [] |
| dependencies | ["03-build-color-palette"] |
Ensure text and interactive elements have sufficient contrast against their backgrounds for readability and accessibility.
Evaluative + Corrective
Calculates contrast ratios and ensures compliance with WCAG AA standards (4.5:1 for normal text, 3:1 for large text and UI components).
| Text Color on White | Ratio | Pass AA? |
|---|---|---|
| #000000 (black) | 21:1 | ✓ |
| #333333 | 12.6:1 | ✓ |
| #666666 | 5.9:1 | ✓ |
| #757575 | 4.6:1 | ✓ (minimum) |
| #999999 | 2.8:1 | ✗ |
| #CCCCCC | 1.6:1 | ✗ |
| Failure | Description | Fix |
|---|---|---|
| Light Gray Text | #999 or lighter for body text | Use #666 minimum, #333 preferred |
| Ghost Text | Placeholder same as value | Make placeholder lighter (#999) |
| Low-contrast Primary | Brand color too light for white text | Darken brand color or use dark text |
| Subtle Links | Links barely different from text | Add underline or increase contrast |
| Disabled Confusion | Disabled buttons too prominent | Reduce to 30% opacity or use gray |
| Icon Fade | Icons too light to see | Match text color or use higher contrast |
build-color-palette (gray scale needed)Input: Body text #888888 on white background
Evaluation: FAIL
Recommendation: Change to #666666 (5.9:1) minimum Prefer #333333 or #1A1A1A for body text