명암비 검사기
텍스트 색상과 배경 색상을 입력하면 WCAG 명암비를 계산하고 AA·AAA 통과 여부와 미리보기를 즉시 보여줍니다.
🔒 브라우저에서 로컬로 처리됩니다
Loading…
사용 방법
- 첫 번째 입력란에 텍스트(전경) 색상을 입력하거나 색상 선택기로 고르세요.
- 두 번째 입력란에 배경 색상을 입력하거나 색상 선택기로 고르세요.
- 명암비와 실제 색상 조합의 미리보기가 즉시 업데이트됩니다.
- 네 개의 배지를 확인해 일반·큰 텍스트에 대해 WCAG AA, AAA 기준을 통과하는지 확인하세요.
기능
- hex, rgb(), hsl() 색상 형식 지원
- WCAG 2.x 상대 휘도 명암비를 정확하게 계산
- 일반·큰 텍스트 각각의 AA, AAA 통과/실패 배지 표시
- 실제 텍스트와 배경 색상 조합을 실시간으로 미리보기
- 100% 클라이언트 처리 — 색상 정보가 브라우저 밖으로 나가지 않습니다
자주 묻는 질문
명암비는 어떻게 계산되나요?
WCAG 2.x 공식을 사용합니다. 각 색상의 sRGB 채널을 선형화해 상대 휘도를 구한 뒤, (L1 + 0.05) / (L2 + 0.05)로 비율을 계산합니다(L1은 더 밝은 색상의 휘도). 비율은 1:1(대비 없음)부터 21:1(검정과 흰색)까지입니다.
AA와 AAA의 차이는 무엇인가요?
AA는 대부분의 사이트가 목표로 하는 표준 준수 등급이고, AAA는 더 엄격한 강화 등급입니다. AA는 일반 텍스트 4.5:1, 큰 텍스트 3:1이 필요하며, AAA는 일반 텍스트 7:1, 큰 텍스트 4.5:1이 필요합니다.
WCAG에서 말하는 큰 텍스트란 무엇인가요?
큰 텍스트는 18pt(24px) 이상의 일반 굵기, 또는 14pt(18.66px) 이상의 굵은 글씨를 말합니다. 더 크고 굵은 획은 낮은 명암비에서도 읽기 쉬워 기준이 완화됩니다.
어떤 색상 형식을 입력할 수 있나요?
hex 코드(#000 또는 #000000), rgb()/rgba(), hsl()/hsla() 문자열을 입력할 수 있으며, 각 입력란 옆의 색상 선택기도 사용할 수 있습니다.
이 도구가 제 색상 정보를 저장하거나 업로드하나요?
아니요. 모든 분석과 명암비 계산은 브라우저 안에서 순수 JavaScript로 로컬에서 처리됩니다. 서버로 전송되거나 저장되지 않습니다.