skills.rest
ZhanlinCui
ZhanlinCuiCOMMUNITY
Explore all skills by this author →
GitHub

web-performance-seo

Fix CSS color contrast errors that trigger PSI/Lighthouse accessibility warnings.

178|24|Updated Jan 14, 2026
Search Tags:#accessibility#CSS#contrast#Lighthouse#OKLCH#PSI#gradient-text
One-click install
npx skills add https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection --skill web-performance-seo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-performance-seo
Source: https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/web-performance-seo
Command: npx skills add https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection --skill web-performance-seo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps identify and remediate accessibility contrast issues that trigger PSI/Lighthouse "!" warnings, enabling more accessible pages and better SEO signals.

Core Features & Use Cases

  • Contrast auditing: Detects CSS color/opacity pitfalls, OKLCH/OKLAB color spaces, gradient text, and image-background contrast problems affecting audits.
  • Remediation guidance: Provides actionable steps to fix color, opacity, and overlay issues to improve accessibility scores and page speed signals.
  • Use Case: Use this Skill during web refreshes or CI checks to automatically flag contrast regressions and generate remediation notes for developers.

Quick Start

Use the skill to scan a sample page for contrast failures and generate a remediation plan you can apply in your CSS.

Frequently Asked Questions about web-performance-seo

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix accessibility contrast errors that trigger Lighthouse warnings?▼

Fix accessibility contrast errors by auditing CSS color combinations, adjusting OKLCH/OKLAB color spaces, increasing low-opacity backgrounds, and modifying gradient text or image overlays to meet Lighthouse thresholds.

Why does PageSpeed Insights flag my CSS color contrast as an accessibility failure?▼

PageSpeed Insights flags CSS color contrast when foreground and background colors fail WCAG ratios, often caused by low-opacity backgrounds, OKLCH conversions, or gradient text lacking a solid fallback color.

What is the best way to audit OKLCH color spaces for contrast compliance?▼

Audit OKLCH color spaces for contrast compliance by converting values to OKLAB, calculating relative luminance against the background, and adjusting the lightness channel until Lighthouse warnings clear.

Can I use standard browser developer tools to check gradient text contrast?▼

Yes, you can use standard browser developer tools to inspect gradient text, calculate the lightest and darkest pixel luminance against the background, and adjust CSS overlays to pass Lighthouse checks.

How to remediate low-opacity background contrast issues in web performance debugging?▼

Remediate low-opacity background contrast issues by calculating the composite RGB color, testing the resulting contrast ratio against text color, and increasing opacity until Lighthouse warnings resolve.

Does fixing image overlay contrast improve SEO signals?▼

Fixing image overlay contrast improves SEO signals by resolving Lighthouse accessibility warnings, which feed into the overall PageSpeed Insights performance score used by search engines.

Related Skills

Explore More Software Engineering Skills→
anouar1991anouar1991
1

dark-mode-tester

Audit dark mode rendering and color contrast against WCAG 2.1 guidelines.

Community
Advanced
pradyumnasagarpradyumnasagar
6

agent-handoff

Automate inter-skill data transfer and provenance capture via JSON Material Passports.

Community
Advanced
syeda-hoorain-alisyeda-hoorain-ali

hsl-to-oklch-converter

Convert HSL color values to OKLCH via automated Playwright workflows.

Community
Intermediate
jholhewresjholhewres
3

color-contrast

Calculate WCAG contrast ratios between foreground and background colors.

Community
Basic