How do I install the Wcag Check skill?

Run npx skillmds@latest add majiayu000/wcag-check in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Wcag Check safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Wcag Check?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Wcag Check free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Wcag Check?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Wcag Check by majiayu000 — Agent Skill

Name: Wcag Check
Rating: 4.2 (5 reviews)
Author: majiayu000

Wcag Check

WCAG-Kontrastprüfung bei CSS-Änderungen. Führt den 2-stufigen Schutz aus (statischer Check + Laufzeit-Check) und prüft Farbregeln. Nutze diesen Skill IMMER wenn du CSS-Farben, Hintergründe oder Text-Styles änderst. Aufruf mit /wcag-check [--static-only] [--views view1,view2].

majiayu000 Updated Sep 9, 2026 567 repo stars

File contents

WCAG-Kontrastprüfung

Du prüfst ob CSS-Änderungen die WCAG 2.2 AA Kontrast-Anforderungen einhalten. Pflicht bei JEDER Änderung an src/style.css.

Argument

$ARGUMENTS = Optional: --static-only (nur statischer Check) oder --views optimizer,network (nur bestimmte Views)

2-Stufiger Schutz

Stufe 1: Statischer CSS-Check (IMMER zuerst)

node tools/wcag/wcag-static-check.js

Prüft OHNE laufende App:

