HEX 코드를 RGB·HSL·OKLCH 로 바꾸고 반대로도 읽어요. 배경색을 하나 더 넣으면 WCAG 대비비가 나오고, 일반 텍스트·큰 텍스트의 AA·AAA 통과 여부까지 바로 보여줘요. 계산은 전부 브라우저 안에서 해요.
대비비는 WCAG 2.x 상대휘도 공식으로 계산해요. 알파(투명도)는 무시해요 — 반투명 색의 실제 대비는 뒤에 깔린 배경에 따라 달라지니, 합성된 최종 색을 넣어야 정확해요.
OKLCH 는 CSS Color 4 의 지각 균등 좌표계예요. 명도(L)를 고정하고 색상각만 바꾸면 사람 눈에 느껴지는 밝기가 비슷하게 유지돼서, 디자인 토큰의 색 계단을 만들 때 HSL 보다 예측이 쉬워요.
HEX — `#FF8800`. 웹에서 가장 흔한 표기예요. 사람이 값만 보고 색을 떠올리기는 어려워요.
RGB — 빛의 삼원색을 0~255 로. 화면의 물리적 동작과 일치하지만, «조금 밝게» 를 만들려면 세 값을 다 조정해야 해요.
HSL — 색상(Hue)·채도(Saturation)·명도(Lightness). 사람의 직관에 가까워요. 명도만 올리면 밝아져요.
OKLCH — HSL 의 문제를 고친 최신 좌표계예요. HSL 은 «명도 50%» 인 노랑과 파랑이 실제로는 아주 다른 밝기로 보이는데, OKLCH 는 지각적으로 균등해서 L 값이 같으면 느껴지는 밝기도 비슷해요.
대비비는 두 색의 상대휘도로 계산해요: (밝은 색 + 0.05) ÷ (어두운 색 + 0.05). 결과는 1:1(같은 색)부터 21:1(검정 대 흰색)까지예요.
AA 기준 — 일반 텍스트 4.5:1, 큰 텍스트(18pt 이상 또는 14pt 굵게) 3:1.
AAA 기준 — 일반 텍스트 7:1, 큰 텍스트 4.5:1.
UI 요소(버튼 테두리, 입력창 경계, 아이콘)도 배경 대비 3:1 이 필요해요. 텍스트만 챙기고 이걸 놓치는 경우가 많아요.
한국 웹 접근성 지침(KWCAG)도 같은 수치를 따라요. 공공기관 사이트는 준수 의무가 있어요.
이 도구는 색을 파싱할 때 알파 값을 받지만 대비 계산에서는 버려요.
반투명 색의 실제 대비는 뒤에 무엇이 깔렸는지에 따라 달라지기 때문이에요. `rgba(0,0,0,0.5)` 는 흰 배경 위에서는 회색이지만 검은 배경 위에서는 거의 검정이에요.
정확히 재려면 합성된 최종 색을 넣어야 해요. 브라우저 개발자 도구의 색상 추출기(스포이드)로 실제 렌더된 색을 뽑아 넣으세요.
알파 값을 그대로 계산에 넣는 도구들이 있는데, 그건 틀린 답을 자신 있게 주는 거예요.
디자인 시스템은 색마다 명도 단계를 둬요 — 50, 100, 200 … 900 같은 식으로요.
HSL 로 만들면 문제가 생겨요. 명도만 바꿨는데 중간 단계에서 색이 탁해지거나 색상이 틀어져 보여요.
OKLCH 로 만들면 L 값만 균등하게 나눠도 지각적으로 고른 계단이 나와요. C(채도)를 살짝 조정하면 더 자연스러워요.
이 도구의 명도 램프 11단이 그 용도예요. 뽑은 값을 CSS 변수로 옮기면 바로 디자인 토큰이 돼요.
남성의 약 8%, 여성의 약 0.5% 가 색각 이상이에요. 대부분 적록색맹(빨강-초록 구분 어려움)이에요.
색만으로 정보를 전달하지 마세요. 「빨간 항목이 오류」 는 그 사람들에게 정보가 아니에요.
명도 차이를 함께 주세요. 색상이 달라도 명도가 같으면 색각 이상자에게는 같은 회색으로 보여요.
아이콘·모양·라벨을 더하세요. 오류에 ⚠️, 성공에 ✓ 를 붙이면 색과 무관하게 읽혀요.
차트라면 패턴(빗금·점)이나 직접 라벨링이 범례보다 나아요.
sRGB 가 웹의 기본 색 공간이에요. HEX·RGB 값은 sRGB 기준이에요.
Display P3 는 더 넓은 색역이에요. 최신 애플 기기와 고급 모니터가 지원해요. 같은 값이 더 선명하게 보일 수 있어요.
인쇄는 CMYK 예요. 화면의 밝은 색(특히 형광 계열)은 인쇄로 재현되지 않아요. 인쇄물이 «화면보다 칙칙한» 이유예요.
계산은 전부 브라우저 안에서 이뤄지고 서버로 아무것도 보내지 않아요.
표기법만 달라요. #FF8800 은 16진수로, rgb(255, 136, 0) 은 10진수로 쓴 같은 색이에요.
일반 텍스트는 4.5:1(AA)·7:1(AAA), 24px 이상이거나 굵은 18.66px 이상인 큰 텍스트는 3:1(AA)·4.5:1(AAA) 이에요.
같은 색의 밝고 어두운 단계를 한 번에 얻을 수 있어서, 버튼 hover·비활성 색이나 다크 모드용 색을 만들 때 씁니다.