About
현재 언어: 한국어 영어로 보기

색상 변환 및 WCAG 대비 검사

HEX, RGB, HSL 사이에서 색상을 변환하고, 두 색상의 WCAG 접근성 대비를 확인해요. 모든 계산은 브라우저 안에서 이뤄집니다.

색상 변환

WCAG 대비 검사기

일반 텍스트 (16 px)

큰 텍스트 (24 px / 18.66 px 굵게)

대비비 —
WCAG AA 일반 텍스트— 큰 텍스트—
WCAG AAA 일반 텍스트— 큰 텍스트—
  1. 색상 피커로 색을 고르거나 HEX, RGB, HSL 값을 직접 입력하면 나머지 형식이 자동으로 갱신돼요.
  2. 아래로 내려가 "대비 검사기"에서 전경색과 배경색을 설정하세요.
  3. 계산된 대비비와 일반/큰 텍스트 기준의 AA · AAA 통과 여부 뱃지를 확인하세요.
  4. 디자인에 필요한 기준을 넘을 때까지 두 색 중 하나를 조정하세요.
어떤 도구인가요?

변환기는 하나의 색을 HEX(#rrggbb), RGB(rgb(r, g, b)), HSL(hsl(h, s%, l%)) 사이에서 실시간으로 변환해요. 디자인 시스템에서 쓰는 어떤 형식이든 붙여 넣으면 나머지 두 형식을 얻을 수 있습니다. 대비 검사기는 전경색과 배경색을 받아 sRGB 감마 곡선으로 선형화한 뒤, WCAG 2.x 대비비를 계산하고 일반 텍스트와 큰 텍스트 기준으로 AA · AAA 통과 여부를 알려줘요.

예시

입력 — 전형적인 브랜드 블루:

HEX  #2563eb
RGB  rgb(37, 99, 235)
HSL  hsl(221, 83%, 53%)

배경을 흰색(#ffffff)과 짝지으면:

Contrast ratio   5.17:1
WCAG AA normal   Pass
WCAG AA large    Pass
WCAG AAA normal  Fail (needs 7:1)
WCAG AAA large   Pass

이 색 조합이 WCAG AAA를 통과하지 못하는 이유는?

대비와 변환에서 가장 흔히 놓치는 함정들이에요:

  • AA 큰 텍스트를 일반 텍스트와 헷갈리는 경우. 큰 텍스트는 3:1만 넘으면 되기 때문에, H1에서는 멀쩡해 보이는 링크가 본문 크기에서는 실패할 수 있어요. 3.5:1이면 제목에서는 통과하지만 단락에서는 실패합니다.
  • HSL 명도를 대비의 대리값으로 쓰는 경우. hsl(0, 100%, 50%)(빨강)과 hsl(240, 100%, 50%)(파랑)은 L=50%로 같지만 실제 휘도는 크게 달라요. 대비는 HSL 명도가 아니라 반드시 RGB 값으로 계산하세요.
  • 알파 합성을 잊는 경우. 흰 배경 위의 rgba(0, 0, 0, 0.6) 텍스트는 실제로는 #666666과 같아요. 반투명 값이 아니라 평탄화된 HEX로 검사하세요.
  • HEX 자리 수를 잘못 쓰는 경우. #fff는 #ffffff로 확장되지만, #ffff는 알파 바이트가 포함된 4자리 단축 표기예요. HEX 입력이 조용히 거부될 때는 자리 수를 다시 확인해 보세요.
  • display-P3와 sRGB를 섞는 경우. Figma 등에서 광색역(wide gamut)으로 추출한 색은 sRGB 범위를 벗어날 수 있고, 브라우저는 이를 잘라냅니다. HEX를 복사하기 전에 원본 도구에서 sRGB로 변환해 주세요.
  • 순백색만 배경으로 두고 검사하는 경우. 실제 레이아웃에서 텍스트가 #f3f4f6 위나 사진 위에 놓인다면 체감 대비는 더 낮아요. 실제 배경으로 검사하세요.
자주 묻는 질문

WCAG AA를 통과하려면 대비비가 얼마나 되어야 하나요?

WCAG 2.1 AA는 일반 본문 텍스트에 4.5:1, 큰 텍스트에는 3:1이 필요해요. "큰 텍스트"란 18 pt(24 px) 이상의 일반 굵기이거나 14 pt(18.66 px) 이상의 굵은 글씨를 말합니다. UI 구성요소나 그래픽 객체는 배경에 대해 3:1이 필요해요. AAA는 일반 텍스트 7:1, 큰 텍스트 4.5:1로 기준이 더 높아집니다.

출력된 HSL을 다시 입력하면 RGB 값이 조금 달라지는 이유는 뭔가요?

대부분의 도구가 HSL을 정수 퍼센트로 저장하기 때문에, RGB → HSL → RGB를 왕복하면 각 채널에서 1 정도 값이 튈 수 있어요. 사람이 느끼는 차이(JND) 이내라 화면에서는 보이지 않지만, 정확한 왕복이 필요하다면 HEX나 RGB를 기준값으로 두고 HSL은 표시용으로만 쓰는 편이 좋습니다.

이 도구는 대비 계산에 sRGB 감마 보정을 사용하나요?

네. 대비는 WCAG 2.x 공식을 따라요 — 각 sRGB 채널을 감마 곡선으로 선형화하고 상대 휘도를 계산한 뒤, (L1 + 0.05) / (L2 + 0.05)로 구합니다. 단순히 채널 평균을 쓰거나 HSL 명도를 대입하면 오차가 커서 WCAG 결과와 맞지 않아요.

알파 값이나 반투명 색은 어떻게 다뤄야 하나요?

WCAG 대비는 불투명 배경 기준이기 때문에, 전경색을 실제 배경 위에 합성해 알파를 먼저 평탄화해야 해요. 예를 들어 흰 페이지 위의 불투명도 50% 검은 텍스트 블록은 결국 흰색 위의 #808080과 같습니다. 반투명 값 대신 이 평탄화된 HEX를 검사기에 넣으세요.

HEX #rgb와 #rrggbb는 같은 값인가요?

네. 3자리 단축 형식은 각 니블을 두 번 반복해 확장돼서 #f0c는 #ff00cc가 됩니다. 4자리와 8자리 형식은 알파 채널을 포함해요. 이 도구는 3자리, 6자리, 8자리 HEX를 모두 받으며, WCAG는 합성된 불투명 색을 요구하므로 대비 계산에서 알파 바이트는 참고용으로만 취급해요.

제가 입력하거나 선택한 색을 저장하나요?

아니요. 변환이나 대비 검사에 쓰신 색은 어떠한 기록도 남기지 않아요. 입력하거나 드래그해 넣은 값은 탭을 닫는 순간 모두 사라집니다 — 로그도, 색상 값에 대한 분석도 없어요. 직접 확인하고 싶다면 브라우저 개발자 도구를 열어 보셔도 됩니다.