Skills web-performance-seo
📦

web-performance-seo

Safe

Fix Lighthouse Accessibility Contrast Errors

This skill fixes PageSpeed Insights and Lighthouse accessibility errors caused by color contrast failures. It scans for CSS patterns that trigger accessibility audit failures and provides proven fix patterns to improve your SEO performance.

Supports: Claude Codex Code(CC)
🥉 74 Bronze
1

Download the skill ZIP

2

Upload in Claude

Go to Settings → Capabilities → Skills → Upload skill

3

Toggle on and start using

Test it

Using "web-performance-seo". My website shows '!' in Lighthouse accessibility instead of a score

Expected outcome:

The '!' indicates an audit failure. Common causes include: CSS backdrop-blur or filters, OKLCH/OKLAB colors, low opacity backgrounds (< 0.4), gradient text with transparent color, or text over images without overlays. I recommend scanning your codebase with: `rg -n "backdrop-blur|filter:|mix-blend-mode" .` and similar commands to identify problematic patterns.

Using "web-performance-seo". How do I fix the OKLCH colors in my CSS for accessibility?

Expected outcome:

Convert OKLCH to HSL or RGB. For example, `--primary: oklch(0.55 0.22 264);` becomes `--primary: hsl(250, 60%, 50%);`. Use a color picker or tool to match the visual appearance while using a standard color space that Lighthouse can analyze correctly.

Security Audit

Safe
v1 • 2/24/2026

Static analysis detected external_commands patterns and weak cryptographic algorithms. Evaluation reveals these are FALSE POSITIVES. The 'external_commands' are CLI command examples in markdown documentation (ripgrep commands for code scanning), not executable code. The 'weak cryptographic algorithm' detections are OKLCH/OKLAB CSS color space specifications misidentified as crypto algorithms. This skill provides documentation and code patterns for fixing accessibility contrast issues - no security risks present.

1
Files scanned
93
Lines analyzed
2
findings
1
Total audits
Medium Risk Issues (1)
SKILL.md:32-37SKILL.md:37-41SKILL.md:41-46SKILL.md:46-49SKILL.md:49-54SKILL.md:54-61SKILL.md:61-74SKILL.md:74-77SKILL.md:77-83
Documentation CLI Commands Detected
Static scanner detected 'external_commands' patterns in markdown code blocks. These are CLI command examples (ripgrep) shown as documentation for users to run on their own code, not executable code within the skill itself.
Low Risk Issues (1)
SKILL.md:3SKILL.md:23
OKLCH/OKLAB Color Space Misidentified as Crypto
Static scanner flagged 'weak cryptographic algorithm' at lines 3 and 23. This is a FALSE POSITIVE - OKLCH/OKLAB are CSS color space specifications (CSS Color Level 4), not cryptographic algorithms.
Audited by: claude

Quality Score

38
Architecture
100
Maintainability
87
Content
50
Community
98
Security
91
Spec Compliance

What You Can Build

Fix Failed Accessibility Audits

When Lighthouse shows '!' instead of a score in the accessibility section, use this skill to identify and fix the CSS patterns causing the failure.

Improve SEO Through Accessibility

Accessibility is a ranking factor. Use this skill to fix contrast issues that negatively impact search engine rankings.

Accessibility Code Review

Review CSS and components for accessibility issues before deployment to catch contrast problems early.

Try These Prompts

Basic Contrast Fix Request 
My Lighthouse accessibility audit shows '!' instead of a score. The color-contrast audit is failing. Help me identify and fix the CSS patterns causing this issue.
OKLCH Color Conversion 
I am using OKLCH colors in my CSS and they are causing accessibility issues in Lighthouse. Show me how to convert OKLCH to accessible HSL or RGB alternatives.
Gradient Text Accessibility 
My website uses gradient text but Lighthouse flags color-contrast issues. Provide a pattern for gradient text with proper color fallbacks that pass accessibility audits.
Text Overlay on Images 
I have text over images and the contrast is failing accessibility audits. Show me the correct pattern for adding overlays to ensure sufficient contrast ratios.

Best Practices

  • Always test locally with Lighthouse or axe before deploying
  • Raise background opacity to 0.4 or higher (prefer 0.6+)
  • Use forced-colors media query for Windows high contrast mode support
  • Verify contrast ratios meet 4.5:1 for normal text and 3:1 for large text

Avoid

  • Using CSS filters or backdrop-blur without checking accessibility impact
  • Using OKLCH/OKLAB colors without testing in Lighthouse
  • Setting text color to transparent over gradient backgrounds
  • Placing text directly over images without proper overlay

Frequently Asked Questions

What does the '!' mean in Lighthouse accessibility?
The '!' indicates the accessibility audit failed completely and could not compute a score. This typically happens when Lighthouse cannot analyze certain CSS patterns like filters or color spaces.
Can this skill run Lighthouse tests for me?
No. This skill provides guidance and code patterns. You need to run Lighthouse or PageSpeed Insights yourself to verify the fixes.
Why are OKLCH colors causing issues?
Lighthouse uses getImageData to analyze colors, which has limited support for newer CSS color spaces like OKLCH and OKLAB. Converting to HSL or RGB ensures accurate analysis.
What opacity level is safe for accessibility?
Use background opacity of 0.4 or higher. Prefer 0.6 or higher for better contrast. Tailwind classes like /10 and /20 are too low; use /40, /60, or higher.
Does fixing accessibility actually help SEO?
Yes. Accessibility is a Google ranking factor. Sites with better accessibility scores may perform better in search results.
How do I test fixes locally before deploying?
Use Lighthouse in Chrome DevTools or the axe browser extension. Run tests locally to verify fixes before deploying to production.

Developer Details

Author

ZhanlinCui

License

MIT

Repository

https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/web-performance-seo

Ref

main

File structure

📄 SKILL.md