컬러 코드 변환기 & 대비 검사

색상 변환·명도 대비 계산식

명암비 = (밝은 색 상대 휘도 + 0.05) ÷ (어두운 색 상대 휘도 + 0.05), 상대 휘도는 WCAG 2.x 공식 기준

색 대비에서 확인할 기준

• WCAG AA 기준은 일반 텍스트 4.5:1, 큰 텍스트(18pt 이상 또는 굵게 14pt 이상) 3:1 이상의 명암비를 요구합니다.
• WCAG AAA 기준은 더 엄격하게 일반 텍스트 7:1, 큰 텍스트 4.5:1 이상을 요구하며, 공공기관·금융 서비스 등에서 권장됩니다.
• CMYK 값은 인쇄용 색상 근사치이며, 실제 인쇄 결과는 프린터·용지·잉크에 따라 차이가 있을 수 있어 참고용으로만 활용해야 합니다.
• HEX 코드는 3자리 축약형(예: #fff)과 6자리 정식 표기(#ffffff)를 모두 인식해 자동으로 정규화합니다.

이런 때 유용해요

• 웹사이트 본문 글자색과 배경색을 정할 때, 두 색을 각각 입력해 명암비가 4.5:1 이상(AA 통과)인지 확인한 뒤 디자인 시스템에 반영합니다.
• 브랜드 컬러(HEX)를 인쇄물 시안에 사용해야 할 때, CMYK 값으로 변환해 인쇄소에 전달할 색상 값을 준비합니다.

자주 묻는 질문

AA와 AAA 등급 중 무엇을 기준으로 삼아야 하나요?

일반적인 웹사이트는 WCAG AA 준수를 최소 기준으로 권장하며, 공공기관·의료·금융 등 접근성이 특히 중요한 서비스는 AAA 등급을 목표로 하는 경우가 많습니다.

큰 텍스트 기준은 무엇인가요?

WCAG에서는 18pt(24px) 이상이거나, 굵게(bold) 처리된 14pt(18.66px) 이상의 텍스트를 큰 텍스트로 분류해 일반 텍스트보다 낮은 명암비 기준을 적용합니다.

HSV와 HSL은 어떤 차이가 있나요?

둘 다 색상(Hue)·채도(Saturation)를 사용하지만, HSL은 명도를 밝기(Lightness)로, HSV는 명도를 값(Value)으로 계산하는 방식이 달라 같은 색이라도 세 번째 숫자가 다르게 나타납니다.

참고 자료

• W3C WCAG 2.2 - 명암비 기준(1.4.3)
• WebAIM - 명암비 검사 가이드

이용 시 유의사항

대비 계산은 WCAG 2.2의 상대 휘도 공식을 따릅니다. 기준을 통과해도 폰트 굵기, 배경 이미지, 주변 색에 따라 실제 가독성은 달라지므로 최종 판단은 실제 화면에서 하세요.