사용 방법
화면은 위쪽의 색상 변환기와 아래쪽의 명도 대비 검사로 나뉘고, 둘은 서로 영향을 주지 않습니다.
색상 변환기
- 색상 칸에 CSS 색상 값을 넣거나 왼쪽의 색상 선택기로 고릅니다. HEX는 3·4·6·8자리를 모두 읽고
#을 빼도 됩니다.rgb(51, 102, 255)와rgb(51 102 255)두 가지 쓰기 방식,rebeccapurple같은 색 이름도 읽습니다. - 색상 견본 옆의 알파(불투명도) 슬라이더로 투명도를 바꿉니다. 견본 뒤의 체크무늬가 비치는 정도로 확인할 수 있습니다.
- 모든 형식에 HEX, RGB, HSL, HWB, LAB, LCH, OKLCH 일곱 줄이 나오고 줄마다 복사할 수 있습니다. 알파가 100%보다 낮으면 8자리로 적은 “HEX (알파 포함)” 줄이 하나 더 생깁니다.
명도 대비 검사
- 글자색과 배경색을 넣습니다. “색상 바꾸기”를 누르면 둘이 뒤바뀝니다.
- 명도 대비에 비율이 나오고, 그 아래 네 칸에 기준별로 “통과” 또는 “실패”가 표시됩니다.
- 맨 아래 미리보기에서 두 색을 큰 글자와 보통 글자로 확인합니다.
한 가지 색, 일곱 가지 표기
처음 들어 있는 #3366ff는 이렇게 바뀝니다.
| 형식 | 결과 | 숫자의 뜻 |
|---|---|---|
| HEX | #3366ff |
빨강·초록·파랑을 두 자리 16진수로 |
| RGB | rgb(51, 102, 255) |
빨강·초록·파랑을 0 ~ 255로 |
| HSL | hsl(225, 100%, 60%) |
색상각, 채도, 명도 |
| HWB | hwb(225 20% 0%) |
색상각, 섞은 흰색의 양, 섞은 검정의 양 |
| LAB | lab(47.4 26.93 -82.47) |
명도, 초록-빨강 축, 파랑-노랑 축 |
| LCH | lch(47.4 86.76 288.08) |
명도, 채도, 색상각 |
| OKLCH | oklch(0.5726 0.2338 265.28) |
명도, 채도, 색상각 |
HEX와 RGB는 같은 숫자를 다른 진법으로 적은 것이고, HSL과 HWB는 그 숫자를 사람이 다루기 쉬운 축으로 다시 나눈 것입니다. LAB·LCH·OKLCH는 사람이 색을 느끼는 방식에 맞춰 만든 색공간이며, OKLCH는 LCH를 지각적으로 더 균일하게 다듬은 것으로 CSS에서 oklch()로 바로 쓸 수 있습니다. 같은 파란색인데 색상각이 HSL에서는 225, LCH에서는 288.08, OKLCH에서는 265.28로 서로 다릅니다. 색공간마다 각도의 기준이 다르기 때문이며, 한 형식의 숫자를 다른 형식에 옮겨 적으면 다른 색이 됩니다.
HSL의 명도와 OKLCH의 명도
HSL의 명도는 빨강·초록·파랑 가운데 가장 큰 값과 가장 작은 값의 평균이라 눈에 보이는 밝기와 잘 맞지 않습니다. 순수한 노랑 hsl(60 100% 50%)와 순수한 파랑 hsl(240 100% 50%)는 HSL 명도가 똑같이 50%입니다. 이 둘을 변환기에 넣으면 다음과 같습니다.
- 노랑은
oklch(0.968 0.211 109.77)로, OKLCH 명도가 0.968입니다. - 파랑은
oklch(0.452 0.3132 264.05)로, OKLCH 명도가 0.452입니다.
흰 배경 위에서 재 보면 차이가 그대로 드러납니다. 명도 대비 검사에서 배경색을 #ffffff로 두면 노랑 #ffff00은 1.07:1로 거의 보이지 않고, 파랑 #0000ff는 8.59:1입니다. 색상만 다르고 밝기가 비슷한 색 묶음을 만들 때는 HSL 명도가 아니라 OKLCH 명도를 맞추는 편이 결과가 고릅니다.
WCAG 명도 대비는 이렇게 계산합니다
WCAG 2의 공식을 씁니다. 각 색의 상대 휘도(relative luminance, 선형으로 바꾼 빨강·초록·파랑 값에 가중치를 곱해 더한 값)를 구하고, 밝은 쪽을 L1, 어두운 쪽을 L2로 두어 (L1 + 0.05) ÷ (L2 + 0.05)를 계산합니다. 두 색이 같으면 1:1, 검정과 흰색이면 21:1입니다.
| 화면의 기준 | 필요한 비율 |
|---|---|
| AA · 일반 텍스트 | 4.5:1 |
| AA · 큰 텍스트 | 3:1 |
| AAA · 일반 텍스트 | 7:1 |
| AAA · 큰 텍스트 | 4.5:1 |
“큰 텍스트”는 보통 굵기로 18pt(약 24px) 이상이거나 굵은 글씨로 14pt(약 19px) 이상인 글자입니다. AA는 대부분의 접근성 지침이 요구하는 수준이고 AAA는 그보다 엄격한 수준입니다.
- 처음 들어 있는 글자색
#1f2937, 배경색#ffffff는 14.67:1로 네 기준을 모두 통과합니다. - 회색
#767676은 흰 배경에서 4.54:1로 AA 일반 텍스트를 통과합니다. 한 단계 밝은#777777은 4.47:1로 실패합니다.
화면의 비율은 소수 둘째 자리 아래를 반올림하지 않고 버립니다. 4.499:1인 조합이 4.50:1로 보이면서 실패로 표시되는 일이 없도록 한 것입니다. 통과 여부는 버리기 전의 값으로 판정합니다.
반투명한 색의 대비
WCAG 공식은 불투명한 색만 다룹니다. 그래서 알파가 있는 색은 화면에 실제로 보일 색으로 먼저 합친 뒤 계산합니다.
- 배경색이 반투명하면 흰 바탕 위에 올린 색으로 봅니다.
- 글자색이 반투명하면 그렇게 정해진 배경색 위에 올린 색으로 봅니다.
글자색 rgb(0 0 0 / 50%), 배경색 #ffffff는 회색 글자가 되어 3.97:1이고 AA 큰 텍스트만 통과합니다. 실제 페이지에서 반투명한 배경 뒤에 흰색이 아닌 색이나 사진이 깔려 있다면 결과가 다릅니다. 그런 경우에는 화면에 최종으로 보이는 배경색을 불투명한 값으로 넣어 재세요.
sRGB 색역을 벗어난 색
LAB·LCH·OKLCH로는 보통의 sRGB 화면이 낼 수 없는 색까지 적을 수 있습니다. oklch(70% 0.3 150)이 그런 색입니다. 이 값을 넣으면 색역 밖이라는 안내가 뜨고 결과는 다음과 같이 나옵니다.
- HEX는
#00cb00, RGB는rgb(0, 203, 0)입니다. 입력한 색이 아니라 sRGB 범위에 맞춰 잘라 낸 색입니다. - LAB·LCH·OKLCH 줄은 잘라 내지 않은 원래 색을 그대로 적습니다.
- HSL과 HWB 줄은 HEX·RGB와 마찬가지로 잘라 낸 색을 그 형식으로 옮긴 것입니다.
hsl(120, 100%, 39.84%)와hwb(120 0% 20.32%)로 나오고, 범위를 벗어난 숫자는 나오지 않습니다.
색상 견본과 색상 선택기에 보이는 색도 잘라 낸 색입니다.