대비 검사기 – Contrast Checker

이 대비 검사기는 ADA 준수를 위한 WCAG 및 APCA 색상 대비를 감사합니다 — 모든 웹사이트에 대한 색상 접근성 테스트입니다.

✅ 이 대비 검사기에서 얻을 수 있는 것: - WCAG 2.2 대비 비율 및 APCA Lc, - 페이지에서 문제 있는 요소 강조 표시, - 색상을 생성한 CSS 규칙, 소스 맵을 통해 추적 (사용 가능한 경우), - 대비 분석기와 제안된 대안이 포함된 내장 색상 선택기 도구, - 수정 사항의 실시간 미리보기, - CSS로 수정 사항 내보내기 (소스 위치 주석 포함). 🔍 의사 상태, 그림자 DOM, 동일 출처 iframe 및 이미지와 그라디언트 위의 텍스트를 처리하는 웹사이트 색상 대비 검사기로 구축됨 — 단순한 평면 배경만이 아님. ⚠️ 디버거 권한 필요. 이 대비 검사기의 범위는 '디버거' 권한이 필요한 Chrome DevTools 프로토콜을 통해서만 가능합니다. 연결되면 Chrome은 모든 탭에 정보 표시줄을 보여주며 분리 시 숨기지 않습니다. ⚡ 고도로 최적화된 작업 흐름: • 색상 접근성 문제 있는 모든 요소를 한눈에 강조 표시. • 변경 사항을 즉시 미리보기, 대비 비율 및 판별 결과 재계산. • 스타일시트 탭에서 사용자 정의 CSS 적용; 영향을 받는 문제는 목록에 표시됨. • 색상 대비를 수동으로 확인하려면 내장 색상 선택기 도구 사용: 왼쪽 클릭으로 전경 설정, 오른쪽 클릭으로 배경 설정, 비율이 즉시 업데이트됨. • 제외 탭을 사용하여 수정 중인 요소 외의 모든 것을 숨김. 📐 판별 기준. 이 대비 비율 검사기는 WCAG 및 APCA 요구 사항에 대한 색상 접근성을 테스트합니다. APCA Lc는 Bridge-PCA 임계값에 대해 평가되며, 이는 일치하는 WCAG 비율보다 엄격합니다 — 따라서 Bridge-PCA 통과는 항상 WCAG 통과를 의미합니다. 🔬 APCA란 무엇인가요? APCA (Accessible Perceptual Contrast Algorithm)는 사람들이 화면에서 텍스트를 읽는 방식을 추적하는 모델입니다. 동일한 WCAG 비율을 가진 두 색상 쌍은 눈에 띄게 다르게 보일 수 있으며, 그들의 APCA Lc (휘도 대비)는 이를 반영합니다: 쌍이 WCAG를 통과할 수 있지만 읽기 어려운 느낌을 줄 수 있습니다. 이 웹사이트 색상 접근성 검사기는 두 숫자를 모두 계산합니다. 🚧 제한 사항: 1. 다른 모든 웹사이트 접근성 검사기와 마찬가지로, 이 검사기는 최선의 추정치를 제공하며, 준수 인증서는 아닙니다. 2. 범위는 텍스트 전용; 비텍스트 요소의 검사 (WCAG 1.4.11)는 로드맵에 있습니다. 3. 교차 출처 iframe은 들어가지 않습니다. 4. 복잡한 배경과 애니메이션은 유한한 수의 공간적 및 시간적 지점에서 샘플링됩니다; 최악의 샘플 비율이 보고되지만 여전히 낙관적일 수 있으며, 샘플러는 렌더링 아티팩트에 의해 오도될 수 있습니다. 5. 매우 동적인 사이트는 잘못된 문제를 생성할 수 있습니다. 6. 이 색상 대비 검사기는 이미지를 자동으로 OCR하지 않습니다; 포함된 색상 선택기 도구를 통해 의미 있는 텍스트가 있는 이미지를 테스트하세요. 🔒 개인 정보 보호 및 권한. ▸ 로컬에서 실행; 웹페이지 데이터는 절대 귀하의 기계를 떠나지 않습니다. ▸ 'activeTab'만: 분석 스크립트는 도구 모음 아이콘을 클릭할 때 주입됩니다. ▸ 'debugger' 권한이 필요하여 Shadow DOM 및 iframe에 들어가고, CSS 소스를 추적하며, 복잡한 배경을 샘플링합니다. 🧮 정확성 세부정보. 반투명 텍스트와 조상 불투명도는 올바르게 처리됩니다: 전경은 휘도가 측정되기 전에 실제 배경 위에 합성되므로 보고된 비율은 사용자가 실제로 보는 것과 일치합니다. 넓은 색 영역 색상 함수 — oklch, lab, lch, color(display-p3) — 도 지원되며, 색 영역을 벗어날 경우 sRGB로 제한됩니다. 🎨 이미지와 그라디언트 위의 텍스트. 대부분의 유사 도구와 달리, 이 도구는 비평면 배경을 포기하지 않거나 'getComputedStyle' / 'CSS.getBackgroundColors'가 보고하는 내용을 신뢰하지 않습니다. 브라우저의 페인트 순서를 따라 실제 배경을 합성합니다 — 불투명도, 혼합 모드, 선형 그라디언트, 배경 필터 — 그리고 그것이 충분하지 않을 경우, 이 색상 대비 도구는 텍스트의 위치에서 렌더링된 픽셀을 샘플링합니다. ❓ Q&A 📌 동일한 색상 쌍이 WCAG와 APCA에서 때때로 다른 판별 결과를 받는 이유는 무엇인가요? ↳ WCAG는 휘도를 측정합니다; APCA는 지각 대비를 측정합니다. 4.5:1을 통과하는 쌍이 Bridge-PCA Lc 임계값에 미치지 못할 수 있습니다 — 더 엄격한 모델입니다. 📌 APCA가 WCAG를 대체하나요? ↳ 아니요 — APCA는 대체가 아니라 유용한 제2의 의견입니다. 이 대비 검사기는 두 가지를 모두 보고합니다. 📌 이 접근성 검사기로 로컬 파일이나 내 개발 서버를 스캔할 수 있나요? ↳ 네. 확장 설정에서 "파일 URL에 대한 액세스 허용"을 활성화하세요. file:// 또는 localhost URL을 열고 도구 모음 아이콘을 클릭하세요. chrome://, Chrome 웹 스토어 및 기타 제한된 스킴은 건너뜁니다. 📌 이 도구가 ADA 준수를 인증하나요? ↳ 아니요. 색상 대비만 검사합니다 — 접근성의 한 측면입니다. ADA 준수는 많은 표준과 기준 (의미론, 키보드 접근, 대체 텍스트, 자막 등)을 포함하는 법적 결정이며, 자격을 갖춘 전문가에 의해 평가되어야 합니다.