WCAG 2.2 색상 대비 검사기
브라우저에서 로컬로 실행텍스트와 UI 색상 대비를 WCAG 2.2 AA·AAA 기준으로 검사하고 실패한 조합을 수정하세요
저장된 색상을 복원하는 중…
WCAG 2.2 색상 대비 검사기란?
WCAG 2.2 색상 대비 검사기는 전경색과 배경색 사이의 명암비를 측정하고, 텍스트 AA·AAA(성공 기준 1.4.3, 1.4.6)와 UI 구성 요소 및 그래픽 객체(성공 기준 1.4.11)의 통과 여부를 알려 줍니다. HEX, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(), CSS 색 이름을 지원하며, 색 조합을 텍스트와 컨트롤로 미리 보여 주고, 실패한 경우 가장 가까운 접근성 색상을 제안합니다.
사용 방법
- 1.전경색과 배경색을 입력하거나 선택합니다.
- 2.명암비와 WCAG 2.2 기준별 통과/실패 행을 확인합니다.
- 3.일반 텍스트, 큰 텍스트, 컨트롤 미리보기를 확인합니다.
- 4.실패한 검사가 있으면 전경색 조정 또는 배경색 조정에서 AA나 AAA를 고르고, 원래 색과 제안 색을 비교한 뒤 적용을 선택합니다.
- 5.결과 요약이나 CSS 선언을 복사합니다.
명암비 계산 방식
각 색상을 sRGB로 변환한 뒤 WCAG 공식(선형화 임계값 0.04045)으로 상대 휘도를 계산합니다. 명암비는 (L1 + 0.05) / (L2 + 0.05)입니다. 화면에는 소수점 둘째 자리로 반올림해 표시하지만 모든 통과/실패 판정은 반올림하지 않은 값을 사용하므로, 4.499:1은 4.50:1로 표시되더라도 AA에 실패합니다. 반투명 전경색은 배경색 위에, 반투명 배경색은 바탕색(기본값 흰색) 위에 브라우저와 같은 방식으로 sRGB 채널별로 합성합니다. 선명한 Display P3나 OKLCH 값처럼 sRGB 밖의 색은 측정 전에 sRGB로 잘리며, 도구가 이를 알려 줍니다.
제한 사항 및 개인정보
이 검사기는 색상 한 쌍을 측정합니다. 글꼴 렌더링, 이미지나 그라데이션 위의 텍스트, 기타 WCAG 기준은 평가하지 않습니다. 페이지 전체 점검에는 Web Accessibility Checker를 사용하세요. WCAG 2.2에서 큰 텍스트는 18포인트 이상 또는 14포인트 이상 굵은 글꼴(약 24px, 또는 굵게 18.66px)입니다. 색상은 브라우저에서 처리되며 마지막 조합은 이 브라우저의 로컬 저장소에만 저장됩니다.
