색상 대비 검사기

AA 등급은 일반 텍스트에서 4.5:1, 큰 텍스트에서 3:1을 요구합니다(성공 기준 1.4.3). AAA 등급은 7:1 및 4.5:1를 요구합니다(1.4.6). 사용자 인터페이스 구성 요소와 의미 있는 그래픽은 인접한 색상과 3:1의 대비를 가져야 합니다(1.4.11). 이 검사기는 이 다섯 가지 기준 각각의 통과 여부를 표시합니다.

WCAG는 큰 텍스트를 일반 굵기 기준 최소 18포인트(약 24 CSS 픽셀) 또는 굵게 기준 최소 14포인트(약 18.66 CSS 픽셀)로 정의합니다. 이보다 작은 텍스트는 일반 텍스트이며 더 높은 대비율이 필요합니다.

WCAG 기준은 정확한 값으로 판정하므로 4.5로 반올림되더라도 실제 값이 4.5보다 낮으면 통과하지 못합니다. 검사기는 반올림하지 않은 대비율을 비교하고 소수점 둘째 자리까지 버림하여 표시하므로, 화면의 값이 실제보다 더 좋아 보이는 일이 없습니다.

접근성 지각 대비 알고리즘(Accessible Perceptual Contrast Algorithm)은 WCAG 3 초안 개발을 위해 만든 대비 방식입니다. 지각된 명도 대비를 모델링하고 텍스트와 배경을 다르게 취급하며, 약 -108에서 106까지의 명도 대비 값 Lc를 반환합니다. 아직 발표된 WCAG 표준에는 포함되지 않았으므로, 규정 준수 여부는 WCAG 2 결과를 기준으로 확인하고 APCA는 추가 점검에 활용하세요.

APCA는 극성을 고려합니다. 양수는 밝은 배경에 어두운 텍스트를, 음수는 어두운 배경에 밝은 텍스트를 뜻합니다. 안내 등급은 절댓값을 사용하므로 Lc -75와 Lc 75는 같은 등급에 해당합니다.

APCA 브론즈 간편 모드를 따릅니다. 본문 텍스트에는 Lc 90을 권장하고, 최소값은 Lc 75입니다. 기타 콘텐츠 텍스트는 Lc 60, 제목과 큰 텍스트는 Lc 45, 자리 표시자처럼 짧게 읽히는 텍스트는 Lc 30, 텍스트가 아닌 요소는 Lc 15를 기준으로 합니다. 글꼴 크기와 굵기도 여전히 중요하므로, 이 등급은 확정적인 판정이 아닌 출발점으로 활용하세요.

버전 0.0.98 G, 개정판 4g의 APCA-W3 상수를 사용합니다. 여기에는 sRGB 채널의 간편한 2.4 지수, 소프트 블랙 클램프 및 저대비 클리핑이 포함됩니다. 검은색 텍스트와 흰색 배경은 약 Lc 106.0, 흰색 텍스트와 검은색 배경은 약 Lc -107.9를 반환하며, 이는 참조 구현과 일치합니다.

#이 있거나 없는 16진수 코드, CSS 색상 이름, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), display-p3 같은 color() 색 공간 및 cmyk()를 입력할 수 있습니다. 두 공식 모두 sRGB 화면 색상을 기준으로 정의되므로, sRGB 범위를 벗어나는 색상은 먼저 sRGB로 변환됩니다.

반투명 텍스트 색상은 브라우저에서 표시되는 방식과 같이 측정 전에 배경에 합성됩니다. 반투명 배경은 먼저 흰색에 합성됩니다. 결과에는 실제 비교에 사용된 불투명 텍스트 색상과 배경 색상이 표시됩니다.

WCAG 2에서는 밝은 색과 어두운 색의 휘도 비율이 순서에 관계없이 같으므로 중요하지 않습니다. APCA에서는 텍스트와 배경에 서로 다른 가중치를 적용하므로 중요합니다. 첫 번째 입력란에는 텍스트 색상을, 두 번째 입력란에는 배경 색상을 입력하세요.