디자인
색상 대비, 글자가 잘 보이려면 몇 대 1이어야 할까
4.5:1 같은 대비율이 무슨 뜻인지, 일반 글자·큰 글자·버튼에 대한 WCAG 기준, 통과하거나 떨어지는 실제 색 조합을 수치로 정리했어요.
대비율이란
대비율은 두 색의 밝기를 비교한 값으로, 1:1(같은 색, 안 보임)부터 21:1(흰 바탕에 검정)까지 있어요. 계산에는 *상대 휘도*를 쓰는데, 사람 눈이 초록에 훨씬 민감해서 초록의 비중이 파랑보다 훨씬 커요. 그래서 진한 파랑은 강렬해 보여도 대비가 약할 수 있고, 흰 바탕의 노란 글씨는 거의 읽을 수 없어요.
공식은 (밝은 색 휘도 + 0.05) ÷ (어두운 색 휘도 + 0.05)예요. 색상 코드 변환·팔레트에서 원하는 두 색의 대비율을 바로 계산해 줘요.
기억할 기준
웹 콘텐츠 접근성 지침(WCAG)은 다음 최소값을 정해 두고 있어요.
- 일반 본문 글자: 4.5:1 (AA 등급)
- 큰 글자(보통 굵기 24px 이상, 굵게 약 18.7px 이상): 3:1 (AA)
- 아이콘, 입력 칸 테두리처럼 알아봐야 하는 화면 요소: 3:1 (WCAG 2.1)
- 더 엄격한 AAA 등급: 일반 글자 7:1, 큰 글자 4.5:1
법이나 회사 정책은 대부분 AA를 기준으로 해요. 국내 웹 접근성 인증에서 쓰는 한국형 웹 콘텐츠 접근성 지침(KWCAG)도 본문 글자에 4.5:1을 요구해요. 로고와 장식용 글자는 예외예요.
실제 색 조합 계산 결과
- 흰 바탕에 검정: 21:1, 최댓값
- 흰 바탕에 거의 검정 #1d1d1f: 16.83:1
- 흰 바탕에 회색 #595959: 7.0:1, AAA를 겨우 통과
- 흰 바탕에 회색 #767676: 4.54:1, 본문 AA를 통과하는 가장 밝은 무채색 회색
- 한 단계 밝은 #777777: 4.48:1, 탈락. 눈으로는 거의 구분이 안 되지만 기준은 엄격해요.
- 흰 바탕에 파랑 #0071e3: 4.70:1, AA 통과. 같은 파랑을 거의 검정 #1d1d1f 바탕에 쓰면 3.58:1이라 큰 글자나 버튼 테두리엔 괜찮지만 본문엔 부족해요.
- 빨강 #ff0000 바탕에 흰 글씨: 4.0:1, 일반 글자는 탈락, 큰 글자는 통과
- 주황 #ff9f0a 바탕에 흰 글씨: 2.06:1, 모두 탈락. 같은 주황에 검정 글씨는 10.22:1
모든 대비율은 WCAG 공식으로 직접 계산했고, 색상 코드 변환·팔레트에서도 같은 값이 나와요.
접근성 규정 때문만은 아니에요
대비가 낮으면 저시력인 사람만 불편한 게 아니에요. 햇빛 아래 휴대폰, 오래된 프로젝터, 배터리를 아끼려고 밝기를 낮춘 화면에서는 누구나 읽기 힘들어요. 디자이너 모니터에서 세련돼 보이던 연회색 글씨가 회의실 화면에서는 사라지기도 해요. 4.5:1을 지키면 실제 환경에서도 글자가 살아남아요.
기준에 못 미칠 때 고치는 법
- 글자는 더 어둡게, 배경은 더 밝게. 색상(Hue)은 그대로 두고 HSL의 명도만 낮추세요. 변환기는 선택한 색의 밝은·어두운 단계를 코드와 함께 보여 줘요.
- 주황, 노랑, 연두처럼 밝은 색 위에는 흰 글씨 대신 검정 글씨를 쓰세요.
- 글자를 키우세요. 브랜드 색이 3:1은 넘지만 4.5:1이 안 된다면 제목과 버튼에 쓰고, 본문에는 더 어두운 단계를 쓰세요.
- 오류를 빨간색으로만 표시하는 것처럼 색에만 의미를 맡기지 마세요. 아이콘이나 글자를 함께 쓰세요.