무료 변환기

색상 대비 체커(WCAG)

WCAG AA 및 AAA 접근성 준수를 위해 두 색상 간의 명암비를 확인하세요. 무료이며 즉시 실행되며 브라우저에서 완전히 실행됩니다.

샘플 텍스트 - 보통 크기

샘플 작은 텍스트 — 14px

명암비:21.00:1
WCAG AA일반 텍스트패스
WCAG AA큰 텍스트패스
WCAG AAA일반 텍스트패스
WCAG AAA큰 텍스트패스

이 도구에 대하여

WCAG 2.1 접근성 지침에 따라 전경 텍스트와 배경 색상 간의 색상 대비 비율을 확인하세요. 색상을 16진수 코드, RGB 값 또는 HSL 값으로 입력하면 일반 텍스트 크기와 큰 텍스트 크기 모두에서 WCAG AA 및 AAA 준수에 대한 통과/실패 결과와 함께 명암비를 즉시 확인할 수 있습니다.

사용 방법

  1. 색상 선택기 또는 16진수 입력을 사용하여 전경(텍스트) 색상을 입력하거나 선택합니다.
  2. 배경색을 입력하거나 선택하세요.
  3. 명암비와 WCAG 2.1 AA/AAA 통과/실패 결과를 즉시 확인하세요.
  4. 원하는 규정 준수 수준에 도달할 때까지 색상을 조정합니다.

자주 묻는 질문

WCAG 규정을 준수하려면 어떤 명암비가 필요합니까?
WCAG AA에서는 일반 텍스트의 경우 4.5:1, 큰 텍스트(18pt+ 또는 14pt+ 굵은 글꼴)의 경우 3:1이 필요합니다. WCAG AAA는 일반 텍스트의 경우 7:1, 큰 텍스트의 경우 4.5:1을 요구합니다. 가능한 최대 비율은 21:1(흰색 바탕에 검은색)입니다.
색상 대비가 왜 중요한가요?
대비가 충분하면 시력이 낮거나 색맹인 사용자 또는 밝은 햇빛 아래에서 화면을 보는 사용자가 텍스트를 읽을 수 있습니다. 이는 또한 많은 웹사이트에 대한 ADA 및 EU 접근성 규정에 따른 법적 요구 사항이기도 합니다.
WCAG에서 '큰 텍스트'로 간주되는 것은 무엇입니까?
큰 텍스트는 일반 두께의 경우 18pt(24px) 이상, 굵은 텍스트의 경우 14pt(18.66px) 이상으로 정의됩니다. 큰 텍스트는 본질적으로 읽기 쉽기 때문에 대비 요구 사항이 낮습니다.
이 도구는 텍스트가 아닌 요소의 대비를 확인합니까?
WCAG 2.1에서는 UI 구성 요소 및 그래픽 개체(버튼, 아이콘, 양식 필드)에 대해 3:1 명암비가 필요합니다. 이 도구를 사용하여 이를 확인할 수도 있습니다. 구성 요소와 배경 색상을 입력하기만 하면 됩니다.