같은 밝기 50%인데, 노랑과 파랑의 글자색은 왜 다를까요?

네 가지 원색의 HSL 밝기는 모두 50%입니다

비교할 색을 불투명한 sRGB 값 #ffff00, #0000ff, #ff0000, #00ff00으로 정합니다. 각각 노랑·파랑·빨강·초록입니다. 이 사이트의 변환기로 보면 색상각 H는 다르지만 채도 S=100%, 밝기 L=50%는 모두 같습니다. 실제 화면을 측정한 값이 아니라 지정한 색상 코드의 계산 결과입니다.

이 색들의 RGB 성분을 0~1로 바꾸면 가장 큰 성분은 1, 가장 작은 성분은 0입니다. HSL의 L은 최댓값과 최솟값의 평균이므로 (1 + 0) ÷ 2 = 0.5가 됩니다. 어느 채널이 큰지는 이 평균만으로 드러나지 않습니다. 따라서 L이 같다는 이유만으로 서로 같은 정도로 밝게 보인다고 결론 내릴 수 없습니다.

W3C CSS Color 명세도 HSL의 밝기가 색상에 걸쳐 지각되는 밝기와 일치하지 않는 한계를 설명합니다. 여기서는 그 차이가 글자색을 고를 때 어떤 결과를 만드는지 보겠습니다. 모니터의 밝기 설정이나 실제 시청 환경을 바꾸어 측정한 실험과는 구분합니다.

대비 계산에는 HSL 대신 상대 휘도를 씁니다

WCAG의 sRGB 상대 휘도는 선형화한 R·G·B에 각각 0.2126, 0.7152, 0.0722를 곱해 더합니다. 위 예시처럼 성분이 0이나 1인 색은 선형화 후에도 그 값이 유지됩니다. 노랑은 R과 G가 1이므로 0.2126 + 0.7152 = 0.9278이고, 파랑은 B만 1이라 0.0722입니다.

중간 성분을 가진 다른 색에는 0~255 값을 그대로 이 식에 넣으면 안 됩니다. 먼저 255로 나눈 sRGB 성분 c에 대해 c ≤ 0.04045이면 c ÷ 12.92, 그보다 크면 ((c + 0.055) ÷ 1.055)의 2.4제곱을 적용합니다. 예를 들어 #808080의 상대 휘도는 약 0.2159이며, 128 ÷ 255인 약 0.5020과 다릅니다.

이 글에서 L이라는 글자를 HSL 밝기와 상대 휘도 양쪽에 혼용하지 않는 이유도 여기에 있습니다. 같은 “밝기”라는 말로 읽더라도 계산 대상이 다릅니다. 변환기의 HSL 출력은 색상 좌표를 확인하는 용도로 보고, 대비를 계산할 때는 상대 휘도 정의를 사용하세요.

노랑에는 검정, 파랑에는 흰색이 더 큰 대비를 만듭니다

대비 비율은 (더 밝은 색의 상대 휘도 + 0.05) ÷ (더 어두운 색의 상대 휘도 + 0.05)입니다. 흰색 #ffffff의 상대 휘도는 1, 검은색 #000000은 0입니다. 노랑 위 흰색 글자는 1.05 ÷ 0.9778 ≈ 1.07:1, 검은색 글자는 0.9778 ÷ 0.05 ≈ 19.56:1입니다.

파랑에서는 반대로 흰색 글자가 약 8.59:1, 검은색 글자가 약 2.44:1입니다. “밝기 50% 이상이면 검정 글자”처럼 HSL 값 하나만으로 판단하면 같은 분기 안에 전혀 다른 조합이 들어갑니다. 아래 표처럼 실제 전경색과 배경색을 짝지어 비교해야 합니다.

숫자 비교와 화면 전체의 접근성 판정은 구분합니다

WCAG 2.2 성공 기준 1.4.3의 일반 텍스트 최소 대비는 4.5:1입니다. 큰 텍스트는 3:1 기준이며, 로고나 부수적인 텍스트 등에는 별도 예외가 있습니다. 표에서는 노랑·파랑에 같은 흰색 글자를 적용했을 때 일반 텍스트 기준의 결과가 달라진다는 점을 확인할 수 있습니다. 반올림한 표시값으로 경계 통과 여부를 판정하지 말고 원래 계산값을 사용해야 합니다.

이 표는 불투명한 단색 배경을 가정합니다. 반투명 글자, 사진 배경, 그라데이션에서는 지정한 HEX 두 개만으로 실제 맞닿는 색을 모두 설명할 수 없습니다. 버튼을 누르거나 선택했을 때 배경이 바뀐다면 그 상태의 색 조합도 다시 확인해야 합니다.

대비 한 항목을 만족했다고 페이지 전체가 WCAG를 충족하는 것은 아닙니다. 이 비교는 색상 표기의 숫자를 해석하는 작은 검산 사례입니다. 먼저 변환기에서 의도한 색상인지 확인하고, 실제 적용 화면에서는 해당 글자·배경 조합의 대비와 표시 상태를 따로 살펴보세요.