Developer Utility
Color Contrast Checker
텍스트 색상과 배경 색상의 대비율을 계산하고 WCAG AA, AAA 접근성 기준 통과 여부를 확인할 수 있는 색상 대비 검사 도구입니다.
색상 입력
텍스트 색상과 배경 색상을 HEX 코드로 입력하거나 색상 선택기로 지정하세요.
이 문장은 실제 웹페이지에서 텍스트가 배경 위에 어떻게 보이는지 확인하기 위한 예시입니다. 본문, 버튼, 카드, 배너, 다크모드 색상 조합을 점검할 때 활용할 수 있습니다.
검사 결과
계산된 대비율과 WCAG 접근성 기준 통과 여부를 확인할 수 있습니다.
색상을 입력한 뒤 대비율 검사하기 버튼을 눌러주세요.
검사 결과가 여기에 표시됩니다.
색상 대비 기준 비교
텍스트 크기와 접근성 수준에 따라 필요한 대비율 기준이 달라집니다.
본문, 설명문, 메뉴, 폼 라벨처럼 작은 글자는 최소 4.5:1 이상의 대비율을 맞추는 것이 좋습니다.
큰 제목이나 굵은 텍스트는 일반 텍스트보다 낮은 3:1 기준도 AA 통과로 인정됩니다.
버튼, 배지, 카드, 입력창 배경색을 정할 때도 텍스트가 충분히 읽히는지 함께 확인하는 것이 좋습니다.
도움말
Color Contrast Checker란?
Color Contrast Checker는 텍스트 색상과 배경 색상의 대비율을 계산해 웹페이지에서 글자가 충분히 잘 보이는지 확인할 수 있는 무료 개발자 디자인 유틸리티입니다.
버튼, 배너, 본문 텍스트, 카드 UI, 다크모드 색상 조합, 블로그 스킨 색상 등을 점검할 때 활용할 수 있습니다.
지원 기능
- 텍스트 색상과 배경 색상의 대비율 계산
- WCAG AA, AAA 기준 통과 여부 확인
- 일반 텍스트와 큰 텍스트 기준 분리 표시
- 색상 선택기와 HEX 코드 입력 지원
- 색상 조합 미리보기
- 검사 결과 복사 기능
이런 작업에 활용할 수 있습니다
- 웹사이트 본문 텍스트 색상 대비 확인
- 버튼 텍스트와 배경색 접근성 점검
- 블로그 스킨 색상 조합 확인
- 다크모드 UI 색상 대비 검사
- 랜딩페이지, 카드 UI, 배너 디자인 점검
- 디자인 시스템 색상 팔레트 검토
WCAG AA와 AAA 기준은 무엇인가요?
WCAG는 웹 콘텐츠 접근성을 평가하기 위한 기준입니다. 일반 텍스트는 AA 기준에서 4.5:1 이상, AAA 기준에서 7:1 이상의 대비율을 권장합니다. 큰 텍스트는 AA 기준에서 3:1 이상, AAA 기준에서 4.5:1 이상을 권장합니다.
일반 텍스트와 큰 텍스트의 차이는 무엇인가요?
일반 텍스트는 본문, 설명문, 메뉴처럼 상대적으로 작은 글자입니다. 큰 텍스트는 제목처럼 크기가 크거나 굵게 표시되는 글자를 의미하며, 일반 텍스트보다 낮은 대비율 기준이 적용될 수 있습니다.
색상 대비율이 높으면 항상 좋은 디자인인가요?
대비율이 높으면 가독성에는 유리하지만, 너무 강한 대비는 시각적으로 부담스러울 수 있습니다. 접근성 기준을 만족하면서 브랜드 톤과 화면 분위기에 맞는 색상 조합을 선택하는 것이 좋습니다.
HEX 색상은 어떤 형식으로 입력할 수 있나요?
#111827 같은 6자리 HEX 코드와 #fff 같은 3자리 HEX 코드를 입력할 수 있습니다. # 기호를 빼고 입력해도 자동으로 보정됩니다.
검사 결과만으로 접근성이 완전히 보장되나요?
이 도구는 색상 대비율을 기준으로 접근성 통과 여부를 확인합니다. 실제 사용성은 폰트 크기, 굵기, 화면 밝기, 사용자 환경에 따라 달라질 수 있으므로 최종 적용 전 실제 화면에서도 확인하는 것을 권장합니다.