색상 코드 변환·대비
HEX·RGB·HSL 색상 코드를 서로 바꾸고 두 색의 대비를 잽니다
자세한 안내
색상 코드 변환·대비는 웹 디자인과 접근성 점검에 쓰는 도구입니다. 색 하나를 HEX·RGB·HSL로 바꿔 보여 주고, 글자색과 배경색의 대비비를 재서 웹 콘텐츠 접근성 지침(WCAG) 2.1의 기준을 넘는지 알려 줍니다.
상대 휘도는 sRGB 각 채널을 0~1로 바꾼 뒤 0.03928 이하는 12.92로 나누고, 그보다 크면 (값+0.055)÷1.055의 2.4제곱으로 선형화해 빨강 0.2126, 초록 0.7152, 파랑 0.0722를 곱해 더합니다. 기준점 0.03928은 WCAG 2.1 원문 값이며 2.2의 0.04045와 8비트 색에서는 결과가 같습니다. AA 판정은 성공 기준 1.4.3, AAA 판정은 1.4.6을 따릅니다.
대비비는 글꼴 굵기, 화면 밝기, 색각 차이를 반영하지 않으므로 기준을 넘어도 실제로 읽기 편한지는 직접 확인해야 합니다. 국내 웹 접근성 품질인증은 한국형 웹 콘텐츠 접근성 지침(KWCAG)을 따르며, 그 명도 대비 기준도 본문 4.5:1 이상입니다.
이럴 때 써요
- 디자인 시안의 색 코드를 CSS 로 옮길 때
- 글자가 배경 위에서 잘 읽히는지 확인할 때
- 같은 색의 밝은·어두운 단계를 만들 때
사용 순서
- 색 코드를 넣거나 색 선택기·막대로 고릅니다.
- HEX·RGB·HSL 값을 복사하고 필요하면 밝기 칩을 누릅니다.
- 글자색과 배경색을 넣어 대비비와 AA·AAA 판정을 확인합니다.
참고
- 본문 글자는 대비 4.5:1(AA) 이상을 권합니다. 7:1 이면 AAA 입니다.
- 큰 글자(24px 이상, 또는 약 18.7px 이상 굵은 글자)는 3:1 이면 AA 입니다.
- 4.48:1 처럼 4.5 에 조금 못 미치면 미달입니다. 판정은 반올림 전 값으로 합니다.
- "위 색을 글자색으로"를 누르면 위에서 고른 색을 바로 대비 검사에 넣습니다.
자주 묻는 질문
- 대비비는 어떻게 계산하나요?
- WCAG 2.1 의 상대 휘도 공식으로 두 색의 밝기(L)를 구한 뒤 (밝은 L + 0.05) ÷ (어두운 L + 0.05) 로 나눕니다. 검정과 흰색이 가장 큰 21:1 입니다.
- 투명한 색(알파)도 대비를 재나요?
- 아니요. 알파는 뒤에 무엇이 깔리는지에 따라 보이는 색이 달라져 대비 계산에서 뺍니다. 실제로 보이는 색을 코드로 넣어 주세요.
- HSL 값이 조금씩 달라져요.
- HSL 은 정수로 반올림해 보여 줘서, RGB 로 돌아갈 때 1 정도 차이가 날 수 있습니다.