Habilidades web-performance-seo
📦

web-performance-seo

Seguro

Corregir Errores de Contraste de Accesibilidad en Lighthouse

Esta habilidad corrige errores de accesibilidad en PageSpeed Insights y Lighthouse causados por fallos de contraste de color. Escanea patrones CSS que provocan fallos en auditorías de accesibilidad y proporciona patrones de corrección probados para mejorar tu rendimiento SEO.

Soporta: Claude Codex Code(CC)
🥉 74 Bronce
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "web-performance-seo". Mi sitio web muestra '!' en accesibilidad de Lighthouse en lugar de una puntuación

Resultado esperado:

El '!' indica un fallo de auditoría. Las causas comunes incluyen: backdrop-blur o filtros CSS, colores OKLCH/OKLAB, fondos de baja opacidad (< 0.4), texto con gradiente con color transparent, o texto sobre imágenes sin superposiciones. Recomiendo escanear tu codebase con: `rg -n "backdrop-blur|filter:|mix-blend-mode" .` y comandos similares para identificar patrones problemáticos.

Usando "web-performance-seo". ¿Cómo corrijo los colores OKLCH en mi CSS para accesibilidad?

Resultado esperado:

Convierte OKLCH a HSL o RGB. Por ejemplo, `--primary: oklch(0.55 0.22 264);` se convierte en `--primary: hsl(250, 60%, 50%);`. Usa un selector de color o herramienta para igualar la apariencia visual mientras usas un espacio de color estándar que Lighthouse pueda analizar correctamente.

Auditoría de seguridad

Seguro
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
Archivos escaneados
93
Líneas analizadas
2
hallazgos
1
Auditorías totales
Problemas de riesgo medio (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.
Problemas de riesgo bajo (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.
Auditado por: claude

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
50
Comunidad
98
Seguridad
91
Cumplimiento de la especificación

Lo que puedes crear

Corregir Auditorías de Accesibilidad Fallidas

Cuando Lighthouse muestra '!' en lugar de una puntuación en la sección de accesibilidad, usa esta habilidad para identificar y corregir los patrones CSS que causan el fallo.

Mejorar SEO a Través de Accesibilidad

La accesibilidad es un factor de posicionamiento. Usa esta habilidad para corregir problemas de contraste que impactan negativamente los rankings en motores de búsqueda.

Revisión de Código de Accesibilidad

Revisa CSS y componentes en busca de problemas de accesibilidad antes del despliegue para detectar problemas de contraste temprano.

Prueba estos prompts

Solicitud de Corrección de Contraste Básica 
Mi auditoría de accesibilidad de Lighthouse muestra '!' en lugar de una puntuación. La auditoría de color-contrast está fallando. Ayúdame a identificar y corregir los patrones CSS que causan este problema.
Conversión de Color OKLCH 
Estoy usando colores OKLCH en mi CSS y están causando problemas de accesibilidad en Lighthouse. Muéstrame cómo convertir OKLCH a alternativas accesibles en HSL o RGB.
Accesibilidad de Texto con Gradiente 
Mi sitio web usa texto con gradiente pero Lighthouse señala problemas de color-contrast. Proporciona un patrón para texto con gradiente con valores de respaldo adecuados que pasen auditorías de accesibilidad.
Superposición de Texto en Imágenes 
Tengo texto sobre imágenes y el contraste está fallando auditorías de accesibilidad. Muéstrame el patrón correcto para añadir superposiciones para asegurar ratios de contraste suficientes.

Mejores prácticas

  • Siempre prueba localmente con Lighthouse o axe antes de desplegar
  • Eleva la opacidad del fondo a 0.4 o superior (prefiere 0.6+)
  • Usa la media query forced-colors para soporte del modo de alto contraste de Windows
  • Verifica que los ratios de contraste cumplan 4.5:1 para texto normal y 3:1 para texto grande

Evitar

  • Usar filtros CSS o backdrop-blur sin verificar el impacto en accesibilidad
  • Usar colores OKLCH/OKLAB sin probar en Lighthouse
  • Establecer el color del texto como transparent sobre fondos con gradiente
  • Colocar texto directamente sobre imágenes sin superposición adecuada

Preguntas frecuentes

¿Qué significa el '!' en accesibilidad de Lighthouse?
El '!' indica que la auditoría de accesibilidad falló completamente y no pudo calcular una puntuación. Esto típicamente ocurre cuando Lighthouse no puede analizar ciertos patrones CSS como filtros o espacios de color.
¿Puede esta habilidad ejecutar pruebas de Lighthouse por mí?
No. Esta habilidad proporciona orientación y patrones de código. Necesitas ejecutar Lighthouse o PageSpeed Insights tú mismo para verificar las correcciones.
¿Por qué los colores OKLCH están causando problemas?
Lighthouse usa getImageData para analizar colores, que tiene soporte limitado para espacios de color CSS más nuevos como OKLCH y OKLAB. Convertir a HSL o RGB asegura un análisis preciso.
¿Qué nivel de opacidad es seguro para accesibilidad?
Usa opacidad de fondo de 0.4 o superior. Prefiere 0.6 o superior para mejor contraste. Las clases de Tailwind como /10 y /20 son demasiado bajas; usa /40, /60, o superior.
¿Corregir accesibilidad realmente ayuda al SEO?
Sí. La accesibilidad es un factor de ranking de Google. Sitios con mejores puntuaciones de accesibilidad pueden rendir mejor en resultados de búsqueda.
¿Cómo pruebo las correcciones localmente antes de desplegar?
Usa Lighthouse en Chrome DevTools o la extensión de navegador axe. Ejecuta pruebas localmente para verificar correcciones antes de desplegar a producción.

Detalles del desarrollador

Licencia

MIT

Repositorio

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

Ref.

main

Estructura de archivos

📄 SKILL.md