색상 대비 검사기

접근성을 보장하기 위해 전경과 배경 색상 간의 대비 비율을 테스트하세요.

색상을 확인하세요

색상 조합을 테스트하여 텍스트 가독성을 위한 WCAG 접근성 표준을 충족하는지 확인하세요.

9.14 대 1
대비
AAA
텍스트 결과
매우 좋음

비교: #31C36B에 #000000

텍스트

16px, 레귤러 (400)

일반 텍스트로 간주됩니다.

  • AA (WCAG 1.4.3): 최소 4.5:1

    통과
  • AAA (WCAG 1.4.6): 최소 7:1

    통과

UI 구성 요소 및 그래픽

아이콘, 입력 필드 테두리, 포커스 표시기 등 인터페이스를 사용하려면 알아야 하는 요소들입니다.

  • AA (WCAG 1.4.11): 최소 3:1

    통과
9.14 대 1. 텍스트: AA 통과, AAA 통과. UI 구성 요소: 통과.
검사 방법
비교된 색상(블렌딩 후)
텍스트 #000000, 배경 #31C36B
상대 명도
텍스트 0.0000, 배경 0.4074
공식
(L1 + 0.05) / (L2 + 0.05) 여기서 L1은 더 밝은 색의 명도이고 L2는 더 어두운 색의 명도입니다.
정확한 비율
9.1489 대 1, 화면에는 9.14 대 1로 표시됩니다. 화면에 보이는 값은 반올림된 값이 아닌 잘라낸 값이어서 실제보다 더 좋아 보이지 않습니다. 요구사항과 비교되는 것은 정확한 값입니다.

텍스트 크기: 16px, 레귤러 (400)

일반 텍스트로 간주됩니다. 큰 텍스트는 최소 24px(18pt) 또는 굵기 700 이상일 때 최소 18.67px(14pt)입니다. 크기는 반올림하지 않고 잘려서 표시됩니다.

일반 텍스트로 간주됩니다. 큰 텍스트는 최소 24px(18pt) 또는 굵기 700 이상일 때 최소 18.67px(14pt)입니다. 크기는 반올림하지 않고 잘려서 표시됩니다.

Aa
미리보기 제목

빠른 갈색 여우가 게으른 개를 뛰어넘습니다

작은 텍스트 예제 (12px)

텍스트
#000000
배경
#31c36b

WCAG 표준

레벨 AA

일반 텍스트의 최소 대비 비율은 4.5:1, 큰 텍스트는 3:1입니다. 대부분의 웹사이트에 필요합니다.

레벨 AAA

일반 텍스트의 향상된 대비 비율은 7:1, 큰 텍스트는 4.5:1입니다. 최적의 접근성을 위해 권장됩니다.

색상 대비 검사기

텍스트와 배경 색상의 대비 비율을 계산하세요.

텍스트와 배경 색상을 위해 색상 선택기를 사용하거나 RGB 16진수 형식으로 색상을 입력하세요 (예: #259 또는 #2596BE). 슬라이더를 조정하여 색상을 선택할 수 있습니다. 웹 콘텐츠 접근성 지침(WCAG)은 시각 사용자에게 텍스트가 읽기 쉬운지 판단하는 특정 지침을 제공합니다. 이 기준은 특정 알고리즘을 사용하여 색상 조합을 비교 가능한 비율로 매핑합니다. 이 공식을 사용하여 WCAG는 일반(본문) 텍스트와 배경의 색상 대비 비율이 4.5:1이면 적절하며, 큰 텍스트(18pt 이상 일반, 또는 14pt 이상 굵게)는 최소 3:1의 색상 대비 비율을 가져야 한다고 명시합니다.

주요 기능

  • 실시간 대비 비율 계산
  • WCAG AA & AAA 준수 검사
  • 세부 조정을 위한 HSL 슬라이더
  • 다양한 미리보기 형식

고급 도구

  • 자동 색상 수정
  • 텍스트 및 배경 샘플
  • 색상 이름 감지
  • 결과 내보내기

자주 묻는 질문

WCAG AA 준수를 위해 일반 텍스트는 최소 4.5:1의 대비 비율이 필요하며, 큰 텍스트(18pt 또는 14pt 굵게)는 3:1이 필요합니다.

WCAG AAA는 더 높은 대비 비율을 요구합니다. 일반 텍스트는 7:1, 큰 텍스트는 4.5:1이며, AA는 각각 4.5:1과 3:1입니다.

자동 수정 기능을 사용하면 디자인 의도를 유지하면서 텍스트 또는 배경 색상을 조정할 수 있습니다. 또는 AA/AAA 기준에 맞는 최적 범위를 시각적으로 보여주는 HSL 슬라이더로 색상을 직접 조정할 수도 있습니다.

녹색 영역과 AA/AAA 표시는 WCAG 준수를 위한 최적 범위를 보여줍니다. 방향 힌트(밝은 쪽/어두운 쪽)는 현재 색상 조합을 기준으로 대비를 개선하는 방향을 알려줍니다.

네, 원하는 HEX 색상 코드를 입력하거나 색상 선택기로 색상을 고를 수 있습니다. URL이 자동으로 업데이트되므로 특정 색상 조합을 공유할 수 있습니다.