색상 변환 · 명암비 검사

세 가지 표기법

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

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

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

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

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을 준 검정 글자는 실제로는 회색이고, 대비 계산에서도 그 회색 값으로 판정됩니다.

왜 이것을 지켜야 하나

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

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

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

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

조화 팔레트 쓰는 법

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

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

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

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

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

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

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

함께 확인하면 좋은 것

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