이런 분께 유용합니다
- 본문과 버튼의 텍스트 색상을 정하는 디자이너
- 다크모드와 디자인 시스템 색상 토큰을 점검하는 개발자
- WCAG AA·AAA 대비 기준을 실제 화면에 적용하려는 운영자
Developer Utility
Color Contrast Checker
텍스트 색상과 배경 색상의 대비율을 계산하고 WCAG AA, AAA 접근성 기준 통과 여부를 확인할 수 있는 색상 대비 검사 도구입니다.
대비율 계산
텍스트와 배경 색상의 상대 휘도 차이를 계산해 명확한 대비율을 표시합니다.
WCAG 기준 검사
일반 텍스트와 큰 텍스트 기준으로 AA, AAA 통과 여부를 구분해 확인합니다.
실시간 미리보기
입력한 색상 조합이 실제 UI에서 어떻게 보이는지 즉시 확인할 수 있습니다.
색상 입력
텍스트 색상과 배경 색상을 HEX 코드로 입력하거나 색상 선택기로 지정하세요.
Preview
Color Contrast Checker
이 문장은 실제 웹페이지에서 텍스트가 배경 위에 어떻게 보이는지 확인하기 위한 예시입니다. 본문, 버튼, 카드, 배너, 다크모드 색상 조합을 점검할 때 활용할 수 있습니다.
검사 결과
계산된 대비율과 WCAG 텍스트 대비 기준 충족 여부를 확인할 수 있습니다.
Contrast Ratio
-
색상을 입력한 뒤 대비율 검사하기 버튼을 눌러주세요.
일반 텍스트 AA
4.5:1 이상
대기
일반 텍스트 AAA
7:1 이상
대기
큰 텍스트 AA
3:1 이상
대기
큰 텍스트 AAA
4.5:1 이상
대기
검사 결과가 여기에 표시됩니다.
색상 대비 기준 비교
텍스트 크기와 접근성 수준에 따라 필요한 대비율 기준이 달라집니다.
일반 텍스트
본문, 설명문, 메뉴, 폼 라벨처럼 작은 글자는 최소 4.5:1 이상의 대비율을 맞추는 것이 좋습니다.
큰 텍스트
큰 제목이나 굵은 텍스트는 일반 텍스트보다 낮은 3:1 기준도 AA 통과로 인정됩니다.
UI 컴포넌트
버튼, 배지, 카드, 입력창 배경색을 정할 때도 텍스트가 충분히 읽히는지 함께 확인하는 것이 좋습니다.
도움말
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 이상을 권장합니다.
일반 텍스트와 큰 텍스트의 차이는 무엇인가요?
WCAG에서 큰 텍스트는 대략 18pt 이상 또는 14pt 이상의 굵은 글자로 정의합니다. CSS px 값과 실제 굵기·서체에 따라 달라질 수 있으므로 조건이 확실하지 않으면 일반 텍스트 기준을 적용하세요.
색상 대비율이 높으면 항상 좋은 디자인인가요?
대비율이 높으면 가독성에는 유리하지만, 너무 강한 대비는 시각적으로 부담스러울 수 있습니다. 접근성 기준을 만족하면서 브랜드 톤과 화면 분위기에 맞는 색상 조합을 선택하는 것이 좋습니다.
HEX 색상은 어떤 형식으로 입력할 수 있나요?
#111827 같은 6자리 HEX 코드와 #fff 같은 3자리 HEX 코드를 입력할 수 있습니다. # 기호를 빼고 입력해도 자동으로 보정됩니다.
검사 결과만으로 접근성이 완전히 보장되나요?
이 도구는 불투명한 sRGB HEX 두 색상의 텍스트 대비율만 계산합니다. 투명도, 그라데이션, 배경 이미지, 글꼴 크기·굵기, 비텍스트 UI와 실제 사용성은 별도로 확인해야 합니다.
WCAG 대비율을 텍스트 크기와 실제 배경에 맞춰 해석하는 법
색상 대비율은 텍스트와 배경의 상대 휘도를 비교한 값입니다. 숫자 하나만 보고 전체 접근성이 확보됐다고 판단하기보다 글자 크기·굵기, 투명도와 실제 배경을 함께 확인해야 합니다.
대표 활용 상황
- 본문 텍스트가 일반 텍스트 AA 4.5:1을 충족하는지 확인할 때
- 큰 제목에 3:1 기준을 적용해도 되는지 검토할 때
- 브랜드 색상 위의 흰색·검은색 글자를 비교할 때
처음부터 결과 확인까지
- 1
브라우저 개발자 도구나 디자인 파일에서 최종 텍스트와 배경의 불투명 HEX 값을 확인합니다.
- 2
텍스트 색상과 배경 색상을 각각 입력하고 대비율을 계산합니다.
- 3
본문·메뉴·폼 라벨은 일반 텍스트 AA 4.5:1 이상인지 우선 확인합니다.
- 4
큰 텍스트 기준을 쓰려면 실제 크기와 굵기가 WCAG의 큰 텍스트 조건에 맞는지 확인합니다.
- 5
투명도나 배경 이미지가 있다면 합성된 최종 색상을 다시 추출해 계산합니다.
- 6
확대, 고대비 모드와 실제 기기에서도 읽기 쉬운지 사용자 관점으로 검토합니다.
일반 본문
- 입력
- #111827 텍스트 / #ffffff 배경
- 결과
- 높은 대비율로 일반 텍스트 AA·AAA 기준 확인
실제 적용 시 글자 크기와 배경이 입력값과 같은지도 확인해야 합니다.
큰 제목만 가능한 조합
- 입력
- 계산 결과가 3:1 이상 4.5:1 미만인 조합
- 결과
- 큰 텍스트 AA만 충족
본문에는 쓰지 말고 큰 텍스트 조건을 충족하는 제목인지 별도로 확인합니다.
계산·처리 기준
WCAG의 sRGB 상대 휘도 계산식과 0.04045 선형화 경계값을 적용한 뒤 밝은 색과 어두운 색의 휘도를 비교합니다. 일반 텍스트는 AA 4.5:1·AAA 7:1, 큰 텍스트는 AA 3:1·AAA 4.5:1로 표시합니다.
알아둘 한계
- 불투명한 sRGB HEX 두 색상만 계산하며 알파 투명도와 색상 프로필 차이는 반영하지 않습니다.
- 그라데이션과 배경 이미지 위 텍스트는 위치별 최종 배경색을 따로 확인해야 합니다.
- 글꼴 크기와 굵기를 자동 감지하지 않으므로 큰 텍스트 기준 적용 여부는 사용자가 판단합니다.
- 텍스트 대비 통과는 키보드 사용성, 대체 텍스트와 비텍스트 UI를 포함한 전체 접근성 통과를 뜻하지 않습니다.
개인정보 처리
색상 값과 계산은 현재 브라우저에서 처리하며 서버에 저장하지 않습니다.
참고 자료
함께 쓰면 좋은 도구
- 이미지 ALT 검사기
이미지 대체 텍스트 누락과 빈 값을 함께 점검합니다.
- CSS clamp 생성기
반응형 글자 크기 범위를 CSS clamp로 설계합니다.
자주 묻는 질문
큰 텍스트는 몇 px인가요?
WCAG는 약 18pt 또는 14pt 굵은 글자를 기준으로 설명합니다. CSS px 환산과 실제 굵기를 확인하고 애매하면 일반 텍스트 기준을 적용하세요.
투명한 색상도 그대로 입력해도 되나요?
아닙니다. 투명도가 배경과 합성된 최종 불투명 색상을 구해 입력해야 실제 대비에 가까운 결과를 얻습니다.
AA를 통과하면 접근성 검토가 끝나나요?
아닙니다. 이 결과는 텍스트 색상 대비 한 항목만 다루므로 포커스, 키보드, 의미 구조와 대체 콘텐츠를 별도로 검사해야 합니다.