web-performance-seo
Lighthouse 접근성 대비 오류 수정
이 스킬은 색상 대비 문제로 인한 PageSpeed Insights 및 Lighthouse 접근성 오류를 수정합니다. 접근성 감사 실패를 유발하는 CSS 패턴을 스캔하고 SEO 성능을 개선하기 위한 검증된 수정 패턴을 제공합니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"web-performance-seo" 사용 중입니다. 제 웹사이트가 Lighthouse 접근성에서 점수 대신 '!' 를 표시합니다
예상 결과:
'!' 는 감사 실패를 나타냅니다. 일반적인 원인으로는 CSS backdrop-blur 또는 필터, OKLCH/OKLAB 색상, 낮은 불투명도 배경 (< 0.4), 투명한 색상의 그라데이션 텍스트, 오버레이 없이 이미지 위의 텍스트 등이 있습니다. 코드베이스를 `rg -n "backdrop-blur|filter:|mix-blend-mode" .` 및 유사한 명령어로 스캔하여 문제 있는 패턴을 식별하는 것을 권장합니다.
"web-performance-seo" 사용 중입니다. 접근성을 위해 CSS 의 OKLCH 색상을 어떻게 수정하나요?
예상 결과:
OKLCH 를 HSL 또는 RGB 로 변환하세요. 예를 들어, `--primary: oklch(0.55 0.22 264);` 가 `--primary: hsl(250, 60%, 50%);` 로 변환됩니다. 색상 선택기나 도구를 사용하여 시각적 모양을 일치시키면서 Lighthouse 가 올바르게 분석할 수 있는 표준 색상 공간을 사용하세요.
보안 감사
안전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)
낮은 위험 문제 (1)
품질 점수
만들 수 있는 것
실패한 접근성 감사 수정
Lighthouse 가 접근성 섹션에서 점수 대신 '!' 를 표시할 때, 이 스킬을 사용하여 실패를 유발하는 CSS 패턴을 식별하고 수정합니다.
접근성을 통한 SEO 개선
접근성은 순위 요소입니다. 이 스킬을 사용하여 검색 엔진 순위에 부정적인 영향을 미치는 대비 문제를 수정합니다.
접근성 코드 검토
배포 전 CSS 와 구성 요소를 검토하여 접근성 문제를 조기에 발견하고 대비 문제를 미리 잡습니다.
이 프롬프트를 사용해 보세요
내 Lighthouse 접근성 감사에서 점수 대신 '!' 가 표시됩니다. 색상 대비 감사가 실패하고 있습니다. 이 문제를 유발하는 CSS 패턴을 식별하고 수정하는 데 도움을 주세요.
CSS 에서 OKLCH 색상을 사용하고 있는데 Lighthouse 에서 접근성 문제가 발생하고 있습니다. OKLCH 를 접근 가능한 HSL 또는 RGB 대안으로 변환하는 방법을 보여주세요.
제 웹사이트는 그라데이션 텍스트를 사용하지만 Lighthouse 가 색상 대비 문제를 표시합니다. 접근성 감사를 통과하는 적절한 색상 대체 수단이 있는 그라데이션 텍스트 패턴을 제공해주세요.
이미지 위에 텍스트가 있는데 대비가 접근성 감사에서 실패하고 있습니다. 충분한 대비 비율을 보장하기 위한 오버레이 추가의 올바른 패턴을 보여주세요.
모범 사례
- 배포 전 로컬에서 Lighthouse 또는 axe 로 항상 테스트하세요
- 배경 불투명도를 0.4 이상으로 높이기 (0.6+ 권장)
- Windows 고대비 모드 지원을 위해 forced-colors 미디어 쿼리 사용
- 일반 텍스트는 4.5:1, 대형 텍스트는 3:1 의 대비 비율을 충족하는지 확인
피하기
- 접근성 영향을 확인하지 않고 CSS 필터 또는 backdrop-blur 사용
- Lighthouse 에서 테스트하지 않고 OKLCH/OKLAB 색상 사용
- 그라데이션 배경 위에 텍스트 색상을 투명으로 설정
- 적절한 오버레이 없이 이미지 위에 직접 텍스트 배치