색상 대비 검사기

옅은 회색 글씨가 흰 배경 위에 놓이면 멋져 보이지만, 막상 읽으려 하면 눈이 피로하고 어떤 사용자에게는 거의 보이지 않습니다. 텍스트가 배경과 얼마나 또렷하게 구분되는지를 수치로 나타낸 것이 **명도 대비(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 이상 권장.
• 대비가 낮으면 저시력·색약 사용자, 밝은 야외 화면에서 글자가 안 보입니다.

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

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

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

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

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

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

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

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

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

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