사용 방법
- 텍스트(전경) 색상과 배경 색상을 HEX, rgb(), hsl() 또는 다른 CSS 형식으로 입력하거나 색상 선택기를 사용하세요.
- 대비율과 각 WCAG 기준의 통과 여부를 확인하세요.
- 기준을 충족하지 못하면 목표를 선택하고 제안된 색상을 적용하세요. 색조는 유지하고 명도만 변경합니다.
- “바꾸기”를 사용해 반대 조합도 확인하세요. 예를 들어 어두운 버튼에 밝은 텍스트를 사용하는 경우입니다.
작동 방식
대비율은 WCAG 2.2 정의를 따릅니다. 각 색상의 상대 휘도는 sRGB 채널을 기준으로 계산하며, 대비율은 (더 밝은 색 + 0.05) ÷ (더 어두운 색 + 0.05)입니다. 대비율은 1:1(같은 색)부터 21:1(검은색과 흰색)까지입니다.
확인하는 기준: 성공 기준 1.4.3(AA)은 일반 텍스트에 4.5:1, 큰 텍스트에 3:1을 요구하고, 1.4.6(AAA)은 각각 7:1과 4.5:1을 요구합니다. 1.4.11은 입력 테두리와 아이콘처럼 사용자 인터페이스 구성 요소와 의미 있는 그래픽에 3:1을 요구합니다. 큰 텍스트는 일반 굵기 기준 최소 24px, 굵은 글씨 기준 약 18.66px입니다. WCAG에서는 반올림을 허용하지 않으므로 4.49:1은 기준에 근접하더라도 AA를 통과하지 못합니다. 여기에 표시되는 비율은 반올림이 아닌 버림 값입니다.
추천 색상은 텍스트 색상의 색상과 채도를 OKLCH에서 유지하고, 목표 대비율을 충족하는 가장 가까운 명도(더 어둡거나 밝은 색)를 찾습니다. 대비율은 가독성의 한 요소일 뿐입니다. 글꼴 굵기와 크기, 색각 차이도 영향을 줍니다. WCAG 2.2는 현재 W3C 권고안이며 대부분의 접근성 법규에서 이를 참조합니다.
예시
기준에 아슬아슬하게 미달하는 회색 텍스트
흰색 배경에 #777777을 사용하면 대비율은 4.48:1입니다. 큰 텍스트와 UI 구성 요소에는 통과하지만 일반 텍스트의 AA 기준에는 미달합니다. 기준을 통과하는 가장 가까운 회색은 약 #767676이며, 대비율은 4.54:1입니다.
브랜드 버튼의 흰색 텍스트
#ff8800 배경에 흰색 텍스트를 사용하면 대비율은 약 2.4:1로, 큰 텍스트의 최소 기준인 3:1에도 미달합니다. 보통 주황색을 더 어둡게 하거나 어두운 텍스트를 사용하면 해결됩니다. 추천 결과에서 텍스트 색상을 얼마나 어둡게 해야 하는지 확인할 수 있습니다.
입력 필드 테두리 확인
흰색 배경에 밝은 회색 테두리 #cccccc를 사용하면 대비율은 약 1.6:1입니다. 기준 1.4.11에 따라 입력 필드임을 나타내는 테두리는 3:1을 충족해야 하므로 #949494 정도 또는 더 어두운 색이 필요합니다.
자주 묻는 질문
WCAG AA 기준을 통과하려면 대비율이 얼마여야 하나요?
일반 본문 텍스트는 4.5:1, 큰 텍스트(24px 또는 굵은 글씨 18.66px)와 UI 구성 요소 및 의미 있는 그래픽은 3:1입니다. AAA 기준은 텍스트의 경우 7:1, 큰 텍스트의 경우 4.5:1입니다.
로고 텍스트나 비활성화된 버튼 텍스트도 기준을 통과해야 하나요?
아니요. WCAG는 로고와 브랜드 이름의 텍스트, 장식용 텍스트, 비활성화된 사용자 인터페이스 구성 요소의 텍스트를 예외로 둡니다.
다른 검사기와 결과가 조금 다른 이유는 무엇인가요?
일부 도구는 대비율을 소수점 한 자리까지 표시하거나 올림합니다. WCAG는 정확한 값을 비교하므로 이 도구는 소수점 둘째 자리까지 버림하여 표시합니다. 알파값이 있는 색상을 입력하면 아주 작은 차이가 생길 수도 있습니다.
새로운 APCA 대비 측정 방식은 무엇인가요?
APCA는 향후 WCAG 버전을 위해 제안된 별도의 측정 방식입니다. 이 도구가 측정하고 현재 접근성 기준에서 참조하는 WCAG 2.2에는 포함되지 않습니다.
개인정보 보호
색상은 브라우저에서 확인합니다. 업로드하거나 저장하지 않습니다.