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日 更新