Compétences web-performance-seo
📦

web-performance-seo

Sûr

Corriger les erreurs de contraste d'accessibilité Lighthouse

Cette compétence corrige les erreurs d'accessibilité de PageSpeed Insights et Lighthouse causées par des échecs de contraste des couleurs. Elle analyse les motifs CSS qui déclenchent des échecs d'audit d'accessibilité et fournit des modèles de correction éprouvés pour améliorer votre performance SEO.

Prend en charge: Claude Codex Code(CC)
🥉 74 Bronze
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "web-performance-seo". Mon site web affiche '!' dans l'accessibilité Lighthouse au lieu d'un score

Résultat attendu:

Le '!' indique un échec d'audit. Les causes courantes incluent : CSS backdrop-blur ou filtres, couleurs OKLCH/OKLAB, opacité de fond faible (< 0.4), texte en dégradé avec couleur transparente, ou texte sur images sans superpositions. Je recommande d'analyser votre base de code avec : `rg -n "backdrop-blur|filter:|mix-blend-mode" .` et des commandes similaires pour identifier les motifs problématiques.

Utilisation de "web-performance-seo". Comment corriger les couleurs OKLCH dans mon CSS pour l'accessibilité ?

Résultat attendu:

Convertissez OKLCH en HSL ou RGB. Par exemple, `--primary: oklch(0.55 0.22 264);` devient `--primary: hsl(250, 60%, 50%);`. Utilisez un sélecteur de couleurs ou un outil pour correspondre à l'apparence visuelle tout en utilisant un espace colorimétrique standard que Lighthouse peut analyser correctement.

Audit de sécurité

Sûr
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
Fichiers analysés
93
Lignes analysées
2
résultats
1
Total des audits
Problèmes à risque moyen (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.
Problèmes à risque faible (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.
Audité par: claude

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
50
Communauté
98
Sécurité
91
Conformité aux spécifications

Ce que vous pouvez construire

Corriger les audits d'accessibilité échoués

Lorsque Lighthouse affiche '!' au lieu d'un score dans la section accessibilité, utilisez cette compétence pour identifier et corriger les motifs CSS causant l'échec.

Améliorer le SEO grâce à l'accessibilité

L'accessibilité est un facteur de classement. Utilisez cette compétence pour corriger les problèmes de contraste qui impactent négativement le référencement.

Revue de code d'accessibilité

Revisez le CSS et les composants pour les problèmes d'accessibilité avant le déploiement pour détecter les problèmes de contraste tôt.

Essayez ces prompts

Demande de correction de contraste basique 
Mon audit d'accessibilité Lighthouse affiche '!' au lieu d'un score. L'audit de contraste des couleurs échoue. Aidez-moi à identifier et corriger les motifs CSS causant ce problème.
Conversion des couleurs OKLCH 
J'utilise des couleurs OKLCH dans mon CSS et elles causent des problèmes d'accessibilité dans Lighthouse. Montrez-moi comment convertir OKLCH en alternatives HSL ou RGB accessibles.
Accessibilité du texte en dégradé 
Mon site web utilise du texte en dégradé mais Lighthouse signale des problèmes de contraste des couleurs. Fournissez un modèle pour le texte en dégradé avec des fallbacks de couleurs appropriés qui passent les audits d'accessibilité.
Superposition de texte sur images 
J'ai du texte sur des images et le contraste échoue les audits d'accessibilité. Montrez-moi le modèle correct pour ajouter des superpositions afin de garantir des ratios de contraste suffisants.

Bonnes pratiques

  • Testez toujours localement avec Lighthouse ou axe avant le déploiement
  • Augmentez l'opacité du fond à 0.4 ou plus (préférez 0.6+)
  • Utilisez la media query forced-colors pour le support du mode haut contraste Windows
  • Vérifiez que les ratios de contraste répondent à 4.5:1 pour le texte normal et 3:1 pour le grand texte

Éviter

  • Utiliser des filtres CSS ou backdrop-blur sans vérifier l'impact sur l'accessibilité
  • Utiliser des couleurs OKLCH/OKLAB sans tester dans Lighthouse
  • Définir la couleur du texte en transparent sur des fonds en dégradé
  • Placer du texte directement sur des images sans superposition appropriée

Foire aux questions

Que signifie le '!' dans l'accessibilité Lighthouse ?
Le '!' indique que l'audit d'accessibilité a complètement échoué et n'a pas pu calculer de score. Cela se produit généralement lorsque Lighthouse ne peut pas analyser certains motifs CSS comme les filtres ou les espaces colorimétriques.
Cette compétence peut-elle exécuter les tests Lighthouse pour moi ?
Non. Cette compétence fournit des recommandations et des modèles de code. Vous devez exécuter Lighthouse ou PageSpeed Insights vous-même pour vérifier les corrections.
Pourquoi les couleurs OKLCH causent-elles des problèmes ?
Lighthouse utilise getImageData pour analyser les couleurs, qui a un support limité pour les nouveaux espaces colorimétriques CSS comme OKLCH et OKLAB. La conversion en HSL ou RGB garantit une analyse précise.
Quel niveau d'opacité est sûr pour l'accessibilité ?
Utilisez une opacité de fond de 0.4 ou plus. Préférez 0.6 ou plus pour un meilleur contraste. Les classes Tailwind comme /10 et /20 sont trop basses ; utilisez /40, /60, ou plus.
Corriger l'accessibilité aide-t-elle réellement le SEO ?
Oui. L'accessibilité est un facteur de classement Google. Les sites avec de meilleurs scores d'accessibilité peuvent mieux se classer dans les résultats de recherche.
Comment tester les corrections localement avant le déploiement ?
Utilisez Lighthouse dans Chrome DevTools ou l'extension de navigateur axe. Exécutez les tests localement pour vérifier les corrections avant le déploiement en production.

Détails du développeur

Auteur

ZhanlinCui

Licence

MIT

Dépôt

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

Réf

main

Structure de fichiers

📄 SKILL.md