고대비 모드이란?
다양한 고대비 설정에서 웹 콘텐츠가 어떻게 보이는지 테스트합니다. HTML을 붙여넣거나 URL 스크린샷을 올려 WCAG 준수 대비 모드(Windows 고대비, 반전 색상, 사용자 정의 테마 등)를 미리 확인하세요.
Windows 고대비, 색 반전, 검정 위 노랑 등 프리셋 중에서 고르거나 전경·배경 색을 직접 지정할 수 있습니다. 명암비는 실시간으로 갱신되며 해당 조합이 WCAG의 어떤 등급(AA, AAA, 일반 텍스트, 큰 텍스트)을 통과하거나 실패하는지 알려줍니다. 미리보기에 사용한 HTML은 인라인 스타일이 적용된 상태로 내보낼 수 있습니다.
사용 방법
- 1단계 — HTML이나 일반 텍스트를 에디터에 붙여넣습니다.
- 2단계 — 프리셋에서 대비 모드를 선택합니다: Windows 고대비(흑백), 반전, 검정 배경에 노란 글씨, 또는 사용자 정의 색상.
- 3단계 — 실시간 미리 보기에서 가독성을 확인합니다. 대비 비율 검사기로 텍스트 요소의 WCAG AA/AAA 준수 여부를 검증하세요.
사용 시기
- 마케팅 캠페인을 띄우기 전 랜딩 페이지의 WCAG AA를 점검할 때.
- Windows 고대비 모드에서 포커스 표시와 아이콘 전용 버튼이 보이는지 확인할 때.
- 브랜드 배경 위에서 4.5:1이 나오는 본문 색을 고를 때.
결과
개발자가 내비게이션 바 HTML을 붙여넣고 Windows 고대비 모드로 전환합니다. 아이콘만 있는 버튼이 검정 배경에서 보이지 않는 걸 확인하고 텍스트 레이블을 추가합니다.
자주 묻는 질문
- WCAG AA가 요구하는 명암비는?
- 일반 본문은 4.5:1, 큰 글자(18pt 일반 또는 14pt 굵게 이상)는 3:1입니다. AAA는 각각 7:1과 4.5:1로 기준이 올라갑니다. 검사기는 각 조합이 통과하거나 실패하는 등급을 라벨로 표시합니다.
- Windows 고대비 모드에서 아이콘 버튼이 사라지는 이유는?
- Windows가 색상을 시스템 토큰으로 바꾸고 배경 이미지를 무시하기 때문입니다. background-image나 fill만 사용한 SVG로 그린 아이콘은 보이지 않게 됩니다. 인라인 SVG에 currentColor를 stroke로 적용하거나, 보이는 텍스트 레이블을 함께 두세요.
- 검정 위 노랑은 실제 접근성 테마인가요?
- 맞습니다. 초창기 Windows 고대비 테마 가운데 하나이며, 황반 변성 등이 있어도 노랑은 선명하게 인지되기 때문에 저시력 사용자들이 지금도 즐겨 사용합니다. 어떤 분들은 순백 위 검정보다 선호하기도 합니다.
- WCAG AA를 통과하면 페이지가 접근 가능하다고 볼 수 있나요?
- 명암비는 WCAG의 한 부분일 뿐입니다. 키보드 탐색, 시맨틱 HTML, 대체 텍스트, 폼 레이블, 포커스 표시, 모션 감소 설정 존중도 필요합니다. 이 검사는 색에 관한 부분만 평가합니다.
- 브랜드 오렌지가 흰 배경에서 실패하는 이유는?
- 오렌지, 노랑, 라임 같은 채도 높은 중간색은 휘도가 높아 흰 배경에서 3:1 아래로 떨어지는 경우가 많습니다. 본문에서는 오렌지를 더 어둡게 조정하거나, 3:1만 충족하면 되는 배경이나 큰 헤드라인에만 사용하세요.