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(원문)
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
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일 업데이트