무료 웹 접근성 도구

색상 대비 검사기

이곳에서 바로 텍스트 색상과 배경색을 WCAG 2.2 기준으로 비교하거나, 페이지 주소를 입력해 최소 대비 기준에 못 미치는 모든 텍스트를 측정된 색상, 통과하는 가장 가까운 색상과 함께 찾아보십시오.

대비 계산기

텍스트 색상과 배경색을 입력하십시오. 모든 계산은 브라우저에서 이루어집니다.

16픽셀 일반 텍스트는 이렇게 보입니다.

24픽셀 큰 텍스트

버튼 윤곽선

대비율4.54:1

이 색상 조합의 WCAG 2.2 결과
일반 텍스트, AAWCAG 1.4.3, 4.5:1 필요통과
큰 텍스트, AAWCAG 1.4.3, 3:1 필요통과
일반 텍스트, AAAWCAG 1.4.6, 7:1 필요실패
큰 텍스트, AAAWCAG 1.4.6, 4.5:1 필요통과
아이콘, 테두리, 입력 필드WCAG 1.4.11, 3:1 필요통과

이 배경에서 통과하는 가장 가까운 텍스트 색상

큰 텍스트는 24픽셀 이상 또는 굵게 18.66픽셀 이상인 텍스트를 말합니다. 대비율은 내림하여 표시하므로 4.499:1은 4.49:1로 표시되어 실패하며, 이는 WCAG의 의도와 같습니다.

또는 페이지를 스캔해 대비가 낮은 텍스트 찾기

무료입니다. 입력한 주소를 약 20초 만에 점검합니다.

이 도구가 점검하는 항목

  • 두 색상의 WCAG 대비율

    계산기는 WCAG 2.2 정의에 있는 상대 휘도 공식을 사용해 일반 텍스트, 큰 텍스트, 인터페이스 요소에 대한 AA 및 AAA 결과를 보여 드립니다. 계산은 브라우저에서 실행됩니다.

  • 통과하는 색상 계산

    조합이 실패하면 같은 색조에서 4.5:1 또는 7:1에 도달하는 가장 가까운 텍스트 색상을 찾아 드리므로, 디자인을 최소한으로만 바꿀 수 있습니다.

  • 페이지의 대비가 낮은 모든 텍스트

    페이지 스캔은 실제 Chrome 브라우저에서 axe-core의 color-contrast 규칙을 실행하고, 실패한 요소마다 텍스트 색상, 배경색, 글꼴 크기, 대비율을 보여 드립니다.

  • 색상 조합별로 묶어서 표시

    테마 색상 하나를 바꾸면 대개 그 색상을 사용하는 모든 요소가 수정되므로, 실패 항목을 텍스트 색상과 배경색 조합별로 묶어서 보여 드립니다.

  • 큰 텍스트에 맞는 기준값

    24픽셀 이상 또는 굵게 18.66픽셀 이상인 텍스트는 4.5:1이 아니라 3:1이면 됩니다. 스캔은 각 요소의 계산된 크기와 굵기를 바탕으로 알맞은 기준값을 적용합니다.

  • 측정하지 못한 항목과 그 이유

    이미지, 그라데이션, 겹친 요소 위의 텍스트는 이유와 함께 따로 표시하므로, 눈으로 확인해야 할 항목을 정확히 알 수 있습니다.

점검할 수 없는 항목

  • 사진, 그라데이션, 동영상 위의 텍스트는 측정할 수 없습니다. 소프트웨어는 각 글자 뒤에 이미지의 어느 부분이 있는지 알 수 없으므로, 이런 텍스트는 직접 확인하실 수 있도록 목록으로 보여 드립니다.
  • 호버, 포커스 등 다른 상태는 검사할 수 없습니다. 스캔은 페이지가 로드된 상태만 봅니다. 이런 상태의 색상은 계산기로 확인하십시오.
  • 페이지의 아이콘, 테두리, 입력 필드를 WCAG 1.4.11 기준으로 스캔할 수는 없습니다. 계산기에서는 입력한 어떤 색상 조합이든 3:1 결과를 보여 드립니다.
  • 글자가 이미지에 박혀 있는 배너처럼 이미지의 일부인 텍스트는 읽을 수 없습니다.
  • 입력한 페이지 외에는 테스트할 수 없습니다. 무료 전체 스캔은 주요 페이지를 최대 5개까지 테스트합니다.

중요한 이유

낮은 명도 대비는 웹에서 가장 흔한 접근성 오류입니다. WebAIM이 2026년에 상위 100만 개 홈페이지를 분석한 결과 83.9%에서 대비가 낮은 텍스트가 발견되었으며, 페이지당 평균 34건이었습니다.

흐린 텍스트는 저시력이나 색각 이상이 있는 사람은 물론, 밝은 햇빛 아래에서 휴대폰을 보는 누구에게나 읽기 어렵습니다. WCAG 2.2 성공 기준 1.4.3(레벨 AA)은 최소 대비율을 일반 텍스트 4.5:1, 큰 텍스트 3:1로 정합니다.

또한 가장 적은 비용으로 고칠 수 있는 문제 중 하나입니다. 대부분의 사이트에서는 몇 가지 테마 색상이 거의 모든 실패의 원인이며, 이 색상들을 바꾸면 모든 페이지가 한 번에 수정됩니다.

결과 해석 방법

