색상 코드 변환이란?

웹 개발에서 색상을 표현하는 방법은 여러 가지가 있습니다:

• HEX: 16진수로 표현 (#RRGGBB 형식). 예: #3498db
• RGB: 빨강, 초록, 파랑 값을 0-255로 표현. 예: rgb(52, 152, 219)
• HSL: 색상(Hue), 채도(Saturation), 명도(Lightness)로 표현. 예: hsl(204, 70%, 53%)

이 도구를 사용하면 한 형식의 색상 코드를 입력하면 다른 형식으로 자동 변환되어 표시됩니다. 변환 결과는 위쪽 미리보기 박스에서 실제 색상으로 바로 확인할 수 있습니다.

명도 대비(Contrast Ratio)와 WCAG 기준

텍스트와 배경의 색이 너무 비슷하면 저시력자나 색각 이상이 있는 사용자는 물론, 밝은 야외 환경에서 화면을 보는 일반 사용자도 글자를 읽기 어렵습니다. W3C의 웹 콘텐츠 접근성 지침(WCAG)은 이를 수치로 규정합니다. 밝기가 가장 밝은 색과 가장 어두운 색의 상대 휘도(relative luminance)를 비교해 1:1(구분 불가)부터 21:1(흰색과 검은색) 사이의 대비율을 계산하고, 아래 기준을 통과해야 접근성을 준수한 것으로 봅니다.

• AA (최소 기준): 일반 텍스트 4.5:1 이상, 18pt 이상(또는 14pt 굵게)의 큰 텍스트는 3:1 이상.
• AAA (권장 기준): 일반 텍스트 7:1 이상, 큰 텍스트 4.5:1 이상.

공공기관 웹사이트나 앱은 법적으로 AA 기준 준수를 요구받는 경우가 많고, 일반 서비스에서도 버튼 글씨, 안내 문구가 기준을 통과하지 못하면 실사용자 이탈로 이어지기 쉬워 디자인 단계에서 미리 확인하는 것이 좋습니다.