색상 대비 검사기

WCAG 2.2 대비율은 두 색상의 상대 휘도를 이용해 1:1부터 21:1 사이로 계산합니다. 높은 값일수록 명암 차이가 크지만 실제 글꼴 크기와 굵기도 함께 고려해야 합니다.

WCAG 판정 기준

일반 텍스트는 AA 4.5:1, AAA 7:1 이상이 기준입니다.

• 큰 텍스트는 AA 3:1, AAA 4.5:1 이상을 요구합니다.
• 큰 텍스트는 대략 18pt 이상, 또는 굵은 글자 14pt 이상을 뜻합니다.
• 의미 있는 아이콘, 입력 테두리 같은 UI 구성요소는 주변 색과 3:1 이상이 기준입니다.

결과 이해

대비율은 색상의 순서와 무관해 글자색과 배경색을 맞바꿔도 숫자는 같습니다.

• 통과 여부는 실제 글자 위에 단색 배경이 있다고 가정한 결과입니다.
• 반투명 색상, 그라데이션, 배경 이미지는 합성된 최종 색상으로 별도 검사해야 합니다.
• 제안 색상은 현재 배경에서 검정과 흰색 중 대비가 더 높은 쪽입니다.

상세 활용법

디자인 시스템의 본문, 보조 문구, 버튼, 입력 필드 상태를 검토할 때 사용합니다.

• 기본·호버·비활성·오류 상태를 각각 검사하세요.
• 브랜드 색을 배경으로 쓰려면 흰색과 검정 글자 중 더 높은 대비 조합을 먼저 비교하세요.
• 색상 대비 외에도 글자 크기, 행간, 굵기와 색각 이상 환경을 함께 확인하세요.

주의사항

자동 계산만으로 전체 접근성 적합성을 보장할 수는 없습니다.

• 로고, 장식, 비활성 UI 등 일부 예외는 실제 사용 맥락에 따라 판단해야 합니다.
• 색만으로 성공·오류·선택 상태를 구분하지 말고 아이콘이나 문구를 함께 제공하세요.
• 최종 화면은 실제 기기 밝기와 확대 환경에서도 사람이 직접 읽어보는 검수가 필요합니다.