명암비 검사기 – WCAG 대비 비율

접근성을 위한 색상 대비 확인

색상 대비는 가독성에 매우 중요합니다. 전경 텍스트와 배경 사이의 대비가 부족하면 읽기 어렵습니다. 특히 저시력 사용자나 색각 이상이 있는 사용자에게는 더욱 그렇습니다.

이 명암비 검사기는 두 색상 간의 대비 비율을 계산하고 WCAG 2.1 기준에 따라 평가합니다. HEX, RGB 또는 HSL 형식으로 색상을 입력하면 즉시 결과를 확인할 수 있습니다.

WCAG 대비 수준 이해하기

웹 콘텐츠 접근성 지침(WCAG)은 텍스트 가독성을 위한 최소 대비 비율을 정의합니다. 두 가지 적합성 수준이 있습니다:

• WCAG AA 일반 텍스트 — 최소 4.5:1의 대비 비율 필요
• WCAG AA 큰 텍스트 — 최소 3:1의 대비 비율 필요 (큰 텍스트는 18pt 이상 또는 14pt 이상 볼드)
• WCAG AAA 일반 텍스트 — 최소 7:1의 대비 비율 필요
• WCAG AAA 큰 텍스트 — 최소 4.5:1의 대비 비율 필요

AA는 대부분의 웹사이트와 앱이 목표로 하는 표준 수준입니다. AAA는 최대 가독성이 중요한 경우에 권장되는 강화된 수준입니다.

명암비 검사기 사용 방법

1. 전경(텍스트) 색상을 입력하세요 — HEX, RGB 또는 HSL
2. 지원되는 형식으로 배경색을 입력하세요
3. 대비 비율과 해당 배경에서의 텍스트 실시간 미리보기를 확인하세요
4. WCAG AA 및 AAA 수준에 대한 합격/불합격 결과를 확인하세요
5. 전환 버튼으로 전경색과 배경색을 빠르게 바꿀 수 있습니다

색상 대비를 확인해야 할 때

• 웹사이트나 앱의 텍스트 및 배경색 선택 시
• 디자인 시스템이 접근성 요구 사항을 충족하는지 확인할 때
• 버튼, 링크 또는 아이콘 색상과 배경 간의 대비 테스트 시
• 다크 모드 색상 조합 확인 시
• 법적 접근성 기준(ADA, EAA, Section 508) 충족 시

정확하고, 즉각적이며, 무료

이 도구는 표준 상대 휘도 공식을 사용하여 WCAG 2.1 대비 비율을 계산합니다. 결과는 브라우저에서 즉시 계산되며 어떤 서버로도 데이터가 전송되지 않습니다.

색상을 먼저 찾거나 변환해야 하나요? 색상 선택기를 사용하여 이미지에서 색상을 추출하거나, 색상 변환기를 사용하여 HEX, RGB, HSL 간에 변환하세요.

자주 묻는 질문

텍스트에 적합한 대비 비율은 얼마인가요?

일반 크기의 본문 텍스트의 경우 WCAG AA를 충족하려면 최소 4.5:1의 대비 비율이 필요합니다. 큰 텍스트(18pt 또는 14pt 볼드 이상)의 경우 최소 3:1입니다. 최고 수준의 접근성(WCAG AAA)을 위해서는 일반 텍스트에 최소 7:1이 필요합니다.

WCAG AA와 AAA의 차이점은 무엇인가요?

AA는 대부분의 웹사이트와 앱이 충족해야 하는 표준 적합성 수준입니다. AAA는 더 엄격한 대비 요구 사항을 가진 강화된 수준으로, 정부 또는 의료 웹사이트와 같이 최대 가독성이 중요한 콘텐츠에 권장됩니다.

WCAG에서 큰 텍스트란 무엇인가요?

큰 텍스트는 일반 굵기에서 18포인트(24px) 이상이거나 볼드에서 14포인트(약 18.66px) 이상인 텍스트를 말합니다. 큰 텍스트는 크기 자체가 가독성을 높여주기 때문에 대비 요구 사항이 낮습니다.

이 검사기는 어떤 색상 형식을 지원하나요?

HEX(예: #1E293B), RGB(예: rgb(30, 41, 59)), HSL(예: hsl(222, 33%, 17%)) 형식으로 색상을 입력할 수 있습니다. 도구가 형식을 자동 감지합니다.

대비 비율은 어떻게 계산되나요?

대비 비율은 WCAG 2.1 공식을 사용하여 계산됩니다: (L1 + 0.05) / (L2 + 0.05), 여기서 L1은 밝은 색상의 상대 휘도이고 L2는 어두운 색상의 상대 휘도입니다. 결과는 1:1(대비 없음)에서 21:1(최대 대비, 흰색 위의 검정)까지입니다.

이 도구는 모바일에서도 작동하나요?

네. 명암비 검사기는 데스크톱, 태블릿, 스마트폰 등 최신 브라우저가 있는 모든 기기에서 작동합니다.

이 도구는 무료인가요?

네. ColourPicker.app은 회원가입 없이 완전히 무료로 사용할 수 있습니다.

텍스트뿐만 아니라 UI 컴포넌트의 대비도 확인할 수 있나요?

WCAG 2.1은 의미 있는 UI 컴포넌트와 그래픽 객체에 대해서도 최소 3:1의 대비 비율을 요구합니다(성공 기준 1.4.11). 이 검사기로 해당 조합도 확인할 수 있습니다 — 비율 계산 방식은 동일합니다.