check-color-contrast
Check color contrast across text, controls, focus, states, gradients, images, and themes. Use when an interface needs measurable accessible color relationships and verified repairs.
ソース情報
- リポジトリ
- protosphinx/sphinxstack
- ソースの最終更新活動
- 2026年7月29日 13:55
- 検出された SKILL.md の言語
- 英語
- スター
- 3
- フォーク
- 0
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
ファイルエクスプローラー
2 ファイルSKILL.md を表示中
SKILL.md
ソースの指示 · 読み取り専用プレビュー- name
- check-color-contrast
- category
- design
- description
- Check color contrast across text, controls, focus, states, gradients, images, and themes. Use when an interface needs measurable accessible color relationships and verified repairs.
# check-color-contrast
Measure the actual rendered foreground and background in every meaningful state.
## Procedure
1. Inventory text sizes, icons, controls, borders, focus indicators, charts, links, and themes.
2. Capture computed colors over the real background, including transparency, gradients, and images.
3. Measure the applicable contrast requirement for each element and state.
4. Check hover, focus, active, disabled, selected, error, visited, and high-contrast modes.
5. Repair tokens or components at the narrowest shared source.
6. Preserve hierarchy and brand intent without relying on color alone.
7. Re-measure rendered results in representative browsers and displays.
8. Record failures, changes, exceptions, and evidence in a contrast report.
## Guardrails
- Do not sample only a design-file color when rendering blends or overlays it.
- Disabled controls still need understandable boundaries and state.
- Contrast alone does not make information accessible.
## Done
- A contrast audit report lists element, state, values, result, and repair
- All changed combinations are re-measured and verified
- Color-independent cues and focus visibility are tested
GitHubで見る