대비율
1:1(같은 색 두 개)부터 21:1(흰 바탕에 검은색)까지입니다. 대비율은 내림하여 표시하므로, 4.49:1로 표시되는 조합은 최소 기준인 4.5:1을 충족하지 못합니다.
일반 텍스트, AA(4.5:1)
WCAG 1.4.3에 따라 본문, 링크, 레이블, 버튼 텍스트에 적용되는 최소 기준입니다.
큰 텍스트, AA(3:1)
24픽셀 이상 또는 굵게 18.66픽셀 이상인 텍스트에 적용됩니다. WCAG는 큰 텍스트를 18포인트 또는 굵게 14포인트로 정의합니다.
AAA(7:1 및 4.5:1)
WCAG 1.4.6의 향상된 수준입니다. AA 준수에는 필요하지 않지만 더 많은 사람이 읽는 데 도움이 됩니다.
아이콘, 테두리, 입력 필드(3:1)
WCAG 1.4.11은 컨트롤과 그래픽에서 사용자가 보고 이용해야 하는 부분에 대해 인접한 색상과 3:1의 대비를 요구합니다.
실패한 텍스트
스캔에서 기준값보다 낮게 측정된 각 요소를 선택자, 색상, 크기, 대비율과 함께 보여 드립니다. 하나를 열면 마크업과, 가능한 경우 스크린샷을 볼 수 있습니다.
눈으로 확인 필요
axe-core가 측정하지 못한 텍스트와 그 이유입니다. 예를 들어 뒤에 이미지나 그라데이션이 있는 경우입니다.

흔한 문제를 해결하는 방법

  • 흰 바탕의 회색 텍스트

    #767676은 흰 바탕에서 4.5:1(4.54:1)에 도달하는 거의 가장 밝은 회색입니다. #999999(2.84:1)처럼 더 밝은 회색은 푸터, 캡션, 플레이스홀더, 가격에서 흔히 실패의 원인이 됩니다.

  • 브랜드 색상 버튼 위의 흰색 텍스트

    브랜드 색상 위의 흰색 텍스트가 실패한다면 버튼 배경을 몇 단계 어둡게 하거나 어두운 텍스트를 사용하십시오. 호버와 포커스 색상은 더 밝아지는 경우가 많으므로 함께 확인하십시오.

  • 양식의 플레이스홀더 텍스트

    플레이스홀더 텍스트도 텍스트이므로 4.5:1이 필요합니다. 더 좋은 방법은 입력란 위에 보이는 레이블을 두어 플레이스홀더가 유일한 안내가 되지 않게 하는 것입니다.

  • 이미지와 슬라이더 위의 텍스트

    텍스트를 불투명하거나 반투명한 배경 위에 두거나 이미지에 어두운 오버레이를 더한 다음, 텍스트 뒤에 있는 이미지의 가장 밝은 부분을 확인하십시오.

  • 할인 배지와 작은 글씨

    비활성 컨트롤의 텍스트는 1.4.3 적용 대상이 아니지만, 할인 배지, 가격, 법적 고지 같은 작은 글씨는 예외가 아닙니다. 이런 텍스트가 쇼핑몰 페이지에서 가장 흐린 경우가 많습니다.

낮은 색상 대비: 중요한 이유와 Shopify, WooCommerce 및 모든 사이트에서의 수정 방법

이 도구에 관한 질문

WCAG는 어느 정도의 대비율을 요구하나요?

레벨 AA에서는 일반 텍스트 4.5:1, 큰 텍스트 3:1(성공 기준 1.4.3), 사용자 인터페이스 구성 요소와 의미 있는 그래픽 3:1(1.4.11)입니다. 레벨 AAA는 7:1과 4.5:1을 요구합니다(1.4.6).

큰 텍스트란 무엇인가요?

WCAG는 큰 텍스트를 18포인트 이상 또는 굵게 14포인트 이상으로 정의합니다. CSS 픽셀로는 약 24px, 굵은 글씨는 18.66px입니다.

로고도 최소 대비 기준을 충족해야 하나요?

아니요. WCAG 1.4.3은 로고타입과 로고나 브랜드명의 일부인 텍스트를 예외로 두며, 순전히 장식적인 텍스트와 비활성 컨트롤의 텍스트도 예외입니다.

스캔이 이미지 위의 텍스트를 검토 대상으로 표시하는 이유는 무엇인가요?

axe-core는 단색을 측정합니다. 텍스트 뒤에 이미지, 그라데이션, 다른 요소가 있으면 어떤 색끼리 맞닿는지 알 수 없으므로, 추측하지 않고 사람이 확인할 요소로 보고합니다.

AAA 대비가 필요한가요?

AAA는 레벨 AA 준수에 필요하지 않으며, W3C도 사이트 전체에 AAA를 요구하도록 권장하지 않습니다. 그래도 디자인이 허락한다면 본문 텍스트를 7:1로 맞추는 것은 좋은 습관입니다.

APCA는 WCAG의 일부인가요?

아니요. APCA는 아직 초안 단계인 WCAG 3에 대해 논의되어 온 다른 대비 계산 방식입니다. 현재의 준수 여부는 이 도구가 계산하는 WCAG 2 대비율로 판단합니다.

출처

관련 도구

접근성 수정 리포트($174, 1회 결제)는 전체 무료 스캔을 바탕으로 더 많은 페이지, 모든 발견 사항에 대한 변경 사항, PDF, 수정 결과를 검증하는 재테스트를 제공합니다.

접근성 수정 리포트 소개