win-j 로고
개인 기술 블로그

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 컴포넌트

버튼, 배지, 카드, 입력창 배경색을 정할 때도 텍스트가 충분히 읽히는지 함께 확인하는 것이 좋습니다.

사용 가이드

WCAG 대비율을 텍스트 크기와 실제 배경에 맞춰 해석하는 법

색상 대비율은 텍스트와 배경의 상대 휘도를 비교한 값입니다. 숫자 하나만 보고 전체 접근성이 확보됐다고 판단하기보다 글자 크기·굵기, 투명도와 실제 배경을 함께 확인해야 합니다.

작성 · 검토
win-j
최종 검토
2026-09-30

이런 분께 유용합니다

  • 본문과 버튼의 텍스트 색상을 정하는 디자이너
  • 다크모드와 디자인 시스템 색상 토큰을 점검하는 개발자
  • WCAG AA·AAA 대비 기준을 실제 화면에 적용하려는 운영자

대표 활용 상황

  • 본문 텍스트가 일반 텍스트 AA 4.5:1을 충족하는지 확인할 때
  • 큰 제목에 3:1 기준을 적용해도 되는지 검토할 때
  • 브랜드 색상 위의 흰색·검은색 글자를 비교할 때

처음부터 결과 확인까지

  1. 1

    브라우저 개발자 도구나 디자인 파일에서 최종 텍스트와 배경의 불투명 HEX 값을 확인합니다.

  2. 2

    텍스트 색상과 배경 색상을 각각 입력하고 대비율을 계산합니다.

  3. 3

    본문·메뉴·폼 라벨은 일반 텍스트 AA 4.5:1 이상인지 우선 확인합니다.

  4. 4

    큰 텍스트 기준을 쓰려면 실제 크기와 굵기가 WCAG의 큰 텍스트 조건에 맞는지 확인합니다.

  5. 5

    투명도나 배경 이미지가 있다면 합성된 최종 색상을 다시 추출해 계산합니다.

  6. 6

    확대, 고대비 모드와 실제 기기에서도 읽기 쉬운지 사용자 관점으로 검토합니다.

사용 예시 1

검정 글자와 흰 배경

입력
#000000 / #ffffff
결과
21.00:1, 네 가지 텍스트 대비 기준 모두 통과

색상을 서로 바꿔도 대비율은 같습니다.

사용 예시 2

일반 텍스트 AA 경계 근처의 회색

입력
#777777 / #ffffff
결과
4.48:1, 일반 텍스트 AA 실패·큰 텍스트 AA 통과

실제 값은 약 4.4781입니다. 판정에는 반올림 전 값을 사용하므로 4.5 이상이 필요한 일반 텍스트 AA는 통과하지 못합니다.

계산·처리 기준

WCAG의 sRGB 상대 휘도 계산식과 0.04045 선형화 경계값을 적용한 뒤 밝은 색과 어두운 색의 휘도를 비교합니다. 일반 텍스트는 AA 4.5:1·AAA 7:1, 큰 텍스트는 AA 3:1·AAA 4.5:1로 표시합니다. 화면은 소수 둘째 자리로 표시하지만 통과 판정은 반올림 전 수치로 계산합니다.

알아둘 한계

  • 불투명한 sRGB HEX 두 색상만 계산하며 알파 투명도와 색상 프로필 차이는 반영하지 않습니다.
  • 그라데이션과 배경 이미지 위 텍스트는 위치별 최종 배경색을 따로 확인해야 합니다.
  • 글꼴 크기와 굵기를 자동 감지하지 않으므로 큰 텍스트 기준 적용 여부는 사용자가 판단합니다.
  • 텍스트 대비 통과는 키보드 사용성, 대체 텍스트와 비텍스트 UI를 포함한 전체 접근성 통과를 뜻하지 않습니다.
개인정보 처리

색상 값과 계산은 현재 브라우저에서 처리하며 서버에 저장하지 않습니다.

자주 묻는 질문

큰 텍스트는 몇 px인가요?

18pt 이상 또는 14pt 이상 굵은 글자가 기준입니다. CSS에서는 약 24px 또는 18.67px 굵은 글자에 해당하며 실제 글꼴 크기와 굵기를 확인해야 합니다.

투명한 색상도 그대로 입력해도 되나요?

아닙니다. 투명도가 배경과 합성된 최종 불투명 색상을 구해 입력해야 실제 대비에 가까운 결과를 얻습니다.

AA를 통과하면 접근성 검토가 끝나나요?

아닙니다. 이 결과는 텍스트 색상 대비 한 항목만 다루므로 포커스, 키보드, 의미 구조와 대체 콘텐츠를 별도로 검사해야 합니다.

색상을 입력해 수정하면 결과가 사라지는 이유는 무엇인가요?

이전 색상으로 검사한 결과를 복사하지 않도록 비웁니다. 수정한 색상으로 다시 검사한 뒤 결과를 복사하세요.