Logo
Agent Skills
  • Skills
  • Category
  • Publishers
  • Cookbook
  • Blog
Logo
Agent Skills
SkillsWeb Performance & SEOWeb Accessibility Contrast Audit Fix
Featuredtypescript

Web Accessibility Contrast Audit Fix

by Awesome Skills•Web Performance & SEO

Diagnoses and fixes PageSpeed Insights accessibility errors caused by color-contrast audit failures. Improves WCAG 2.1 compliance.

280downloads
35stars
~380tokens

Quick Install

One command to add this skill

Terminal
$ mkdir -p ~/.claude/skills/web-performance-seo && curl -L https://raw.githubusercontent.com/littleben/awesomeAgentskills/main/web-performance-seo/README.md > ~/.claude/skills/web-performance-seo/SKILL.md

Instructions

SKILL.md

Back

Prerequisites

  • Next.js or React project
  • Tailwind CSS (optional)
  • Lighthouse

Security & Permissions

2 permissions required

  • No network access required
  • Can modify files on disk
  • Executes shell commands

Details

Published
2026/01/08
Language
typescript
Token Est.
~380

Resources

  • GitHub Repository
  • Direct Download

Tags

accessibilityWCAGPageSpeedcolor-contrasta11ySEO
Logo
Agent Skills

Discover and download skills for Claude Code and other AI agents

GitHub
Skills
  • Category
  • Publishers
  • Cookbook
Resources
  • Blog
  • GitHub
Legal
  • Privacy Policy
  • Terms of Service
Copyright © 2026 All Rights Reserved.

Web Accessibility - Contrast Audit Fix

Diagnoses and fixes PageSpeed Insights accessibility "!" errors caused by color-contrast audit failures.

When to use this Skill

  • PageSpeed Insights shows "!" instead of Accessibility score
  • color-contrast audit reports errors or incomplete
  • Need to fix getImageData canvas errors
  • Improving WCAG 2.1 compliance

Features

  • 5-step systematic fix workflow
  • Quick 5-minute emergency fix
  • Comprehensive diagnostic commands
  • OKLCH → HSL color space conversion
  • CSS filter removal guidelines
  • Opacity threshold optimization
  • WCAG 2.1 contrast standards
  • Pre/post deployment verification

Quick Diagnosis

# Run Lighthouse accessibility audit
npx lighthouse https://your-site.com --only-categories=accessibility --output=json

Common Issues

1. OKLCH Color Space Issues

OKLCH colors may not be compatible with all accessibility tools.

Fix: Convert to HSL

/* Before */
color: oklch(0.7 0.15 200);

/* After */
color: hsl(200, 50%, 60%);

2. Low Opacity Text

Text with low opacity fails contrast requirements.

Fix: Increase opacity to minimum 0.7

/* Before */
color: rgba(0, 0, 0, 0.3);

/* After */
color: rgba(0, 0, 0, 0.7);

3. CSS Filters on Text

Filters can interfere with contrast calculation.

Fix: Remove or modify filters

/* Remove blur/brightness filters from text elements */

Impact

  • ✅ Accessibility score: "!" → 85-100
  • ✅ Improved SEO rankings
  • ✅ Better user experience
  • ✅ Legal compliance (ADA, WCAG 2.1)

Verification

After fixes, verify with:

  1. PageSpeed Insights
  2. axe DevTools browser extension
  3. WAVE accessibility tool