알아두면 좋은 정보2026-11-11아브레다 콘텐츠

글자색과 배경색 대비 확인하는 법: 버튼·본문 디자인 점검

HEX 색상값으로 글자와 배경의 명도 대비를 비교하고 실제 화면에서 읽기 어려운 경우를 점검하는 순서.

무엇이 문제인가요?

밝은 회색 글자와 흰 배경은 세련되어 보일 수 있지만 작은 글씨에서는 알아보기 어려워집니다. 대비 수치만 맞춘다고 모든 이용자가 읽을 수 있는 것은 아니므로 실제 글꼴 크기와 상태 색상까지 확인해야 합니다.

실제 화면의 글자색과 배경색을 확인하세요
디자인 파일이 아닌 화면에서 사용된 전경색과 배경색의 HEX 값을 확인하세요. 버튼의 기본·호버·비활성 상태처럼 배경이 달라지는 요소는 각각 확인해야 합니다.
문자 크기에 해당하는 기준을 확인하세요
W3C WCAG의 문자 대비 기준은 일반 문자와 큰 문자의 조건이 다릅니다. 문자가 아닌 아이콘이나 경계선은 별도 기준이 있으므로 같은 검사 결과를 모든 요소에 적용하지 마세요.
대체 색상을 적용하고 기기 화면에서 다시 보세요
대비를 높여도 얇은 글꼴, 배경 이미지 위의 텍스트, 밝기와 눈부심 문제가 남을 수 있습니다. 실제 모바일 화면과 키보드 포커스 상태에서 읽고 구분되는지 확인하세요.

브라우저 개발자 도구나 접근성 검사 도구로도 색상 대비를 확인할 수 있습니다. 실제 사용되는 CSS 값을 검증한다는 점이 중요합니다.

합격 판정은 특정 색 조합에 대한 계산일 뿐 웹페이지 전체의 WCAG 적합성을 인증하지 않습니다. 배경 이미지와 글꼴 크기·상호작용 상태를 별도로 점검해야 합니다.

대비 수치가 통과하면 웹 접근성 검사가 끝난 건가요?

아니요. 키보드 사용, 대체 텍스트, 초점 표시, 오류 안내 등 다른 접근성 항목도 각각 확인해야 합니다.