색 대비 검사기 (WCAG 명도대비)
글자색·배경색의 명도대비를 재고 AA·AAA 통과 여부를 확인
HEX·RGB·HSL 을 받습니다
HEX·RGB·HSL 을 받습니다
큰 글자 미리보기 (Aa 한글)
일반 텍스트 미리보기입니다. 이 문장이 편하게 읽히는지 눈으로 확인하세요. The quick brown fox. 0123456789
대비는 “밝기의 차이”를 비율로 잰 것입니다
글자가 읽히는지 아닌지는 색이 예쁜지가 아니라 글자색과 배경색의 밝기가 얼마나 차이 나는지에 달려 있습니다. 이 차이를 비율로 나타낸 것이 명도대비 (contrast ratio)입니다. 두 색이 완전히 같으면 1:1(안 보임), 순수한 검정과 흰색이면 최대 21:1입니다.
웹 접근성 지침 WCAG는 이 비율에 최소선을 그었습니다. 저시력자·고령자· 야외의 밝은 화면에서도 읽히려면 일반 텍스트는 4.5:1 이상이어야 합니다. 국내 공공·금융 사이트는 웹 접근성 인증에서 이 기준을 점검받습니다. 위 검사기는 글자색과 배경색을 넣으면 그 비율과 통과 여부를 바로 보여 줍니다.
기준표: AA와 AAA, 일반과 큰 글자
일반 텍스트 큰 텍스트(18pt+ / 14pt+ 굵게)
AA (최소) 4.5 : 1 3 : 1
AAA (향상) 7 : 1 4.5 : 1큰 글자의 기준이 낮은 건 획이 두꺼워 같은 대비라도 더 잘 읽히기 때문입니다. 실무에서는 본문은 AA(4.5:1)를 최소선으로 잡고, 제목처럼 큰 글자는 3:1만 넘겨도 됩니다. 아이콘·그래프 같은 비텍스트 요소도 3:1이 기준입니다.
왜 단순 평균이 아니라 ‘휘도’인가
여기가 대충 만든 검사기와 정확한 검사기가 갈리는 지점입니다. 화면의 0~255는 빛의 양이 아니라 감마 인코딩된 값입니다. 128은 흰색의 절반 밝기가 아니라 실제로는 약 21% 밝기입니다. 게다가 사람 눈은 색마다 감도가 달라서, 초록에 71%, 빨강에 21%, 파랑에는 7%만 반응합니다.
그래서 0~255를 그냥 평균 내면 실제로는 안 보이는 조합을 “통과”라고 말하는 최악의 오류가 납니다. 예를 들어 순수한 파랑(#0000FF)은 휘도가 0.07밖에 안 돼서, 흰 글씨는 통과하지만 검은 글씨는 처참하게 떨어집니다 — 단순 평균은 이걸 못 봅니다. 이 검사기는 감마 인코딩을 풀고(linearize) 눈의 감도로 가중한 WCAG 상대 휘도로 계산하므로, 화면에 보이는 대로의 판정을 냅니다.
실무에서 가장 흔한 함정: 연한 회색 글씨
디자인 시안에서 자주 보이는 흰 배경 위 연한 회색 글씨는 감성적으로는 세련돼 보이지만 대비가 부족한 경우가 많습니다.
- 흰색 위
#999999→ 약 2.8:1 (불합격) - 흰색 위
#767676→ 약 4.5:1 (AA 일반 통과 경계) - 흰색 위
#595959→ 약 7:1 (AAA 통과)
보조 설명·placeholder·비활성 텍스트가 특히 이 함정에 잘 빠집니다. “연하게”를 원하더라도 #767676보다 어둡게 유지하면 최소한 읽히기는 합니다. 색을 조정할 때 HEX·RGB·HSL을 오가며 밝기를 미세하게 낮추는 일은 색상 변환기가 도와줍니다 — 거기서도 흰·검 대비를 같이 보여 주지만, 이 도구는 임의의 두 색을 직접 맞대어 볼 때 씁니다.
자주 묻는 질문
- 명도대비 4.5:1은 무슨 뜻인가요?
- 글자색과 배경색의 밝기 차이를 비율로 나타낸 값입니다. 1:1은 두 색이 완전히 같아 글자가 안 보이는 상태, 21:1은 순수한 검정과 흰색의 최대 대비입니다. WCAG(웹 콘텐츠 접근성 지침)는 일반 텍스트가 최소 4.5:1을 넘어야 저시력자·고령자도 읽을 수 있다고 봅니다. 이 값은 눈대중이 아니라 사람 눈의 밝기 감도를 반영한 공식으로 계산되며, 위 검사기는 두 색을 넣으면 이 비율과 통과 여부를 바로 보여 줍니다.
- 큰 글자는 기준이 다른가요?
- 네. 큰 글자는 획이 두꺼워 같은 대비라도 더 잘 읽히기 때문에 기준이 완화됩니다. 18pt 이상(약 24px), 또는 14pt 이상(약 18.66px)이면서 굵은 글씨는 '큰 텍스트'로 보아 AA 기준이 3:1로 낮아집니다. 반대로 향상된 기준인 AAA는 일반 텍스트 7:1, 큰 텍스트 4.5:1을 요구합니다. 위 검사기는 일반·큰 텍스트, AA·AAA 네 가지를 한 번에 판정합니다.
- 왜 두 색의 밝기를 그냥 평균 내면 안 되나요?
- 화면의 0~255 값은 빛의 양이 아니라 '감마 인코딩'된 값이기 때문입니다. 예를 들어 128은 255의 절반 밝기가 아니라 실제로는 약 21% 밝기입니다. 또 사람 눈은 초록에 가장 민감하고(71%) 파랑에는 둔감해서(7%), 같은 255라도 초록이 파랑보다 훨씬 밝게 느껴집니다. 그래서 단순 평균으로 계산하면 실제로는 안 보이는 조합을 '통과'라고 잘못 판정합니다. 이 검사기는 인코딩을 풀고 눈의 감도로 가중한 WCAG 상대 휘도로 정확히 계산합니다.
- 회색 글씨(연한 글씨)는 왜 문제가 되나요?
- 디자인에서 흔히 쓰는 흰 배경 위 연한 회색 글씨(#999 등)는 감성적으로는 '세련돼' 보이지만 대비가 부족한 경우가 많습니다. 흰색(#FFFFFF) 위 #999999는 약 2.8:1로 4.5:1에 한참 못 미칩니다. 보조 설명·placeholder·비활성 텍스트가 특히 이 함정에 잘 빠집니다. 위 검사기에 실제 색을 넣어 4.5를 넘는지 확인하고, 부족하면 회색을 조금 더 어둡게 조정하세요.
- 투명도(알파)가 있는 색도 정확히 계산되나요?
- 아니요. 반투명 색의 실제 대비는 그 뒤에 깔린 배경에 따라 달라지므로, 배경을 모르면 정직하게 계산할 수 없습니다. 이 검사기는 임의로 흰 배경을 가정해 틀린 숫자를 내놓는 대신 알파를 무시하고 불투명 색으로 계산합니다. 반투명 글자색의 대비를 정확히 보려면, 먼저 그 색이 배경과 합성된 최종 불투명 색을 구해 넣어야 합니다.