Alle Text-Variablen (--text-primary, --text-secondary, --text-muted, --accent-text) auf allen Hintergründen (--bg-primary, --bg-secondary, --bg-card, --bg-tertiary) ≥ 4.5:1
Alle color: #fff Stellen gegen ihre Hintergründe in derselben CSS-Regel
Globale ::placeholder-Regel vorhanden und Kontrast ausreichend
Keine gefährlichen Muster (#fff auf --danger, --success, --warning)

Exit-Code 0 = bestanden, 1 = Probleme

Stufe 2: Laufzeit-Check (wenn App läuft)

node tools/wcag/wcag-gate.js [--views optimizer,network] [--save-screenshots]

Prüft IN der laufenden App:

Navigiert zu allen 14 Views (oder gefilterte)
Extrahiert alle Text-Elemente mit getComputedStyle
Alpha-Blending für halbtransparente Hintergründe (korrekte Komposition)
Placeholder-Kontrast in Input-Feldern
Wartet intelligent bis Views geladen sind (bis 5 Sekunden)

Exit-Code 0 = bestanden, 1 = Verletzungen

Farbregeln (Dark Theme)

Erlaubte Kombinationen

Textfarbe	Auf welchen Hintergründen	Mindestkontrast
`--text-primary` (#e8e9ed)	Alle Hintergründe	7.4:1+
`--text-secondary` (#b0b4c8)	Alle Hintergründe	6.5:1+
`--text-muted` (#9ba2b8)	Alle Hintergründe	5.3:1+
`--accent-text` (#c4b5fd)	Alle Hintergründe	5.3:1+
`#fff`	NUR auf `--accent` (#6c5ce7)	4.86:1
`#000`	Auf --danger, --success, --warning	4.5:1+

Verbotene Kombinationen

color: #fff auf --danger (#e94560) → 3.83:1 FAIL
color: #fff auf --success (#4ecca3) → 1.93:1 FAIL
color: #fff auf --warning (#ffc107) → 1.63:1 FAIL
--accent (#6c5ce7) als Textfarbe (NUR für Borders/Backgrounds)
Lila/Violett auf dunkelblauem Hintergrund (Hue-Similarity = schlecht lesbar trotz Mathe)

Neue Farben hinzufügen

Wenn eine neue Farbkombination benötigt wird:

Kontrast berechnen (sRGB → linear → Luminanz → Ratio)
≥ 4.5:1 für normalen Text, ≥ 3.0:1 für grossen Text (≥18px oder ≥14px bold)
Hue-Similarity visuell prüfen (gleiche Farbfamilie = schlecht lesbar)
In BEIDEN Checks verifizieren

Ablauf

Statischen Check ausführen → muss 0 Probleme melden
Falls App läuft: Laufzeit-Check ausführen → muss 0 Verletzungen melden
Falls Probleme gefunden: CSS fixen und erneut prüfen
Ergebnis dokumentieren

Ausgabeformat

## WCAG-Check: [was geändert wurde]

### Statischer Check
- Ergebnis: BESTANDEN / NICHT BESTANDEN
- [Details wenn nicht bestanden]

### Laufzeit-Check
- Ergebnis: BESTANDEN / NICHT BESTANDEN / ÜBERSPRUNGEN (App nicht gestartet)
- Views geprüft: X, Elemente: Y, Verletzungen: Z

### Zusammenfassung
Alle Kontraste eingehalten / X Probleme gefunden und behoben

---name: wcag-checkdescription: WCAG-Kontrastprüfung bei CSS-Änderungen. Führt den 2-stufigen Schutz aus (statischer Check + Laufzeit-Check) und prüft Farbregeln. Nutze diesen Skill IMMER wenn du CSS-Farben, Hintergründe oder Text-Styles änderst. Aufruf mit /wcag-check [--static-only] [--views view1,view2].--- # WCAG-Kontrastprüfung Du prüfst ob CSS-Änderungen die WCAG 2.2 AA Kontrast-Anforderungen einhalten. **Pflicht bei JEDER Änderung an `src/style.css`.** ## Argument `$ARGUMENTS` = Optional: `--static-only` (nur statischer Check) oder `--views optimizer,network` (nur bestimmte Views) ## 2-Stufiger Schutz ### Stufe 1: Statischer CSS-Check (IMMER zuerst) ```bash node tools/wcag/wcag-static-check.js ``` Prüft OHNE laufende App: - Alle Text-Variablen (--text-primary, --text-secondary, --text-muted, --accent-text) auf allen Hintergründen (--bg-primary, --bg-secondary, --bg-card, --bg-tertiary) ≥ 4.5:1 - Alle `color: #fff` Stellen gegen ihre Hintergründe in derselben CSS-Regel - Globale `::placeholder`-Regel vorhanden und Kontrast ausreichend - Keine gefährlichen Muster (`#fff` auf --danger, --success, --warning) **Exit-Code 0 = bestanden, 1 = Probleme** ### Stufe 2: Laufzeit-Check (wenn App läuft) ```bash node tools/wcag/wcag-gate.js [--views optimizer,network] [--save-screenshots] ``` Prüft IN der laufenden App: - Navigiert zu allen 14 Views (oder gefilterte) - Extrahiert alle Text-Elemente mit `getComputedStyle` - Alpha-Blending für halbtransparente Hintergründe (korrekte Komposition) - Placeholder-Kontrast in Input-Feldern - Wartet intelligent bis Views geladen sind (bis 5 Sekunden) **Exit-Code 0 = bestanden, 1 = Verletzungen** ## Farbregeln (Dark Theme) ### Erlaubte Kombinationen | Textfarbe | Auf welchen Hintergründen | Mindestkontrast | |-----------|--------------------------|-----------------| | `--text-primary` (#e8e9ed) | Alle Hintergründe | 7.4:1+ | | `--text-secondary` (#b0b4c8) | Alle Hintergründe | 6.5:1+ | | `--text-muted` (#9ba2b8) | Alle Hintergründe | 5.3:1+ | | `--accent-text` (#c4b5fd) | Alle Hintergründe | 5.3:1+ | | `#fff` | NUR auf `--accent` (#6c5ce7) | 4.86:1 | | `#000` | Auf --danger, --success, --warning | 4.5:1+ | ### Verbotene Kombinationen - `color: #fff` auf `--danger` (#e94560) → 3.83:1 FAIL - `color: #fff` auf `--success` (#4ecca3) → 1.93:1 FAIL - `color: #fff` auf `--warning` (#ffc107) → 1.63:1 FAIL - `--accent` (#6c5ce7) als Textfarbe (NUR für Borders/Backgrounds) - Lila/Violett auf dunkelblauem Hintergrund (Hue-Similarity = schlecht lesbar trotz Mathe) ### Neue Farben hinzufügen Wenn eine neue Farbkombination benötigt wird: 1. Kontrast berechnen (sRGB → linear → Luminanz → Ratio) 2. ≥ 4.5:1 für normalen Text, ≥ 3.0:1 für grossen Text (≥18px oder ≥14px bold) 3. Hue-Similarity visuell prüfen (gleiche Farbfamilie = schlecht lesbar) 4. In BEIDEN Checks verifizieren ## Ablauf 1. Statischen Check ausführen → muss 0 Probleme melden 2. Falls App läuft: Laufzeit-Check ausführen → muss 0 Verletzungen melden 3. Falls Probleme gefunden: CSS fixen und erneut prüfen 4. Ergebnis dokumentieren ## Ausgabeformat ```markdown ## WCAG-Check: [was geändert wurde] ### Statischer Check - Ergebnis: BESTANDEN / NICHT BESTANDEN - [Details wenn nicht bestanden] ### Laufzeit-Check - Ergebnis: BESTANDEN / NICHT BESTANDEN / ÜBERSPRUNGEN (App nicht gestartet) - Views geprüft: X, Elemente: Y, Verletzungen: Z ### Zusammenfassung Alle Kontraste eingehalten / X Probleme gefunden und behoben ```

Frequently asked questions