색상 대비 검사

두 색의 명도 대비율을 계산해 WCAG 웹 접근성 기준 통과 여부를 알려줍니다. 글자색과 배경색을 넣으면 대비율(예: 4.6:1)과 함께 AA·AAA 등급, 일반 텍스트·큰 텍스트 기준 통과 여부가 바로 나옵니다.

사용 방법

1. 글자색과 배경색을 HEX 로 입력하거나 색상 선택기로 고릅니다.
2. 대비율과 AA/AAA 통과 여부를 확인합니다.
3. 탈락이면 한쪽 색의 명도를 조절해 가며 통과 지점을 찾습니다.
4. 통과한 조합의 HEX 값을 복사해 스타일에 적용합니다.

이럴 때 씁니다

• 브랜드 색 위에 얹을 글자색이 읽히는지 출시 전에 검증할 때.
• 회색 계열 본문·플레이스홀더가 너무 옅지 않은지 확인할 때.
• 다크 모드 팔레트의 글자 대비를 라이트 모드와 별도로 검사할 때.
• 접근성 심사·감사 대응으로 근거 수치가 필요할 때.

기준 수치와 실무 감각

WCAG AA 는 일반 텍스트 4.5:1, 큰 텍스트(18pt 또는 굵은 14pt 이상) 3:1 을 요구하고, AAA 는 각각 7:1·4.5:1 입니다. 흰 배경의 순검정은 21:1, 흔한 회색 #999 는 2.8:1 로 AA 탈락입니다 — 옅은 회색 본문이 접근성 검사에서 가장 자주 걸리는 항목입니다. 대비율은 색상(hue)이 아니라 명도 차이의 함수라서, 빨강·초록처럼 색은 달라도 명도가 비슷하면 탈락합니다. 색약 사용자에게는 색 차이가 아니라 명도 차이가 정보를 전달한다는 점에서 이 수치가 중요합니다.

관련 도구

자주 묻는 질문

색상 대비 검사는 어떤 색상 형식을 지원하나요?

HEX는 3자리·6자리·8자리 형태를 지원하고, RGB와 RGBA, HSL과 HSLA를 지원합니다. 공통 내부 표현을 거쳐 변환하므로 형식을 오가며 왕복해도 값이 어긋나지 않습니다.

접근성 검사를 통과하려면 명도 대비가 얼마나 필요한가요?

WCAG 2.1 AA 등급은 본문 텍스트에 4.5 대 1, 큰 텍스트에 3 대 1을 요구합니다. 큰 텍스트란 굵은 글씨 18.66픽셀 또는 일반 24픽셀 이상을 뜻합니다. AAA 등급은 각각 7 대 1과 4.5 대 1로 올라갑니다.

결과를 CSS에 바로 붙여넣어도 되나요?

네. 생성된 값은 유효한 CSS 색상 문법이라 스타일시트, 디자인 토큰 파일, 컴포넌트의 인라인 스타일에 수정 없이 그대로 붙여넣을 수 있습니다.