이 도구가 계산하는 것
화면에 보이는 글자가 배경에서 얼마나 또렷하게 구분되는지를 WCAG(Web Content Accessibility Guidelines) 2.x의 성공 기준 1.4.3(최소 대비, AA)과 1.4.6(향상된 대비, AAA)이 정한 방식 그대로 수치화합니다. 입력한 두 색은 sRGB로 해석하며 HEX 3자리(#abc)와 6자리(#aabbcc)를 받습니다. 결과 상자에는 명암비 외에 두 색의 상대 휘도 값과 계산 과정이 한 줄로 표시되고, 기준에 못 미치면 글자색만 최소한으로 어둡게 또는 밝게 바꿔 통과하는 색을 제안합니다. 색 조합을 새로 만드는 단계는 색상 팔레트 생성기가 맡고, 이 페이지는 이미 정해진 조합을 검수하는 용도입니다.
상대 휘도를 구하는 과정
명암비를 구하려면 먼저 색마다 0(검정)에서 1(흰색) 사이의 상대 휘도 L을 구합니다. 순서는 세 단계입니다.
- R, G, B를 각각 255로 나누어 0~1 사이의 값 s로 바꿉니다.
- 감마가 걸린 sRGB 값을 선형 광량으로 되돌립니다. s가 0.03928 이하이면 s ÷ 12.92, 그보다 크면 ((s + 0.055) ÷ 1.055)의 2.4제곱입니다. 어두운 영역은 직선, 나머지는 거듭제곱 곡선을 쓰는 구조입니다.
- 세 채널을 사람 눈의 민감도 비율로 합칩니다. L = 0.2126 × R + 0.7152 × G + 0.0722 × B 이며, 계수는 Rec.709 원색 기준입니다.
초록의 계수가 가장 크고 파랑이 가장 작다는 점이 핵심입니다. 같은 255의 채널값이라도 순수 초록(#00FF00)의 휘도는 0.7152, 순수 파랑(#0000FF)은 0.0722에 그칩니다. 그래서 눈에 "선명하다"고 느끼는 것과 대비가 높은 것은 별개입니다.
한 가지 세부 사항이 있습니다. sRGB 국제 표준(IEC 61966-2-1)은 경계값을 0.04045로 적지만 WCAG 2.x 본문은 0.03928을 씁니다. 이 도구는 WCAG 문서의 값을 따르며, 0~255 정수 채널에서는 두 경계값 사이에 들어오는 값이 없어 어느 쪽을 써도 결과가 같습니다(256개 채널값을 모두 대입해 확인했습니다).
명암비 공식과 0.05의 의미
명암비 = (L밝은 + 0.05) ÷ (L어두운 + 0.05) 입니다. 분자와 분모에 더하는 0.05는 화면에 반사되는 주변광과 모니터의 검정이 실제로는 완전한 0이 아니라는 점을 반영한 보정값입니다. 이 보정 덕분에 검정(L=0)과 흰색(L=1)의 비가 1.05 ÷ 0.05 = 21이 되어, 값의 범위가 1:1에서 21:1로 고정됩니다. 어느 쪽이 글자이고 어느 쪽이 배경인지는 결과에 영향이 없습니다. 흰 글자에 검정 배경이든 검정 글자에 흰 배경이든 같은 21:1입니다.
통과 기준표
WCAG에서 "큰 글자"는 크기가 18pt(CSS 24px) 이상이거나, 굵은 글자일 때 14pt(약 18.67px) 이상인 글자를 말합니다. 1pt = 1/72인치, CSS 1px = 1/96인치이므로 pt에 96/72를 곱하면 px가 됩니다.
| 구분 | 크기 기준 | AA 최소 | AAA 강화 |
|---|---|---|---|
| 일반 본문 | 아래 두 경우에 해당하지 않는 모든 글자 | 4.5 : 1 | 7 : 1 |
| 큰 글자(보통 굵기) | 18pt = 24px 이상 | 3 : 1 | 4.5 : 1 |
| 큰 글자(굵음) | 14pt = 18.67px 이상 | 3 : 1 | 4.5 : 1 |
글자가 아닌 요소에는 별도 기준이 있습니다. 성공 기준 1.4.11(비텍스트 대비, WCAG 2.1에서 추가)은 입력창 테두리, 체크박스, 아이콘처럼 상태나 정보를 전달하는 UI 요소를 인접한 색과 3:1 이상으로 구분하도록 요구합니다. 위 도구의 "UI 요소·아이콘" 칩이 이 기준을 확인합니다. 또 1.4.1(색의 사용)은 색만으로 정보를 구분하지 말라고 요구하는데, 본문 속 링크라면 주변 글자와 3:1 이상 차이 나는 색을 쓰거나 밑줄 같은 추가 단서를 두는 방법이 알려져 있습니다.
회색 글자는 어디까지 허용될까
흰 배경에서 회색 글자의 대비를 계산한 표입니다. 페이지를 만들 때 값이 계산되며, 소수 셋째 자리부터는 올림하지 않고 버린 값입니다.
| 글자색 | 대비 | AA 본문 | AAA 본문 | 큰 글자 AA |
|---|---|---|---|---|
| #595959 | 7.00 : 1 | 통과 | 통과 | 통과 |
| #767676 | 4.54 : 1 | 통과 | 미달 | 통과 |
| #777777 | 4.47 : 1 | 미달 | 미달 | 통과 |
| #949494 | 3.03 : 1 | 미달 | 미달 | 통과 |
| #AAAAAA | 2.32 : 1 | 미달 | 미달 | 미달 |
| #CCCCCC | 1.60 : 1 | 미달 | 미달 | 미달 |
흰 배경에서 AA 본문(4.5:1)을 통과하는 가장 밝은 무채색은 #767676(4.54:1)이고, 한 단계 밝은 #777777은 4.47:1로 미달합니다. 이 차이는 육안으로 거의 구분되지 않지만 자동 검사 도구는 둘을 다르게 판정합니다. AAA 본문(7:1)은 #595959(7.00:1)까지 어두워야 합니다. 플레이스홀더나 보조 설명에 흔히 쓰는 #AAAAAA(2.32:1)는 큰 글자 기준 3:1에도 못 미칩니다.
순색과 브랜드색은 의외로 낮다
| 글자색 | 배경 | 글자 휘도 L | 대비 | AA 본문 | 큰 글자 AA |
|---|---|---|---|---|---|
| 순수 빨강 #FF0000 | 흰색 | 0.2126 | 3.99 : 1 | 미달 | 통과 |
| 순수 파랑 #0000FF | 흰색 | 0.0722 | 8.59 : 1 | 통과 | 통과 |
| 진한 초록 #008000 | 흰색 | 0.1544 | 5.13 : 1 | 통과 | 통과 |
| 순수 노랑 #FFFF00 | 흰색 | 0.9278 | 1.07 : 1 | 미달 | 미달 |
| 금빛 #C9A961 | 흰색 | 0.4166 | 2.25 : 1 | 미달 | 미달 |
| 금빛 #C9A961 | 검정 | 0.4166 | 9.33 : 1 | 통과 | 통과 |
| 순수 파랑 #0000FF | 검정 | 0.0722 | 2.44 : 1 | 미달 | 미달 |
순수 빨강은 흰 배경에서 3.99:1입니다. 반올림하면 "4.00"처럼 보이지만 정밀한 값은 본문 기준 4.5에 한참 못 미치므로 본문 글자에는 쓸 수 없습니다. 이 도구가 소수 둘째 자리까지 표시할 때 반올림 대신 버림을 쓰는 이유가 여기에 있습니다. 4.496이 "4.50 : 1 미달"로 표시되는 모순을 피하기 위해서입니다. 반대로 순수 파랑은 흰 배경에서 8.59:1로 높지만 검정 배경에서는 2.44:1로 떨어집니다. 같은 색이라도 배경에 따라 합격과 불합격이 뒤바뀝니다.
계산 예시
예시 1 — 짙은 남색 #1A1A2E 글자, 흰 배경. 채널값 26, 26, 46을 선형화하면 R, G는 0.0103, B는 0.0273 부근이고 합산한 L은 0.0116입니다. 흰색의 L은 1이므로 명암비는 (1 + 0.05) ÷ (0.0116 + 0.05) = 17.05 : 1로, 본문 AAA(7:1)까지 여유 있게 통과합니다.
예시 2 — 순수 빨강 #FF0000 글자, 흰 배경. 빨강 채널만 255이므로 L = 0.2126 × 1 = 0.2126입니다. 명암비는 1.05 ÷ 0.2626 = 3.99 : 1입니다. 큰 글자 AA(3:1)는 통과하고 본문 AA(4.5:1)는 미달이라, 에러 메시지처럼 작은 글자에 빨강을 쓸 때는 더 어두운 빨강으로 바꾸는 편이 안전합니다.
예시 3 — 금빛 #C9A961. 이 색의 L은 0.4166로 중간 밝기입니다. 흰 글자와는 2.25:1로 3:1에도 못 미치지만 검정 글자와는 9.33:1이 나옵니다. 흰색과 검정 중 어느 쪽이 더 높은 대비를 주는지는 배경 L이 약 0.179(= √(1.05 × 0.05) − 0.05)일 때 갈리며, 이보다 밝은 배경은 검정 글자가 유리합니다.
이 도구가 제안하는 통과 색의 원리
기준에 못 미치면 글자색을 검정 쪽 또는 흰색 쪽으로 섞는 비율을 이분 탐색으로 줄여 가며, 목표 대비(4.5:1 또는 7:1)를 처음 만족하는 최소 변경 지점을 찾습니다. 원래 색의 색조를 최대한 보존하기 위해 밝기만 이동시키는 방식이며 두 방향 중 변경량이 작은 쪽을 고릅니다. 배경이 중간 밝기라서 어느 방향으로도 목표에 닿지 못하면 "글자색 조정만으로는 달성할 수 없다"고 알려 주므로, 그때는 배경색을 바꿔야 합니다. 제안색은 참고용 시작점이고, 최종 색은 브랜드 가이드와 함께 판단하세요.
흔한 실수와 도구의 한계
- 이미지·그라데이션 위의 글자: 배경이 한 가지 색이 아니면 이 도구의 단일 값은 의미가 약합니다. 가장 밝은 지점과 가장 어두운 지점 모두에서 글자가 기준을 넘는지 따로 확인하세요.
- 투명도(opacity, RGBA): 반투명 글자는 겹친 뒤의 실제 색으로 환산해 입력해야 합니다. 8자리 HEX는 받지 않습니다.
- 비활성(disabled) 요소·장식·로고: WCAG는 이들에 최소 대비를 요구하지 않지만, 사용자가 비활성 상태를 알아볼 수 있어야 합니다.
- 다크 모드: 라이트 모드에서 통과한 조합이 다크 모드에서 자동으로 통과하지 않습니다. 모드마다 따로 검사하세요.
- 수치만으로 충분하지 않음: 가는 글꼴, 작은 크기, 눈부심은 같은 대비비에서도 가독성을 떨어뜨립니다. 대비비 계산은 최소선이고 가독성의 전부가 아닙니다. 참고로 차세대 지침(WCAG 3.0 초안)에서는 APCA 등 글자 굵기와 크기를 반영하는 방식이 논의되고 있다고 알려져 있으나, 현재 널리 쓰이는 검사 기준은 이 페이지의 WCAG 2.x 공식입니다.
- 색각 이상: 대비비는 밝기 차이만 봅니다. 색상 차이로만 정보를 구분하면 색각 이상 사용자는 놓칠 수 있으니 색각 이상 친화 디자인 가이드를 함께 참고하세요.
결과를 어떻게 쓰나
- 본문, 버튼 라벨, 입력창 안내문처럼 읽어야 하는 글자는 AA 본문(4.5:1)을 최소 목표로 삼으세요. 헤드라인 같은 큰 글자는 3:1부터 허용됩니다.
- 제안된 통과 색을 CSS 변수 한 곳에 정의해 두면 전체 사이트에 일관되게 적용됩니다. HEX를 RGB·HSL로 바꿔야 하면 색상 변환기를 쓰세요.
- "결과 복사" 버튼으로 색 조합과 대비비를 텍스트로 복사해 디자인 문서나 접근성 검수 기록에 붙여 넣을 수 있습니다.
- 국내에서는 장애인차별금지 및 권리구제 등에 관한 법률에 따라 웹 접근성 제공 의무 대상이 정해져 있고, 한국형 웹 콘텐츠 접근성 지침(KWCAG)에도 명도 대비 검사 항목이 있습니다. 세부 수치와 적용 대상은 최신 지침과 소관 기관의 안내를 확인하세요.
자주 묻는 질문
밝기와 명암비는 같은 개념인가요?
다릅니다. 밝기(휘도)는 색 하나의 값이고 명암비는 두 색의 휘도를 비교한 비율입니다. 또 WCAG의 상대 휘도는 R, G, B에 0.2126, 0.7152, 0.0722를 곱하는 방식이라, 단순히 세 채널을 평균한 값과 달리 초록이 밝기에 가장 크게 기여합니다.
로고나 장식적 요소에도 이 기준이 적용되나요?
WCAG 1.4.3은 로고타입(브랜드 이름 로고), 순수 장식, 비활성 UI 요소, 사진 속 글자를 예외로 둡니다. 다만 아이콘 버튼처럼 정보나 동작을 전달하는 그래픽은 1.4.11에 따라 3:1이 필요합니다.
4.5:1에 아슬아슬하게 못 미치면 어떻게 하나요?
4.49:1도 기준상 미달입니다. 자동 검사나 심사에서는 소수점 반올림을 허용하지 않으므로 글자를 조금 더 어둡게 하거나 배경을 더 밝게 조정하세요. 제안 기능은 통과하는 가장 가까운 색을 찾아 줍니다.
글자 크기가 큰지 어떻게 판단하나요?
렌더링되는 실제 크기 기준입니다. 18pt(24px) 이상, 또는 굵은 글자 14pt(약 18.67px) 이상이면 큰 글자입니다. 사용자가 브라우저 글꼴 크기를 바꿀 수 있으므로 확신이 없으면 본문 기준을 적용하는 편이 안전합니다.
흰색과 검정 외에 대비가 높은 조합은 무엇인가요?
검정과 흰색의 21:1이 이론상 최대입니다. 완전한 검정 대신 짙은 남색이나 진한 회색을 흰 배경에 쓰면 예시 1처럼 17:1 안팎이 나오면서도 눈의 피로가 덜합니다.
입력한 색이 서버로 전송되나요?
아니요. 모든 계산은 브라우저 안에서 이루어지며 입력값을 저장하거나 보내지 않습니다.
관련 도구
- 색상 팔레트 생성기 — 보색·유사색 같은 배색 후보 만들기
- 색상 변환기 — HEX, RGB, HSL 상호 변환
- 색채 이론 기초 가이드
- 색각 이상 친화 디자인 가이드