색상 대비
배경과 전경 콘텐츠(주로 텍스트죠) 사이의 색상 대비는 가독성을 보장하기 위해 충분히 커야 해요.
다양한 시각 능력에 맞는 읽기 쉬운 인터페이스를 디자인할 때, WCAG 가이드라인은 다음과 같은 대비 비율을 권장하고 있어요:
| 콘텐츠 유형 | 최소 비율 (AA 등급) | 향상된 비율 (AAA 등급) |
|---|---|---|
| 본문 텍스트 | 4.5 : 1 | 7 : 1 |
| 큰 텍스트 (본문 텍스트보다 120-150% 더 큼) | 3 : 1 | 4.5 : 1 |
| 아이콘 및 그래프와 같은 활성 사용자 인터페이스 구성 요소 및 그래픽 객체 | 3 : 1 | 정의되지 않음 |
이 비율들은 비활성 컨트롤, 로고타입, 또는 순수 장식용 텍스트와 같은 "우발적인" 텍스트에는 적용되지 않아요.
자세한 정보는 아래의 해결 방법 섹션을 참고하세요.
사이트에 좋은 색상 대비를 갖추는 것은 모든 사용자에게 도움이 되지만, 특정 유형의 색맹이나 유사한 조건을 가진 사용자에게 특히 유익해요. 이런 사용자들은 낮은 대비를 경험하고 유사한 색상을 구별하는 데 어려움을 겪거든요. 이들은 그런 조건이 없는 사람들만큼 밝은 영역과 어두운 영역을 쉽게 보지 못하기 때문에 가장자리, 테두리, 그리고 다른 세부 사항을 보는 데 문제가 있어요.
웹사이트에 멋진 디자인을 갖는 것도 좋지만, 사용자가 콘텐츠를 읽을 수 없다면 그 디자인은 아무 쓸모가 없어요.
💡 강사 팁: 접근성(Accessibility)은 단순히 장애가 있는 사람들만을 위한 게 아니에요. 누구나 햇빛 아래에서 스마트폰을 볼 때 화면이 잘 안 보이는 경험을 해봤을 거예요. 바로 그럴 때 색상 대비가 중요하죠! 실무에서는 디자이너와 협업할 때 이 대비 비율을 꼭 체크해야 해요. 디자인이 아무리 예뻐도 읽을 수 없으면 의미가 없거든요.
이 문서의 내용
예제
몇 가지 HTML과 CSS 코드를 살펴볼까요:
<div class="good">Good contrast</div>
<div class="bad">Bad contrast</div>div {
/* 일반적인 div 스타일 */
}
.good {
background-color: #5a80a9;
}
.bad {
background-color: #400064;
}두 텍스트 모두 기본 검은색 색상을 가지고 있어요.
좋은 대비
"good" <div>는 네온 블루 배경을 가지고 있어서 텍스트를 읽기 쉽게 만들어줘요:
<div class="good">Good contrast</div>div {
font-family: sans-serif;
text-align: center;
font-size: 2rem;
font-weight: bold;
width: 250px;
padding: 30px;
border-radius: 20px;
box-shadow: 4px 4px 4px black;
}
.good {
background-color: #5a80a9;
}💡 강사 팁: 이 예제를 보면 배경색 #5a80a9 (중간 톤의 파란색)와 검은색 텍스트가 충분한 대비를 만들어내는 걸 알 수 있어요. 실무에서는 브랜드 컬러를 사용하면서도 이런 대비를 맞춰야 하는 경우가 많은데, 색상의 명도를 조절하면 대부분 해결할 수 있어요.
나쁜 대비
반면에 "bad" <div>는 매우 어두운 보라색 배경을 가지고 있어서 텍스트를 읽기 훨씬 어려워요:
<div class="bad">Bad contrast</div>div {
font-family: sans-serif;
text-align: center;
font-size: 2rem;
font-weight: bold;
width: 250px;
padding: 30px;
border-radius: 20px;
box-shadow: 4px 4px 4px black;
}
.bad {
background-color: #400064;
}💡 강사 팁: #400064는 아주 어두운 보라색이라서 검은색 텍스트와의 대비가 충분하지 않아요. 이런 어두운 배경에는 밝은 색 텍스트를 사용해야 해요. 실제로 많은 초보 개발자들이 "어두운 배경 = 멋있어 보임"이라고 생각하는데, 접근성을 고려하지 않으면 사용자 경험이 나빠질 수밖에 없어요.
해결 방법
웹사이트의 색상 구성표를 선택할 때는 대비가 좋은 전경색과 배경색을 선택하세요. 디자인 제약 내에서 색상 대비를 가능한 한 좋게 만드세요 — 이상적으로는 AAA 등급을 목표로 하되 (아래 1.4.6 참조), 최소한 AA 등급은 충족하세요 (아래 1.4.3 참조).
비디오나 애니메이션과 같은 비텍스트 콘텐츠를 포함하는 경우, 1.4.11을 따라야 해요 (다시 아래 참조).
색상을 선택하면서 대비를 확인하려면 WebAIM의 색상 대비 검사기와 같은 도구를 사용하세요.
또한 Firefox의 개발자 도구를 사용하여 즉석에서 색상 대비를 확인할 수도 있어요 — 접근성 검사기 가이드를 참조하고, 특히 접근성 문제 확인 섹션을 보세요. 설명 섹션의 라이브 예제에서 사용해 보세요.
💡 강사 팁: 실무에서는 다양한 대비 검사 도구를 사용하게 될 거예요. 제 경험상 다음 도구들이 정말 유용했어요:
브라우저 개발자 도구: Chrome, Firefox 모두 접근성 검사 기능이 내장되어 있어요. 개발하면서 실시간으로 확인하기 좋아요.
Figma/Adobe XD 플러그인: 디자인 단계에서 미리 확인하면 나중에 수정하는 수고를 덜 수 있어요.
자동화 도구: Lighthouse, axe DevTools 같은 자동화 도구로 전체 페이지를 한 번에 검사할 수 있어요.
개인적으로는 디자인 단계에서부터 접근성을 고려하는 걸 추천드려요. 나중에 고치려면 시간도 오래 걸리고 디자인도 망가질 수 있거든요!
관련 WCAG 성공 기준
1.4.3 최소 대비 (AA)
배경과 전경 콘텐츠 사이의 색상 대비는 가독성을 보장하기 위해 최소 수준이어야 해요:
- 텍스트와 배경은 최소 4.5:1의 대비 비율을 가져야 해요.
- 제목(또는 단순히 더 큰) 텍스트는 최소 3:1의 비율을 가져야 해요. 큰 텍스트는 최소 18pt, 또는 14pt 볼드로 정의돼요.
1.4.6 향상된 대비 (AAA)
이것은 1.4.3 기준을 따르고 보완해요.
- 텍스트와 배경은 최소 7:1의 대비 비율을 가져야 해요.
- 제목(또는 단순히 더 큰) 텍스트는 최소 4.5:1의 비율을 가져야 해요.
1.4.11 비텍스트 대비 (AA)
사용자 인터페이스 구성 요소와 그래픽 객체에 대해 최소 3:1의 색상 대비 비율이 있어야 해요.
💡 강사 팁: WCAG 레벨에 대해 간단히 설명하자면:
- Level A: 가장 기본적인 웹 접근성 요구사항
- Level AA: 대부분의 법적 요구사항이 요구하는 수준 (실무에서 목표로 해야 할 최소 기준)
- Level AAA: 최고 수준의 접근성 (모든 상황에 적용하기는 어렵지만 가능하면 따르는 게 좋아요)
실무에서는 최소한 AA 등급을 맞추는 걸 목표로 하되, 중요한 콘텐츠나 주요 버튼 같은 경우는 AAA를 노려보는 게 좋아요. 특히 금융이나 의료 서비스처럼 중요한 정보를 다루는 사이트라면 더욱 그렇죠!
관련 문서
도움이 되셨나요?
이 페이지는 2025년 6월 23일에 MDN 기여자들에 의해 마지막으로 수정되었어요.
