이건 뭐 하는 도구인가요
이 도구는 색상을 HEX·RGB·HSL 형식으로 서로 변환하고, 무엇보다 두 색의 대비비(contrast ratio)를 계산해 웹 접근성 기준(WCAG) 통과 여부를 판정합니다. 텍스트 색과 배경색을 고르면 실제로 어떻게 보이는지 미리보기로 확인할 수 있고, 일반 텍스트 AA(4.5:1)·큰 텍스트 AA(3:1)·AAA(7:1) 기준의 통과/실패를 배지로 알려줍니다. 색약·저시력 사용자도 읽을 수 있는 UI를 만들려면 이 대비 기준을 지키는 것이 중요합니다. 또한 전경색을 기준으로 명도 단계 팔레트를 자동 생성해, 디자인 시스템의 색 계열(50~900 같은 톤)을 빠르게 잡을 수 있습니다. 모든 계산은 브라우저 안에서 이뤄지므로 빠르고 안전합니다.
대비비 계산 방법
대비비는 두 색의 상대 휘도(luminance)를 구해 (밝은 색 + 0.05) ÷ (어두운 색 + 0.05)로 계산합니다. 값은 1:1(동일)에서 21:1(흰색-검정)까지이며, 클수록 대비가 강합니다. 회색 #767676과 흰색의 대비는 4.54:1로 AA 경계선을 겨우 통과합니다.
자주 묻는 질문
큰 텍스트 기준은 무엇인가요?
굵은 글씨는 약 18.66px(14pt) 이상, 일반 굵기는 약 24px(18pt) 이상을 큰 텍스트로 봅니다. 큰 텍스트는 대비 기준이 완화됩니다.
3·4·6자리 HEX도 되나요?
#RGB(3자리)와 #RRGGBB(6자리)를 지원합니다. 잘못된 형식은 무시되고 마지막 유효 값이 유지됩니다.
🔒 입력·계산은 서버로 전송되지 않으며 100% 브라우저에서 처리됩니다.