색상 대비와 WCAG 기준 — 접근성 좋은 텍스트 색 고르기

옅은 회색 글씨가 흰 배경 위에 놓이면 멋져 보이지만, 막상 읽으려 하면 눈이 피로하고 어떤 사용자에게는 거의 보이지 않습니다. 텍스트가 배경과 얼마나 또렷하게 구분되는지를 수치로 나타낸 것이 **명도 대비(contrast ratio)**이고, 웹 접근성 표준인 WCAG는 이 값에 최소 기준을 정해 두었습니다. 명도 대비가 무엇이고 WCAG AA·AAA 기준은 어떻게 다른지, 큰 텍스트에는 왜 예외가 있는지 정리합니다. 실제 색 조합이 기준을 통과하는지는 색상 대비 검사기로 바로 확인할 수 있습니다.

한눈에 보기

• 명도 대비는 전경색(글자)과 배경색의 상대 밝기 비로, 1:1(완전히 같음)부터 21:1(순수한 검정과 흰색)까지의 범위를 가집니다.
• 일반 텍스트: AA는 4.5:1 이상, AAA는 7:1 이상.
• 큰 텍스트(약 18pt 이상, 또는 14pt 이상 굵게): AA는 3:1, AAA는 4.5:1로 완화됩니다.
• 비텍스트 요소(아이콘, UI 경계 등): 3:1 이상 권장.
• 대비가 낮으면 저시력·색약 사용자, 밝은 야외 화면에서 글자가 안 보입니다.

명도 대비란

명도 대비는 두 색의 상대 밝기(relative luminance) 비율입니다. 더 밝은 색의 밝기에 0.05를 더한 값을, 더 어두운 색의 밝기에 0.05를 더한 값으로 나눠 계산합니다. 결과는 항상 더 큰 값을 앞에 두어 L1:L2 형태로 적습니다.

가능한 범위는 1:1부터 21:1까지입니다. 두 색이 완전히 같으면 1:1이고, 순수한 검정(#000000)과 순수한 흰색(#FFFFFF)을 조합하면 최댓값인 21:1이 됩니다. 숫자가 클수록 글자와 배경이 또렷하게 구분되어 읽기 쉽다는 뜻입니다. 색조(빨강·파랑 같은 색상 자체)가 아니라 밝기 차이를 기준으로 한다는 점이 중요합니다. 그래서 채도가 강해도 밝기가 비슷한 두 색은 대비가 낮게 나옵니다.

WCAG 기준 (AA·AAA)

WCAG 2.1은 텍스트의 크기와 준수 수준(AA·AAA)에 따라 최소 대비를 다르게 정합니다. AA는 일반적으로 권장되는 기본 수준이고, AAA는 더 엄격한 강화 수준입니다.

대부분의 웹사이트와 공공 서비스는 AA를 기준으로 삼습니다. 즉 본문 글자는 배경과 4.5:1 이상의 대비를 확보해야 합니다. 색 조합이 이 값을 넘는지 일일이 계산하기는 번거로우므로, 색상 대비 검사기에 전경색과 배경색을 넣어 AA·AAA 통과 여부를 한 번에 확인하는 편이 빠릅니다.

큰 텍스트 예외

같은 색 조합이라도 글자가 크면 형태를 알아보기 쉬워서, WCAG는 큰 텍스트에 완화된 기준을 적용합니다. 여기서 "큰 텍스트"란 약 18pt(약 24px) 이상의 일반 글자, 또는 14pt(약 19px) 이상이면서 굵게(bold) 표시된 글자를 말합니다.

이 조건을 만족하면 AA 기준이 4.5:1에서 3:1로, AAA 기준이 7:1에서 4.5:1로 낮아집니다. 제목이나 큰 안내 문구처럼 글자가 큰 영역에서는 다소 옅은 색을 써도 통과할 수 있다는 의미입니다. 다만 본문처럼 작은 글자에는 이 예외가 적용되지 않으므로, 같은 색이라도 작은 글씨에서는 더 높은 대비가 필요합니다.

접근성이 중요한 이유

명도 대비는 단순한 디자인 취향이 아니라 읽을 수 있는가의 문제입니다. 대비가 낮으면 다음과 같은 상황에서 글자가 사실상 보이지 않습니다.

• 저시력 사용자: 흐릿하게 보이는 글자를 옅은 색으로 두면 내용을 거의 읽지 못합니다.
• 색약·색맹 사용자: 색상만으로 정보를 구분하기 어렵고, 밝기 차이가 작으면 더 불리합니다.
• 밝은 야외 화면: 햇빛 아래에서는 화면 명암이 떨어져, 실내에서 멀쩡하던 옅은 글자가 사라집니다.

대비를 충분히 확보하면 이런 사용자뿐 아니라 일반 사용자도 눈의 피로 없이 더 편하게 읽습니다. 접근성을 높이는 일이 결국 모두에게 좋은 경험으로 이어지는 셈입니다.

자주 묻는 질문

명도 대비는 어떻게 계산하나요?

두 색의 상대 밝기에 각각 0.05를 더한 뒤, 큰 값을 작은 값으로 나눕니다. 직접 계산하기 번거롭다면 색상 대비 검사기에 두 색을 넣으면 비율과 기준 통과 여부를 바로 알려 줍니다.

AA와 AAA 중 무엇을 목표로 해야 하나요?

대부분의 사이트는 AA(일반 텍스트 4.5:1)를 기본 목표로 삼습니다. 공공·의료처럼 폭넓은 사용자를 고려해야 하는 서비스라면 가능한 범위에서 AAA(7:1)까지 맞추는 것이 좋습니다.

큰 텍스트의 정확한 기준은 무엇인가요?

약 18pt 이상의 일반 글자, 또는 14pt 이상이면서 굵게 표시된 글자를 큰 텍스트로 봅니다. 이때 AA 기준은 3:1, AAA 기준은 4.5:1로 완화됩니다.

아이콘이나 버튼 테두리에도 대비 기준이 있나요?

네. 텍스트가 아닌 아이콘, 입력란 경계, 그래프 요소 등도 의미를 전달한다면 3:1 이상의 대비를 확보하는 것이 권장됩니다.

대비가 너무 높아도 괜찮나요?

순수한 검정과 흰색(21:1)은 일부 사용자에게 눈부심을 유발할 수 있어, 아주 짙은 회색을 본문에 쓰기도 합니다. 다만 기준을 못 넘기는 낮은 대비보다는 높은 대비가 훨씬 안전합니다.

마무리

명도 대비는 글자와 배경의 밝기 차이를 1:1~21:1로 나타낸 값이고, WCAG는 일반 텍스트에 AA 4.5:1·AAA 7:1, 큰 텍스트에 AA 3:1·AAA 4.5:1을 요구합니다. 색을 고를 때 이 기준만 챙겨도 훨씬 더 많은 사람이 편하게 읽을 수 있습니다. 작업 중인 색 조합이 기준을 통과하는지 색상 대비 검사기로 확인하며 접근성 좋은 화면을 만들어 보세요.