텍스트 콘텐츠의 명도 대비

무엇을 요구하나요?

글자색과 배경색의 명도 대비가 충분해야 저시력 사용자, 고령자, 밝은 햇빛 아래에서 화면을 보는 사람도 글자를 읽을 수 있습니다.

글자 크기	최소 대비
일반 글자	4.5 : 1 이상
큰 글자: 18pt(약 24px) 이상, 또는 굵은 14pt(약 18.66px) 이상	3 : 1 이상
화면 확대가 가능하도록 구현한 글자	3 : 1 이상

글자가 들어간 이미지도 같은 기준을 적용합니다.

대비율은 두 색의 상대 휘도(밝기)로 계산하며 1:1(같은 색)부터 21:1(검정과 흰색)까지입니다. 직접 계산하기보다 색상 대비 검사기를 쓰세요.

자주 틀리는 예

1. 연한 회색 안내 문구

입력 칸 아래 도움말, 날짜, 저작권 문구를 연한 회색으로 쓰는 경우가 가장 많습니다.

.help { color: #aaaaaa; } /* 흰 배경에서 약 2.32:1 */

.help { color: #6b6b6b; } /* 흰 배경에서 약 5.3:1 */

2. 브랜드 색 버튼 위 흰 글자

밝은 파랑·초록·주황 버튼에 흰 글자를 쓰면 대비가 부족하기 쉽습니다. 예를 들어 #3182f6 위의 흰 글자는 약 3.7:1로 일반 글자 기준에 못 미칩니다. 버튼 색을 한 단계 어둡게 하거나 글자를 크고 굵게 하세요.

.btn-primary { background: #3182f6; color: #fff; }

.btn-primary { background: #1b64da; color: #fff; } /* 약 5.4:1 */

3. placeholder를 안내 문구로 씀

브라우저 기본 placeholder 색은 대비가 낮은 경우가 많고, 입력하면 사라집니다. 꼭 필요한 안내는 placeholder가 아닌 레이블이나 도움말로 제공하세요. (7.3.2 레이블 제공 참고)

4. 이미지·그라데이션 위의 글자

배경이 이미지나 그라데이션이면 위치마다 대비가 달라집니다. 가장 대비가 낮은 부분을 기준으로 확인하고, 필요하면 글자 뒤에 반투명 단색 배경을 깔아 주세요.

.hero-title { background: rgba(0, 0, 0, 0.6); color: #fff; padding: 0.25em 0.5em; }

확인하는 방법

1. 색상 대비 검사기에 글자색·배경색을 넣으면 대비율과 기준을 넘는 가장 가까운 색을 알려줍니다.
2. 확장 프로그램 페이지 검사는 페이지 안의 글자 대비를 자동으로 찾습니다. 단, 이미지·그라데이션 위 글자는 “확인 필요”로 나오므로 직접 확인하세요.
3. 마우스를 올렸을 때(hover), 초점을 받았을 때, 비활성 상태 등 상태마다 색이 바뀌면 각각 확인하세요.

버튼 테두리·입력 칸 테두리·아이콘처럼 글자가 아닌 요소의 대비(3:1)는 국제 표준 WCAG 2.2의 별도 항목(비텍스트 대비)입니다. KWCAG 이 항목과는 별개로 함께 챙기면 좋습니다.