HEX·RGB·HSL 색상 변환과 글자 대비 기준: 읽기 쉬운 색 조합 고르는 법

#FF5733 같은 HEX 값을 RGB·HSL로 바꾸는 원리, 웹 접근성(WCAG) 대비율 4.5:1 기준, 흰 배경에서 통과하는 회색과 파란색 예시를 계산값으로 정리합니다.

디자인 시안의 색과 CSS에 넣은 색이 다르게 보이거나, 예쁘다고 고른 회색 글씨가 모바일 야외 화면에서 읽히지 않는 일은 색상 표기법과 대비를 따로 확인하지 않아서 생깁니다. 이 글은 표기법 사이의 변환 원리와, 숫자로 확인하는 대비 기준을 정리합니다.

1. HEX와 RGB는 같은 값을 다르게 쓴 것

#FF5733은 R=FF, G=57, B=33입니다. 16진수 FF는 255, 57은 5×16+7=87, 33은 3×16+3=51이므로 rgb(255, 87, 51)과 같습니다. 반대로 RGB를 HEX로 바꿀 때는 각 값을 16으로 나눈 몫과 나머지를 16진수 문자로 씁니다. 3자리 축약형(#F53)은 각 자리를 두 번 반복한 #FF5533을 뜻하므로, 원래 6자리 값과 다를 수 있습니다.

2. HSL은 사람이 조정하기 쉬운 표기

HSL은 색상(Hue, 0~360도), 채도(Saturation, %), 명도(Lightness, %)로 색을 나타냅니다. 같은 색 계열에서 버튼의 hover 색만 약간 어둡게 하고 싶다면 HEX를 직접 고치는 것보다 명도만 5~10%p 낮추는 편이 쉽습니다.

반올림 때문에 HSL을 다시 HEX로 바꾸면 1단계 정도 어긋날 수 있습니다. 기준 색은 한 가지 표기로 정해 두고 나머지는 파생값으로 쓰는 것이 안전합니다.

3. 글자 대비율은 어떻게 계산하나

WCAG는 두 색의 상대 휘도 L1(밝은 쪽), L2(어두운 쪽)를 구한 뒤 (L1+0.05) ÷ (L2+0.05)를 대비율로 씁니다. 검은 글씨와 흰 배경은 21:1이고 같은 색이면 1:1입니다. 사람의 눈은 초록에 가장 민감하기 때문에 휘도 계산에서도 초록 비중이 가장 크고(약 71.5%), 파랑은 가장 작습니다(약 7.2%).

큰 글자는 보통 18pt(약 24px) 이상, 또는 굵은 14pt(약 18.7px) 이상을 말합니다. 위 표처럼 밝은 주황·연한 회색은 흰 배경에서 본문용으로 쓰기 어렵습니다.

4. 실무 점검 순서

• 본문·설명 글자부터 4.5:1 이상인지 확인합니다. 보조 설명용 회색이 가장 자주 탈락합니다.
• 버튼 글자와 버튼 배경도 같은 기준으로 확인합니다. 브랜드 색 위에 흰 글씨를 올릴 때가 흔한 실패 지점입니다.
• 비활성(disabled) 요소는 기준에서 예외지만 읽을 필요가 있는 안내문이라면 일반 글자와 같이 취급해야 합니다.
• 다크 모드는 라이트 모드에서 통과한 색을 그대로 반전하지 말고 따로 계산합니다.
• 색만으로 상태를 구분하지 않기: 오류는 빨간색과 함께 아이콘이나 문구를 넣습니다. 적록 색약 사용자는 두 색의 구분이 어렵습니다.

5. 색 선택 때 자주 하는 실수

모니터마다 색 재현이 달라 같은 HEX도 다르게 보입니다. 인쇄용 CMYK는 화면 RGB보다 표현 범위가 좁아서 형광에 가까운 색은 인쇄하면 탁해집니다. 인쇄물이 목적이라면 처음부터 인쇄소가 제공하는 색상 프로필 기준으로 확인하세요. 투명도(알파)를 쓰면 배경에 따라 최종 색이 달라지므로, 반투명 글자의 대비는 합성된 색으로 다시 계산해야 합니다.

자주 묻는 질문

참고한 공식 자료

• W3C WCAG 2.1 대비(최소) 설명
• MDN CSS 색상 값

이 글은 일반적인 기준을 설명하는 정보이며 개인별 법률·세무 판단을 대신하지 않습니다. 중요한 결정 전에는 본문에 적은 공식 기관 자료나 전문가 상담으로 확인하세요. 내용 오류는 문의 페이지로 알려주시면 확인 후 수정합니다.