색상 변환 · 명암비 검사

세 가지 표기법

같은 색을 세 가지 방식으로 적을 수 있습니다. 쓰임새가 다릅니다.

HEX (#2563EB)는 웹에서 가장 널리 쓰입니다. 짧고 복사하기 좋습니다. 앞에서부터 빨강, 초록, 파랑을 각각 두 자리 16진수로 적습니다.

RGB (rgb(37, 99, 235))는 각 색의 세기를 0~255로 적습니다. HEX와 표현하는 정보가 완전히 같습니다.

HSL (hsl(221, 83%, 53%))은 색상(0~360°), 채도, 명도로 적습니다. 사람이 생각하는 방식과 가장 가깝습니다.

도구 사용법

색상 선택기에서 고르거나 HEX 값을 직접 넣으면 RGB·HSL 표기가 함께 나오고, 각 표기 옆의 복사 버튼으로 코드에 바로 붙여 넣을 수 있습니다. HSL 슬라이더를 움직이면 색상·채도·명도를 하나씩 바꿔 볼 수 있습니다. 아래 명암비 검사에서 배경색을 고르면 두 색의 대비가 계산되어 AA·AAA 기준의 통과 여부가 네 줄로 표시되고, 그 아래 조화 팔레트는 보색·유사색·삼각 배색·명도 단계를 만들어 주고, 팔레트 전체를 한 번에 복사할 수 있습니다.

HSL을 쓰면 편한 이유

어떤 색을 조금 밝게 만들고 싶다고 해봅시다.

HEX나 RGB에서는 세 값을 모두 손봐야 하고, 그 과정에서 색감이 미묘하게 틀어지기 쉽습니다. HSL에서는 명도 값 하나만 올리면 됩니다. 색상과 채도는 그대로 유지됩니다.

디자인 시스템에서 색 단계(50, 100, 200 … 900)를 만들 때 HSL이 특히 유용합니다. 같은 색상과 채도에서 명도만 바꾸면 자연스러운 단계가 나옵니다.

위 도구의 HSL 슬라이더로 직접 움직여 보면 차이가 바로 느껴집니다.

명암비 4.5:1이 무슨 뜻인가

웹 접근성 지침(WCAG)이 요구하는 글자와 배경의 최소 밝기 차이입니다. 1(같은 색)부터 21(검정 대 흰색)까지의 값으로 나타냅니다.

| 기준 | 일반 텍스트 | 큰 텍스트 | |---|---|---| | AA (권장 최소) | 4.5:1 | 3:1 | | AAA (강화) | 7:1 | 4.5:1 |

큰 텍스트는 18pt 이상이거나 14pt 굵은 글씨를 말합니다. 굵고 크면 읽기 쉬워 기준이 완화됩니다.

회색 글자가 자주 걸립니다

가장 흔히 미달하는 것이 회색 본문 글자입니다.

흰 배경에서 #999999는 약 2.85:1로 일반 텍스트 기준에 한참 못 미칩니다. #767676이 되어야 4.54:1로 겨우 통과합니다.

디자인 시안에서 "부드럽게" 보이려고 회색을 쓰다 보면 이 기준을 넘기기 쉽습니다. 특히 작은 글씨의 보조 설명에서 자주 발생합니다.

투명도로 색을 흐리게 하는 것도 같은 문제를 만듭니다. opacity: 0.7을 준 검정 글자는 실제로는 회색이고, 대비 계산에서도 그 회색 값으로 판정됩니다.

자주 쓰는 조합을 위 도구로 재 보면 감이 잡힙니다. 흰 배경(#FFFFFF) 기준입니다.

| 글자색 | 명암비 | AA 일반 | AA 큰 텍스트 | AAA 일반 | | ----------- | ------- | ------- | ------------ | -------- | | #000000 | 21.00:1 | 통과 | 통과 | 통과 | | #595959 | 7.00:1 | 통과 | 통과 | 통과 | | #767676 | 4.54:1 | 통과 | 통과 | 미달 | | #6B7280 | 4.83:1 | 통과 | 통과 | 미달 | | #999999 | 2.85:1 | 미달 | 미달 | 미달 | | #2563EB (파랑) | 5.17:1 | 통과 | 통과 | 미달 | | #0E7A5F (딥그린) | 5.29:1 | 통과 | 통과 | 미달 | | #10B981 (초록) | 2.54:1 | 미달 | 미달 | 미달 | | #F59E0B (주황) | 2.15:1 | 미달 | 미달 | 미달 |

밝은 초록과 주황은 흰 배경에서 글자색으로 쓰면 거의 예외 없이 걸립니다. 상태 표시나 아이콘 색으로는 괜찮지만 글자에는 더 어두운 단계를 써야 합니다. 반대로 어두운 배경에 흰 글자를 올리면 #1F2937 위의 흰색이 14.68:1로 넉넉합니다.

버튼 색 정할 때

버튼은 배경색 위의 글자색으로 계산합니다. 파란 버튼(#2563EB)에 흰 글자는 5.17:1로 통과하지만, 빨간 버튼(#EF4444)에 흰 글자는 3.76:1이라 일반 텍스트 기준에 미달합니다. 같은 빨강에 검은 글자를 올리면 5.58:1로 통과하는데, 관행과 달라 어색합니다. 실무에서는 빨강을 #DC2626이나 #B91C1C처럼 한 단계 어둡게 잡아 흰 글자가 통과하도록 조정합니다. 위 도구에서 배경색을 버튼색으로, 글자색을 흰색으로 두고 명도를 낮춰 가며 4.5:1이 되는 지점을 찾으면 됩니다.

버튼 테두리나 아이콘처럼 글자가 아닌 시각 요소는 인접한 색과 3:1만 넘으면 됩니다. 비활성 버튼의 흐린 글자는 이 기준의 예외이지만, 흐리게 만든 글자가 실제로는 읽혀야 하는 안내문이라면 예외가 아닙니다.

다크 모드에서는 반대로 봅니다

어두운 배경에서는 밝은 글자가 대비를 만듭니다. 순백 글자는 대비가 넉넉한 대신 눈이 부시다는 사용자가 많아, 실무에서는 약간 회색빛이 도는 밝은 색을 쓰되 4.5:1 위에서 멈춥니다. 라이트 모드에서 통과한 액센트 색을 다크 모드에 그대로 가져오면 배경이 어두워진 만큼 대비가 떨어져 미달하는 경우가 흔합니다. 같은 색상에서 명도만 올린 다크 모드 전용 값을 따로 두고, 이 도구의 배경색을 어두운 색으로 바꿔 두 모드를 각각 검사하세요. 두 모드 모두 통과하는 색 하나를 찾는 것보다 두 값을 따로 두는 편이 결과가 좋습니다.

왜 이것을 지켜야 하나

법적 요건이기도 합니다. 국내에서는 「지능정보화 기본법」과 웹 접근성 지침에 따라 공공기관 웹사이트가 이 기준을 지켜야 합니다. 민간 사이트도 접근성 인증을 받으려면 필요합니다.

법을 떠나서도 실익이 큽니다.

• 국내 성인 남성의 약 5~8%가 색각 이상을 갖고 있습니다
• 노안이 시작되면 대비가 낮은 글자를 읽기 어려워집니다
• 햇빛 아래 스마트폰에서는 누구나 대비가 낮은 화면을 못 읽습니다

마지막 항목이 특히 현실적입니다. 접근성 기준은 장애가 있는 사람만을 위한 것이 아닙니다.

조화 팔레트 쓰는 법

보색은 색상환에서 정반대에 있는 색입니다. 강조가 필요한 요소에 씁니다. 다만 넓은 면적에 나란히 두면 눈이 피로하므로 한쪽을 작게 쓰는 편이 좋습니다. 버튼 하나에만 보색을 쓰는 식입니다.

유사색은 색상환에서 가까운 색끼리입니다. 차분하고 통일감 있는 화면을 만듭니다. 안전한 선택입니다.

삼각 배색은 색상환을 셋으로 나눈 것입니다. 활기 있으면서도 균형이 잡힙니다. 하나를 주색으로 삼고 나머지 둘을 강조색으로 쓰면 안정적입니다.

명도 단계는 같은 색상에서 밝기만 다른 색들입니다. 디자인 시스템의 색 팔레트를 만들 때 출발점이 됩니다.

색만으로 정보를 전달하지 마세요

접근성에서 대비만큼 중요한 원칙입니다. 색이 유일한 구분 수단이면 안 됩니다.

• 오류 메시지를 빨간색으로만 표시 → 아이콘이나 텍스트를 함께
• 그래프의 계열을 색으로만 구분 → 패턴이나 라벨을 함께
• 필수 항목을 빨간 별표로만 → "필수" 글자를 함께

함께 확인하면 좋은 것

이미지의 색을 다루려면 이미지 포맷 변환기를, QR코드 색 대비는 QR코드 생성기에서 자동으로 검사합니다.