색상 대비비 계산기 (WCAG 명도 대비)

WCAG 2.1은 일반 텍스트의 최소 대비를 4.5:1로 정했는데, 이는 약 20/40 시력(교정 후에도 정상의 절반 수준) 사용자가 겪는 대비 감도 손실(정상 시력 대비 약 1.5배)을 보정한 값입니다 — 큰 텍스트에 적용되는 기준 대비 3:1 × 1.5 = 4.5:1로 계산됩니다. 큰 텍스트(18pt 이상, 또는 14pt 이상 굵은 글꼴)는 획이 두꺼워 3:1로 완화됐고, 가장 엄격한 AAA 일반 텍스트는 7:1입니다. 계산기에선 이 세 단계를 동시에 보여줍니다.

대비비는 두 색이 완전히 같을 때 1:1이고, 검정과 흰처럼 상대휘도가 가장 멀리 떨어져 있을 때 21:1입니다. WCAG 2.1 SC 1.4.3(대비 - 최소)은 본문 텍스트에 4.5:1 이상을, 18pt 이상이거나 14pt 이상 굵은 글꼴인 큰 텍스트에는 3:1 이상을 요구합니다. 더 엄격한 SC 1.4.6(대비 - 강화)에서는 본문 7:1, 큰 텍스트 4.5:1을 요구합니다. 계산 과정을 이 계산기의 기본값(전경 51,51,51 · 배경 255,255,255)으로 밟아보면 상대휘도가 각각 0.033과 1.000으로 나오고, 대비비는 (1.000+0.05)를 (0.033+0.05)로 나눈 약 12.63:1이 됩니다 — AA·AAA 본문 기준을 모두 넉넉히 통과하는 값입니다.

상대휘도는 감마 보정을 거친 값이라 sRGB 채널 값을 그대로 밝기로 읽으면 틀립니다. 예를 들어 회색 rgb(128,128,128)은 0~255 척도에서 정확히 절반이라 밝기 50%처럼 보이지만, 감마 보정을 적용한 상대휘도는 0.216에 불과합니다. 그 결과 이 회색은 흰 배경과 짝지으면 3.95:1로 AA 본문 기준(4.5:1)에 못 미치고 AA 큰 텍스트 기준(3:1)만 겨우 통과하며, 반대로 검정 배경과 짝지으면 5.32:1로 AA 본문 기준까지 통과합니다. 같은 회색인데 어느 배경과 짝짓는지에 따라 등급이 갈리므로, 색을 눈으로 보고 대비를 짐작하지 말고 반드시 계산해야 합니다.

톤을 살짝 낮춘 회색 배경에 중간 회색 글자를 올리는 조합은 각 색이 흰색이나 검정에 비해 그리 어둡거나 밝지 않아 언뜻 무난해 보이지만, 실제로는 크게 미달하는 경우가 흔합니다. 예를 들어 글자색 #999999(153,153,153)를 배경색 #CCCCCC(204,204,204) 위에 올리면 상대휘도는 각각 0.319와 0.604이고, 대비비는 (0.604+0.05)를 (0.319+0.05)로 나눈 약 1.77:1에 그칩니다. AA 큰 텍스트 기준 3:1에도 미치지 못하는, 사실상 거의 안 보이는 조합입니다. 카드 배경 위의 보조 설명 글자처럼 색을 살짝 연하게 처리한 조합에서 특히 자주 나타나므로, 디자인 시안 단계에서 직접 계산해 보는 편이 안전합니다.

대비비를 맞췄더라도 빨강은 오류, 초록은 성공처럼 색만으로 의미를 구분하면 색맹·저시력 사용자에게는 그 정보가 전달되지 않습니다. WCAG 2.1 SC 1.4.1(색의 사용)은 색을 정보 전달의 유일한 시각적 수단으로 쓰지 말라고 규정합니다 — 아이콘, 밑줄, 텍스트 라벨처럼 색이 아닌 단서를 함께 제공해야 합니다. 국내 기준인 한국형 웹 콘텐츠 접근성 지침(KWCAG) 역시 같은 원칙을 채택하고 있습니다. 이 계산기가 다루는 대비비는 색이 충분히 밝거나 어두운지만 보장할 뿐, 색만으로 뜻이 통하는지는 별개의 문제라는 점을 기억하세요.

라이트 모드에서 통과한 색 조합을 다크 모드에 배경과 글자만 반전해 그대로 쓰면 대비가 무너지는 경우가 많습니다. 예를 들어 흰 배경(255,255,255)에 인디고색 글자 #4F46E5를 쓰면 6.29:1로 AA 본문 기준을 넉넉히 통과하지만, 같은 인디고를 어두운 배경 #0F172A 위에 그대로 올리면 2.84:1로 AA 큰 텍스트 기준(3:1)에도 못 미칩니다. 다크 모드 디자인에서 흔히 더 밝은 색조(예: #818CF8)로 바꾸는 이유가 여기 있습니다 — 같은 어두운 배경 위에서 5.99:1로 다시 AA 본문 기준을 통과합니다. 라이트·다크 각 모드의 배색은 서로 다른 계산이 필요하므로, 모드를 전환할 때마다 이 계산기로 다시 확인하는 편이 안전합니다.

이 계산기의 대비비 판정은 WCAG 2.1(2018년 제정)의 상대휘도·대비비 공식을 기준일로 삼습니다. 이후 W3C는 더 많은 항목을 다루는 WCAG 2.2를 내놓았지만, 명도 대비 공식과 4.5:1·3:1·7:1이라는 임계값 자체는 WCAG 2.1에서 그대로 이어집니다. 접근성 지침은 시간이 지나며 개정되므로, 법적 준수가 걸린 프로젝트라면 최신 버전과 국내 KWCAG 요건을 함께 확인하시길 권합니다. 출처: WCAG 2.1(Web Content Accessibility Guidelines 2.1), W3C 권고안.