color-contrast

Name: color-contrast
Author: alirezarezvani

Tests contrast ratios, color-blind safe palettes, and focus indicator visibility.

Content Preview

# Color Contrast Template

Tests contrast ratios, color-blind safe palettes, and focus indicator visibility.

## Prerequisites
- App running at `{{baseUrl}}`
- axe-playwright installed: `npm i -D @axe-core/playwright`
- Page under test: `{{baseUrl}}/{{pagePath}}`

---

## TypeScript

```typescript
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test.describe('Color Contrast', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('{{b

How to Use

Recommended: Install to project (local)

mkdir -p .claude/skills
curl -o .claude/skills/color-contrast.md \
  https://raw.githubusercontent.com/alirezarezvani/claude-skills/main/engineering-team/playwright-pro/templates/accessibility/color-contrast.md

Skill is scoped to this project only. Add .claude/skills/ to your .gitignoreif you don't want to commit it.

Alternative: Clone full repo

git clone https://github.com/alirezarezvani/claude-skills

Then reference at engineering-team/playwright-pro/templates/accessibility/color-contrast.md