명도 대비 검사: 밝기 평균으로는 알 수 없습니다
색이 얼마나 밝아 보이는지는 RGB 값의 평균이 아닙니다. 화면이 내는 빛과 숫자 사이에는 감마라는 굽은 관계가 있어서, 그 보정을 빼먹으면 대비 계산이 통째로 어긋납니다.
글자와 배경의 대비가 부족하면 읽기 어렵습니다. 시력이 약한 사람, 햇빛 아래에서 휴대폰을 보는 사람, 저가 모니터를 쓰는 사람에게는 특히 그렇습니다. 그래서 웹 접근성 지침(WCAG)은 대비를 숫자로 규정합니다.
이 도구는 두 색의 대비를 1:1부터 21:1까지 계산하고, 그 값이 어느 기준을 통과하는지 보여 줍니다.
50% 회색은 흰색의 절반만큼 밝지 않습니다
직관에 반하는 사실이 대비 계산의 핵심입니다. RGB 값이 128인 회색은 255인 흰색의 절반이지만, 화면이 실제로 내는 빛은 절반이 아니라 21% 정도입니다.
sRGB 값이 빛의 양에 비례하지 않기 때문입니다. 사람 눈이 어두운 쪽 차이에 더 민감해서, 어두운 구간에 숫자를 더 촘촘히 배분해 두었습니다. 이것을 감마라고 부릅니다.
그래서 대비를 계산하려면 먼저 이 굽은 관계를 되돌려야 합니다. 각 채널을 실제 빛의 양으로 되돌린 다음, 사람 눈의 색깔별 민감도에 따라 가중치를 줍니다. 초록에 0.7152, 빨강에 0.2126, 파랑에 0.0722입니다. 초록이 압도적인 이유는 눈이 초록에 가장 민감하기 때문입니다.
이 보정을 빼고 RGB를 그냥 평균 내면 결과가 크게 달라집니다. 특히 순색에 가까운 색에서 그렇습니다.
WCAG 기준
큰 글자는 18pt 이상, 또는 굵은 글씨로 14pt 이상을 말합니다.
| 등급 | 일반 글자 | 큰 글자 | 어디에 쓰나 |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 대부분의 웹사이트가 목표로 하는 최소선 |
| AAA | 7:1 | 4.5:1 | 공공기관, 접근성이 중요한 서비스 |
검정 글자와 흰색 글자 중 어느 쪽인가
배경색 위에 글자를 얹을 때 흔히 쓰는 방법이 있습니다. 배경이 밝으면 검정, 어두우면 흰색을 쓰는 것입니다. 문제는 '밝다'의 경계를 어디에 두느냐입니다.
많은 코드가 밝기 0.5를 경계로 씁니다. 그런데 검정과 흰색의 실제 갈림길은 휘도 0.179 근처입니다. 그 사이 구간, 즉 중간 정도로 밝은 색에서는 검정이 더 잘 보이는데도 흰색이 선택됩니다.
굳이 경계값을 외울 필요는 없습니다. 검정과의 대비, 흰색과의 대비를 각각 계산해서 큰 쪽을 쓰면 됩니다. 이 사이트의 색상 도구들이 그렇게 동작합니다.
실무에서 자주 걸리는 곳
- •연한 회색 본문 — 흐릿한 회색이 세련돼 보이지만 대비가 모자란 경우가 많습니다.
- •브랜드 색 위의 흰 글자 — 노랑이나 연두 계열 브랜드색은 흰 글자와 거의 대비가 없습니다.
- •입력란의 안내 문구 — 기본 회색이 4.5:1을 못 넘기는 경우가 흔합니다.
- •사진 위에 얹은 글자 — 사진의 밝기가 부분마다 달라 어두운 막을 깔아야 합니다.
- •비활성 버튼 — 흐리게 만드는 것이 목적이라도 읽을 수는 있어야 합니다.
자주 묻는 질문
다른 사이트와 계산 결과가 다릅니다.
감마 보정을 하는지 여부에서 갈릴 가능성이 큽니다. RGB 값을 그대로 평균 내는 계산은 순색에 가까운 색에서 크게 어긋납니다. 검정과 흰색의 대비가 21:1로 나오는지 확인해 보면 간단히 구분됩니다.
4.5:1을 꼭 넘겨야 하나요?
법적으로 요구되는 경우가 있고(공공기관 웹사이트 등), 아니어도 실질적인 이유가 있습니다. 나이가 들면 대비 감각이 떨어지고, 밝은 야외에서는 누구나 대비가 필요합니다.
큰 글자 기준이 낮은 이유는요?
글자가 크면 획도 굵어져 같은 대비에서도 더 잘 보이기 때문입니다. 다만 얇은 굵기의 큰 글자는 그 이점이 줄어듭니다.
투명도가 있는 색은 어떻게 하나요?
실제로 화면에 나타나는 색을 기준으로 계산해야 합니다. 반투명 색이 배경과 섞인 뒤의 최종 색을 구해 넣으세요.
입력한 색이 저장되나요?
아니요. 브라우저 안에서만 계산합니다.