HEX·RGB·HSL은 같은 색의 세 표기
HEX는 빨강·초록·파랑을 각각 16진수 두 자리로 적은 것입니다. #8B5CF6은 R이 139, G가 92, B가 246이라는 뜻이고 RGB 표기와 값이 같습니다. 세 자리 축약형 #F00은 각 자리를 두 번 반복한 #FF0000과 같은 색입니다.
HSL은 색상·채도·명도로 색을 나눕니다. 색상은 색상환 위의 각도라 0도와 360도가 같은 빨강이고, 채도는 회색에서 얼마나 멀어졌는지, 명도는 검정과 흰색 사이 어디쯤인지를 나타냅니다. 같은 색의 밝기만 조절하고 싶을 때 HSL이 다루기 편한 이유입니다.
대비비는 두 색의 상대 휘도를 비교한 값으로 1:1에서 21:1까지 나옵니다. 각 채널을 감마 보정한 뒤 0.2126·0.7152·0.0722의 가중치로 더해 휘도를 구하고, 밝은 쪽과 어두운 쪽에 각각 0.05를 더해 나눕니다. 초록에 가중치가 큰 것은 사람 눈이 초록에 가장 민감하기 때문입니다.
색을 고를 때 놓치는 것
화면에서 예뻐 보이는 조합이 읽히지 않는 경우가 많습니다. 웹 접근성 기준은 본문 글자에 4.5:1, 18pt 이상 큰 글자나 굵은 글자에 3:1을 요구합니다. 연한 회색 글씨는 디자인 시안에서는 세련돼 보여도 이 기준을 넘지 못하는 일이 흔합니다.
밝기만으로 대비를 짐작하면 틀립니다. 노랑과 흰색은 둘 다 밝아 대비가 거의 없고, 파랑과 검정은 둘 다 어두워 마찬가지입니다. 색상환에서 멀리 떨어져 있다고 대비가 확보되는 것이 아니라 휘도 차이가 있어야 합니다.
색만으로 정보를 구분하면 색각 이상이 있는 사용자가 읽지 못합니다. 빨강·초록으로 증가와 감소를 표시할 때는 화살표나 부호를 함께 넣어야 합니다. 관행도 나라마다 반대입니다 — 한국·일본·중국 증시는 상승을 빨강으로, 미국과 유럽은 초록으로 칠합니다.