색상 대비 검사기

WCAG 접근성 규정 준수를 위한 색상 대비율을 확인합니다. 전경색과 배경색의 AA 및 AAA 준수 수준을 테스트합니다.

큰 텍스트 미리보기 (18pt+)

이 색상들로 일반 본문 텍스트가 어떻게 보이는지 확인하세요.

대비율

✓ AAA
일반 텍스트
(<18pt / <14pt bold)
✓ AAA
큰 텍스트
(≥18pt / ≥14pt bold)
✓ AA
UI 구성요소
(icons, borders)
AAA: 우수AA: 양호Fail: 불충분
WCAG 2.1은 일반 텍스트에 4.5:1 대비(AA)와 향상된 7:1(AAA)을 요구합니다. 큰 텍스트(18pt+ 또는 14pt 굵게)는 AA에 3:1, AAA에 4.5:1이 필요합니다. UI 구성요소는 최소 3:1이 필요합니다.

사용 방법

  1. 1

    전경색 입력

    HEX 색상 코드를 입력하거나 색상 선택기를 사용하여 텍스트 또는 아이콘 색상을 선택합니다.

  2. 2

    배경색 입력

    HEX 코드 또는 색상 선택기를 사용하여 배경색을 설정합니다. 일반적인 배경은 #FFFFFF(흰색)과 #000000(검정)입니다.

  3. 3

    WCAG 준수 확인

    대비율을 확인하고 색상이 일반 텍스트, 큰 텍스트, UI 구성요소에 대해 AA 및 AAA 기준을 통과하는지 확인합니다.

  4. 4

    접근성을 위해 조정

    색상이 실패하면 AA 또는 AAA 준수를 달성할 때까지 텍스트를 어둡게 하거나 배경을 밝게 해보세요.

자주 묻는 질문

어떤 대비율이 필요한가요?
WCAG AA 준수: 일반 텍스트 4.5:1, 큰 텍스트(18pt+) 3:1. AAA(향상): 일반 텍스트 7:1, 큰 텍스트 4.5:1. UI 구성요소와 아이콘은 최소 3:1이 필요합니다.
큰 텍스트란?
큰 텍스트는 일반 굵기에서 18pt(24px) 이상, 굵은 텍스트에서 14pt(18.5px) 이상으로 정의됩니다. 큰 텍스트는 대비 요구사항이 더 낮습니다.
AA와 AAA 중 어느 것이 더 좋나요?
AAA가 더 나은 접근성을 제공하지만 브랜드 색상으로 달성하기 어려울 수 있습니다. AA는 대부분의 맥락에서 최소 법적 요구사항입니다. 가능하면 특히 본문 텍스트에서 AAA를 목표로 하세요.
색맹 사용자에게도 작동하나요?
대비율은 저시력을 포함한 모든 사용자에게 도움이 됩니다. 그러나 색맹 사용자는 색상만 사용하는 표시를 피해야 할 수도 있습니다. 색상과 함께 패턴, 아이콘 또는 텍스트 레이블을 사용하세요.