학원 홈페이지의 일반 글자는 배경과의 명도 대비가 4.5:1 이상이어야 W3C 웹 접근성 기준 1.4.3을 충족합니다. 큰 글자는 3:1 이상이면 되고 로고와 순수 장식 글자는 예외입니다. 모집 배너와 버튼 글씨를 점검하는 순서를 정리했습니다.
학원 홈페이지의 일반 글자는 배경과의 명도 대비가 4.5:1 이상이어야 W3C 웹 접근성 기준 1.4.3을 충족합니다. 모집 배너에 옅은 글씨를 얹거나 밝은 색 버튼에 흰 글자를 넣으면 화면을 만든 사람에게는 잘 보여도 시력이 약한 학부모나 햇빛 아래에서 휴대폰을 보는 학부모에게는 글자가 배경에 묻힐 수 있습니다. 느낌이 아니라 비율로 확인해야 하는 이유입니다.
기준은 글자 크기에 따라 두 가지입니다
W3C 웹 콘텐츠 접근성 지침(WCAG) 2.2의 성공 기준 1.4.3 명도 대비(최소)(수준 AA)는 글자와 글자 이미지의 시각적 표현이 최소 4.5:1의 명도 대비를 가져야 한다고 정하고, 다음을 예외로 둡니다.
- 큰 글자: 큰 글자와 큰 글자 이미지는 3:1 이상이면 됩니다.
- 부수적인 글자: 비활성 상태의 사용자 인터페이스 요소에 속한 글자, 순수한 장식인 글자, 누구에게도 보이지 않는 글자, 다른 시각 정보가 중심인 사진 속 글자에는 대비 요구가 없습니다.
- 로고: 로고나 상표명에 속한 글자에는 대비 요구가 없습니다.
같은 문서의 용어 정의에서 큰 글자는 18포인트 이상이거나 굵은 14포인트 이상, 또는 한국어·중국어·일본어 글꼴에서 그에 해당하는 크기입니다. 정의의 주석은 흔한 본문 글꼴에서 14포인트와 18포인트가 기본 본문 크기의 약 120%와 150%에 해당하지만 실제로 쓰는 글꼴마다 확인해야 한다고 덧붙입니다.
명도 대비는 두 색 가운데 밝은 색의 상대 휘도를 L1, 어두운 색을 L2라 할 때 (L1 + 0.05) / (L2 + 0.05)로 계산하며 1:1부터 21:1까지 나옵니다. 정의의 주석은 대비를 평소 사용 상태에서 글자 뒤에 지정된 배경을 기준으로 재고, 배경색을 지정하지 않았다면 흰색으로 본다고 설명합니다.
AI로 생성한 개념 이미지. 실제 학원 사진이 아닙니다.
해설이 짚는 빠뜨리기 쉬운 글자
W3C의 성공 기준 1.4.3 해설은 이 기준의 목적을 중간 정도의 저시력이나 대비 지각이 약한 사람이 대비를 높이는 보조기술 없이도 글을 읽을 수 있게 하는 것이라고 설명합니다. 색상(색조)보다 밝기 차이가 읽기에 중요하므로 계산에서도 색조는 핵심 요소가 아니라고 밝힙니다.
해설은 다음 글자들도 이 기준에 들어간다고 짚습니다.
- 입력칸 안에 미리 적어 둔 예시 글자(placeholder)
- 마우스를 올렸을 때나 키보드로 이동해 초점을 받았을 때 나타나는 글자
- 평소에는 흐리게 두었다가 마우스를 올릴 때만 진해지는 로고 묶음처럼, 처음의 흐린 표시가 꼭 필요하지 않은 경우
반대로 모든 필수 항목을 채우기 전까지 누를 수 없는 제출 버튼처럼 보이지만 조작할 수 없는 비활성 요소는 대비 요구 대상이 아니라고 설명합니다. 또한 계산한 값은 반올림하지 않으며 4.499:1은 4.5:1 기준을 충족하지 못한다고 적고 있습니다. 화면에 보이는 글자 모양보다 브라우저나 화면 코드에서 얻은 글자색과 배경색으로 평가하라는 안내도 있습니다.
실패 사례로는 글자색만 지정하고 배경색을 지정하지 않았거나 그 반대인 경우(F24)와 배경 이미지 때문에 글자 대비가 부족한 경우(F83)가 정리되어 있습니다.
AI로 생성한 개념 이미지. 실제 학원 사진이 아닙니다.
학원 홈페이지에서 점검하는 순서
에듀지오의 운영 권장은 학부모가 실제로 읽어야 하는 글자부터 목록을 만들고 값으로 확인하는 것입니다.
- 모집 배너 문구, '상담 신청'·'수강 신청' 버튼 글자, 시간표 표 안의 글자, 입력칸 예시 글자, 사진 위에 얹은 글자를 목록으로 적습니다.
- 제작자에게 각 글자의 글자색과 배경색 값을 받아 대비 계산 도구로 비율을 구합니다. W3C 해설의 관련 자료 목록에도 대비 분석 도구가 소개되어 있습니다.
- 글자 크기와 굵기를 함께 적고 큰 글자이면 3:1, 그 밖이면 4.5:1과 비교합니다. 값은 반올림하지 않습니다.
- 마우스를 올린 상태와 키보드로 이동한 상태의 글자색도 따로 확인합니다.
- 사진이나 그러데이션 위에 글자를 얹었다면 글자 뒤 배경 가운데 가장 대비가 낮은 부분에서도 기준을 넘는지 봅니다. 넘지 못하면 글자 뒤에 단색 바탕을 깔거나 글자를 사진 밖으로 옮기는 방법을 검토합니다.
이 글은 청주·충북 지역 학원을 포함한 일반적인 홈페이지 점검 방법을 W3C 문서에 따라 정리한 것이며 특정 학원 홈페이지를 진단한 결과가 아닙니다.