WCAG 2.1 / 2.2 기준에 따른 명도 대비 검사
웹 콘텐츠를 제작할 때 텍스트와 배경 사이의 명도 대비를 확보하는 것은 시각 장애인, 저시력자, 고령자뿐만 아니라 모든 사용자의 가독성을 높이는 핵심 요소입니다. 본 검사기는 웹 콘텐츠 접근성 지침인 WCAG 2.1 및 WCAG 2.2 표준 공식을 사용하여 입력한 두 색상 간의 명도 대비 비율을 계산하고, 각 기준에 따른 적합 여부를 실시간으로 판정합니다.
초기 설정값은 텍스트 색상 #4f46e5, 배경 색상 #ffffff로 지정되어 있으며, 이 조합의 명도 대비 비율은 6.29:1입니다. 사용자는 필요에 따라 두 색상을 자유롭게 변경하며 기준 충족 여부를 확인할 수 있습니다.
입력 가능한 색상 포맷 및 편의 기능
검사기에는 웹 디자인과 개발에서 널리 쓰이는 다양한 색상 포맷을 입력할 수 있습니다. 지원하는 형식은 다음과 같습니다:
- Hex 값: 예시로
#1a1a1a와 같은 16진수 코드를 입력합니다. - rgb() 값: 예시로
rgb(26, 26, 26)과 같은 RGB 색상 값을 입력합니다. - hsl() 값: 색상, 채도, 명도를 나타내는 HSL 값을 입력합니다.
텍스트 색상 입력란에 유효하지 않은 값을 입력하면 "#1a1a1a 또는 rgb(26, 26, 26)와 같이 올바른 텍스트 색상을 입력해 주세요."라는 메시지가 표시됩니다. 마찬가지로 배경 색상 입력란에 잘못된 값을 넣으면 "#ffffff 또는 rgb(255, 255, 255)와 같이 올바른 배경 색상을 입력해 주세요."라는 오류 메시지가 나타납니다.
또한, 인터페이스에 마련된 전환 버튼을 사용하면 클릭 한 번으로 텍스트 색상과 배경 색상을 서로 맞바꾸어 대비를 즉각적으로 재검사할 수 있습니다.
명도 대비 비율 범위와 텍스트 크기별 기준
색상 간의 명도 대비 비율은 대비가 전혀 없는 상태인 1:1부터, 흰색 배경 위에 검은색 글씨를 배치했을 때 나타나는 최대 대비인 21:1까지의 범위로 계산됩니다. WCAG 규격은 텍스트의 크기와 중요도에 따라 서로 다른 통과 기준을 제시합니다.
일반 글씨
일반적인 크기의 본문 텍스트는 가독성을 위해 더 높은 대비가 요구됩니다.
- AA 수준: 최소 4.5:1 이상의 명도 대비 비율이 필요합니다.
- AAA 수준: 최소 7:1 이상의 명도 대비 비율이 필요합니다.
큰 글씨
큰 글씨는 상대적으로 인지하기 쉬우므로 완화된 기준이 적용됩니다. 접근성 지침에서 정의하는 큰 글씨의 기준은 18pt(약 24px) 이상이거나, 굵은 글씨(bold)인 경우 14pt(약 18.5px) 이상입니다.
- AA 수준: 최소 3:1 이상의 명도 대비 비율이 필요합니다.
- AAA 수준: 최소 4.5:1 이상의 명도 대비 비율이 필요합니다.
UI 및 그래픽 요소 기준과 최종 판정
웹 페이지 내의 버튼 테두리, 입력창 경계선, 아이콘 등 UI 및 그래픽 요소 역시 비시각적 정보 전달을 위해 적절한 대비가 필요합니다.
- UI 및 그래픽 요소: 이 항목은 AA와 AAA의 구분 없이 단일 기준인 3:1 이상의 명도 대비 비율을 요구합니다. 도구의 결과 화면에서도 두 가지 수준으로 나뉘지 않고 단 하나의 통과 여부만 표시됩니다.
검사기는 입력된 두 색상의 대비를 분석하여 다음과 같은 최종 판정 요약 메시지를 제공합니다:
- "일반 글씨 기준 AA 및 AAA를 모두 통과합니다."
- "일반 글씨 기준 AA를 통과합니다."
- "큰 글씨 기준으로만 AA를 통과합니다."
- "AA 최소 기준 미달입니다. 대비를 더 높여 주세요."
브라우저 내 로컬 처리 및 개인정보 보호
본 검사기를 사용할 때 입력하는 모든 색상 데이터와 검사 프로세스는 외부 서버로 전송되지 않고 사용자의 웹 브라우저 내에서 직접 실행됩니다. BroBroGo 서버로 어떠한 데이터도 업로드되지 않으므로 작업 중인 디자인 명세나 색상 정보를 안심하고 검사할 수 있습니다.
자주 묻는 질문 (FAQ)
Q. AA 및 AAA 판정 결과는 무엇을 의미하나요?
A. AA는 대부분의 웹사이트가 목표로 하는 수준으로, 일반 텍스트는 최소 4.5:1, 큰 글씨는 3:1 이상의 대비가 필요합니다. AAA는 더 엄격한 기준으로, 일반 텍스트는 7:1, 큰 글씨는 4.5:1 이상이어야 합니다. 명도 대비 비율은 1:1(대비 없음)부터 21:1(흰색 배경에 검은색 글씨)까지입니다.
Q. 큰 글씨의 기준은 무엇인가요?
A. 18pt(약 24px) 이상이거나, 굵은 글씨(bold)인 경우 14pt(약 18.5px) 이상의 텍스트를 말합니다. 큰 글씨는 대비가 낮아도 가독성이 유지되므로, 일반 텍스트보다 완화된 기준인 AA(3:1 이상) 및 AAA(4.5:1 이상)를 적용받아 통과할 수 있습니다.
Q. 어떤 색상 포맷을 입력할 수 있나요?
A. #1a1a1a 같은 hex 값, rgb(26, 26, 26) 같은 RGB 값, 또는 HSL 값을 입력하거나 색상 상자를 클릭해 직접 선택할 수 있습니다. 전환 버튼을 누르면 글자 색상과 배경 색상이 서로 바뀝니다.
Q. 이 도구는 WCAG 2 기준인가요, 아니면 최신 APCA 방식인가요?
A. 본 도구는 현재 웹 접근성 표준 및 심사에서 기준으로 삼는 WCAG 2.1 / 2.2 공식을 사용합니다. APCA는 WCAG 3를 위해 초안이 작성 중인 최신 지각적 대조 방식입니다. 유망한 기술이지만 아직 공식 표준 규격이 아니므로, 본 도구의 통과 여부 판정에는 사용되지 않습니다.