글자가 잘 보이려면 배경과 대비가 얼마나 있어야 할까요?
본문 글자는 배경과의 대비가 4.5:1 이상, 큰 글자(18pt 이상 또는 14pt 굵은 글씨)는 3:1 이상이면 웹 접근성 기준(WCAG 2 AA)을 통과해요. 더 엄격한 AAA 기준은 본문 7:1, 큰 글자 4.5:1이에요.
기준 한눈에 보기
| 본문 글자 | 큰 글자 | |
|---|---|---|
| AA (기본 기준) | 4.5:1 이상 | 3:1 이상 |
| AAA (더 엄격한 기준) | 7:1 이상 | 4.5:1 이상 |
‘큰 글자’는 18포인트 이상, 또는 14포인트 이상의 굵은 글씨를 말해요. 버튼 테두리, 아이콘, 그래프 선처럼 글자가 아닌 요소도 주변 색과 3:1 이상 대비가 나야 해요.
대비는 ‘밝기 차이’예요
대비는 색상(빨강이냐 파랑이냐)이 아니라 밝기의 차이로 따져요. 그래서 색이 완전히 달라 보여도 밝기가 비슷하면 대비가 낮아요. 다홍과 회색은 서로 전혀 다른 색이지만, 흰 바탕 위에서는 둘 다 4.4:1 정도로 본문 기준에 조금 못 미쳐요.
우리 색이름으로 본 예
가나다 Aa
가나다 Aa
가나다 Aa
가나다 Aa
가나다 Aa
가나다 Aa
노랑, 하늘색, 연두색처럼 밝은 색은 흰 바탕 글자로 쓰기 어려워요. 대신 남색이나 먹색 같은 어두운 바탕 위에 올리면 아주 잘 보여요. 개나리색 바탕에 남색 글자처럼요.
대비를 높이는 방법
- 글자 색을 같은 계열에서 더 어두운 이름으로 바꿔요. 예: 하늘색 대신 바다색.
- 밝은 색은 글자 대신 바탕이나 강조 띠로 쓰고, 글자는 어둡게 해요.
- 글자를 키우고 굵게 하면 기준이 3:1로 낮아져요. 제목에 밝은 색을 쓰고 싶을 때 쓸 만해요.
컬러바다의 모든 색이름 페이지와 HEX 결과 페이지에는 그 색을 바탕으로 검은 글자와 흰 글자를 올렸을 때의 대비가 함께 나와요.
자주 묻는 질문
- 대비 4.5:1은 무슨 뜻인가요?
- 두 색의 밝기 비율이 4.5 대 1이라는 뜻이에요. 1:1은 같은 밝기, 21:1은 검정과 흰색처럼 가장 큰 대비예요.
- 버튼이나 아이콘에도 기준이 있나요?
- 있어요. 버튼 테두리, 아이콘, 그래프 같은 요소는 주변 색과 3:1 이상 대비가 나야 해요(WCAG 2.1 기준 1.4.11).
- 로고에도 대비 기준을 지켜야 하나요?
- 로고와 장식용 글자는 대비 기준에서 빠져요. 다만 읽혀야 하는 글자라면 지키는 게 좋아요.