Automate 21risk tasks via Rube MCP (Composio). Always search tools first for current schemas.
中文简介正在准备中。当前显示原文说明。
karanmrn/karanagentskills32026年8月28日 更新
免费在 GitHub 公开
manage-color-contrast
Ensure WCAG AA accessibility and readability
中文简介正在准备中。当前显示原文说明。
karanmrn/karanagentskills星标 3(GitHub 3 + cccskills 0)
实测评分 未实测
查看安装方法包含的文件（1）
- SKILL.md2.6 KB
SKILL.md（原文）
安装前可以查看交给 AI 代理的指令内容。
Skill: Manage Color Contrast
Purpose
Ensure text and interactive elements have sufficient contrast against their backgrounds for readability and accessibility.
Type
Evaluative + Corrective
Input
- Text colors and sizes
- Background colors
- UI element specifications
Output
- Contrast ratio calculations
- Pass/Fail against WCAG standards
- Recommendations for fixes
Transformation Performed
Calculates contrast ratios and ensures compliance with WCAG AA standards (4.5:1 for normal text, 3:1 for large text and UI components).
Decision Criteria
PASS (Good Contrast)
- Normal text (< 18px): 4.5:1 minimum (WCAG AA)
- Large text (≥ 18px bold or ≥ 24px): 3:1 minimum
- UI components (buttons, inputs): 3:1 minimum for boundaries
- Focus indicators: 3:1 minimum against adjacent colors
FAIL (Poor Contrast)
- Light gray text on white (< 4.5:1)
- White text on light colors
- Disabled states that look like active (too much contrast)
- Placeholder text same as input text
Contrast Ratio Quick Reference
| 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 | ✗ |
Common Failure Modes
| 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 |
Prerequisites
- Color palette defined
- Typography scale defined
Dependencies
build-color-palette(gray scale needed)
Refactoring UI References
- "Don't use grey text on colored backgrounds"
- "Ensure sufficient contrast"
Example Assessment
Input: Body text #888888 on white background
Evaluation: FAIL
- Ratio: ~3.5:1
- Below 4.5:1 requirement
Recommendation: Change to #666666 (5.9:1) minimum Prefer #333333 or #1A1A1A for body text
评价
还没有评价。欢迎分享你的使用感受。
评论
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
同一仓库的技能
Automate 2chat tasks via Rube MCP (Composio). Always search tools first for current schemas.
中文简介正在准备中。当前显示原文说明。
karanmrn/karanagentskills32026年8月28日 更新
Set up and use 1Password CLI for sign-in, desktop integration, and reading or injecting secrets.
中文简介正在准备中。当前显示原文说明。
karanmrn/karanagentskills32026年8月28日 更新
Build integrated IS/BS/CF financial workbooks in Excel.
中文简介正在准备中。当前显示原文说明。
karanmrn/karanagentskills32026年8月28日 更新
9router
免费Entry point for 9Router — local/remote AI gateway with OpenAI-compatible REST for chat, image, TTS, embeddings, web search, web fetch. Use when the user mentions 9Router, NINEROUTER_URL, or wants AI without writing provider boilerplate. This skill covers setup + indexes capability skills; fetch the relevant capability SKILL.md from the URLs below when needed.
中文简介正在准备中。当前显示原文说明。
karanmrn/karanagentskills32026年8月28日 更新
Chat / code generation via 9Router using OpenAI /v1/chat/completions or Anthropic /v1/messages format with streaming + auto-fallback combos. Use when the user wants to ask an LLM, generate code, summarize text, or run prompts through 9Router.
中文简介正在准备中。当前显示原文说明。
karanmrn/karanagentskills32026年8月28日 更新