색 대비 검사기 (WCAG)
전경색·배경색의 명도 대비를 계산하고 AA·AAA 통과 여부를 확인하세요.
- ✓일반 텍스트 AA≥ 4.5
- ✓일반 텍스트 AAA≥ 7
- ✓큰 텍스트 AA≥ 3
- ✓큰 텍스트 AAA≥ 4.5
- ✓UI·그래픽 요소≥ 3
큰 텍스트 미리보기 (24px Bold)
일반 텍스트 미리보기입니다. 이 정도 크기의 본문이 배경 위에서 얼마나 잘 읽히는지 확인하세요. The quick brown fox.
🔒 계산은 브라우저에서만 이뤄집니다. WCAG 2.1 상대 명도 대비 기준.
WCAG 대비 기준
웹 콘텐츠 접근성 지침(WCAG 2.1)은 텍스트와 배경의 명도 대비를 최소 기준으로 정합니다. 일반 텍스트는 4.5:1(AA), 큰 텍스트(18pt 또는 굵은 14pt 이상)는 3:1(AA)이상이어야 합니다. 더 엄격한 AAA는 각각 7:1, 4.5:1입니다.
이렇게 사용하세요
- 전경색(글자색)과 배경색을 색상 선택기나 HEX 코드로 입력합니다.
- 대비 비율과 AA·AAA 통과 여부, 미리보기를 확인합니다.
- 기준에 못 미치면 색을 더 어둡게/밝게 조정해 대비를 높입니다.
왜 중요한가
색 대비는 웹 접근성 위반에서 가장 흔한 항목입니다. 대비가 충분하면 저시력·색각 이상 사용자는 물론 밝은 환경에서 화면을 보는 모든 사용자의 가독성이 좋아집니다. 이 검사는 브라우저에서만 계산되며 어떤 데이터도 서버로 전송되지 않습니다.
자주 묻는 질문
대비 비율은 얼마 이상이어야 하나요?
일반 텍스트는 WCAG AA 기준 4.5:1 이상, 더 엄격한 AAA는 7:1 이상이어야 합니다. 18pt(굵은 글씨는 14pt) 이상의 큰 텍스트는 AA 3:1, AAA 4.5:1입니다. 버튼 테두리·아이콘 같은 UI 요소는 3:1 이상을 권장합니다.
AA와 AAA의 차이는 무엇인가요?
AA는 대부분의 웹사이트가 맞춰야 하는 표준 수준이고, AAA는 더 높은 접근성을 요구하는 강화 수준입니다. 공공·공식 서비스는 보통 AA를 최소 기준으로 삼습니다.
왜 접근성이 중요한가요?
색 대비가 낮으면 저시력·색각 이상 사용자나 밝은 야외 화면에서 글씨가 잘 안 보입니다. 충분한 대비는 모든 사용자의 가독성을 높이고, 유럽 접근성법·각국 규정 준수에도 필요합니다.