대비 검사기 (WCAG 2.1)
WCAG 표준에 대한 텍스트/배경 대비를 확인합니다.
합격 색상을 자동으로 제안하고 규정 준수 인증서를 발급합니다.
🔤 텍스트 색상
🎨 배경색
이것은 일반 텍스트 (16px) 미리보기입니다.
이것은 굵은 텍스트 (16px 굵게)입니다.
이것은 큰 텍스트 (24px)입니다.
이것은 큰 굵은 텍스트 (18px 굵게)입니다.
대비 비율
12.63 : 1
AA 일반 텍스트
≥ 4.5:1
AA 큰 텍스트
≥ 3:1
AAA 일반 텍스트
≥ 7:1
AAA 큰 텍스트
≥ 4.5:1
💡 AA 표준을 충족하기 위한 제안 색상:
텍스트 색상 조정:
배경색 조정:
🏆 WCAG AA 규정 준수 인증서
* '𝕏에 공유'를 클릭하면 인증서도 자동으로 저장됩니다.
📋 CSS 코드
도구 소개
웹 또는 앱 색상 조합이 WCAG 2.1 대비 표준을 충족하는지 즉시 확인할 수 있는 무료 도구입니다. 대비가 낮으면 시각 장애가 있는 사람이 텍스트를 읽기 어렵습니다.
색상 조합이 실패할 경우 도구가 가장 가까운 합격 색상을 자동으로 제안하여 디자인을 크게 변경하지 않고도 접근성을 향상시키는 데 도움을 줍니다.
AA 표준을 통과하면 글로벌하게 공유할 수 있는 공식 WCAG AA 규정 준수 인증서를 저장할 수 있습니다.
사용 방법
색상 입력
텍스트 색상 및 배경색에 대해 색상 선택기를 클릭하거나 HEX 코드/RGB를 직접 입력합니다.
결과 확인
대비 비율 및 WCAG AA/AAA 합격/실패 상태가 실시간 미리보기와 함께 업데이트됩니다.
인증서 발급
AA 기준치를 통과하면 공식 인증서를 저장하고 쉽게 공유할 수 있습니다.
용어 사전
- 대비 비율 (Contrast Ratio)
- 전경색과 배경색 간의 빛 차이를 나타내는 수치입니다. 1:1(차이 없음)에서 21:1(흰색 바탕에 검정) 범위입니다.
- WCAG (웹 콘텐츠 접근성 지침)
- W3C에서 설정한 웹 콘텐츠에 대한 접근성을 높이는 방법을 정의하는 국제 표준입니다. 전 세계 정부에서 이러한 지침에 대한 준수를 시행합니다.
- AA 표준
- 대비에 대한 중간 범위 목표입니다. 일반 텍스트는 최소 4.5:1 비율이 필요하며 큰 텍스트(18pt 이상)는 3:1이 필요합니다. 이는 대부분의 기업 환경에 대한 법적 기준선입니다.
- AAA 표준
- 특수한 접근성 요구 사항을 목표로 하는 가장 엄격한 WCAG 표준입니다. 일반 텍스트의 경우 7:1, 큰 텍스트의 경우 4.5:1이 필요합니다. 디자인 선택을 크게 제한할 수 있습니다.
- 상대 휘도 (Relative Luminance)
- 색 공간 내 어느 점의 상대적인 밝기입니다. 인간의 눈 인식에 맞게 조정된 수학적 감마 계산을 활용하여 0에서 1 사이의 척도로 색상 점수를 매깁니다.
- 접근성 (a11y)
- 시각 장애, 인지적 제약 및 연령 관련 쇠퇴를 포함하여 장애가 있는 사람들이 사용할 수 있는 환경을 조성하는 방법입니다.
자주 묻는 질문
- Q.웹 텍스트의 권장 대비 비율은 얼마인가요?
- WCAG AA 표준에 따르면 일반 텍스트는 최소 4.5:1의 비율이 필요합니다. 큰 텍스트(일반적으로 18pt 또는 14pt 굵게)는 3:1만 필요합니다.
- Q.이 도구는 색맹을 시뮬레이션하나요?
- 아니요, 이 버전은 수학적으로 대비 비율을 확인하는 데 중점을 둡니다. 이 도구와 함께 전용 색맹 시뮬레이션 소프트웨어를 사용하십시오.
- Q.알고리즘은 어떻게 비율을 계산하나요?
- 두 색상의 상대적 휘도를 계산하고 (L1 + 0.05) / (L2 + 0.05) 척도를 사용하여 정확한 WCAG 권장 공식을 구현합니다.
- Q.AA 또는 AAA 규정 준수를 목표로 해야 하나요?
- 대부분의 상업 운영에 대한 글로벌 산업 표준 및 법적 요구 사항은 AA 레벨입니다. AAA는 매우 엄격하며 일반적으로 전문 정부 또는 장애인 플랫폼에만 의무화되어 있습니다.
- Q.내 브랜드 색상 데이터가 클라우드 서버로 전송되나요?
- 절대 아닙니다. 모든 색채 분석 및 인증서 렌더링은 완벽한 기업 개인 정보 보호를 보장하기 위해 로컬 장치의 브라우저 메모리 내에서 전적으로 수행됩니다.
- Q.HEX 코드 이외의 형식으로 색상을 입력할 수 있나요?
- 예, HEX 형식(예: #ffffff) 외에도 색상 선택기를 사용하여 시각적으로 색상을 선택하거나 RGB 좌표값을 직접 입력할 수 있습니다.
- Q.생성된 인증서가 법적 구속력이 있나요?
- W3C 공식에 따른 조합 합격에 대한 신뢰할 수 있는 수학적 증명이지만, 포괄적인 제3자 접근성 감사를 대체하지는 않습니다.
활용 사례
웹 디자인 검증
랜딩 페이지 및 회사 사이트에 대한 WCAG 규정 준수를 보장하기 위해 디자인 중에 대비를 확인합니다.
모바일 앱 UI 리뷰
버튼 텍스트 및 레이블이 시각 장애가 있는 사용자에게 가독성이 있는지 확인합니다.
접근성 규정 준수
전 세계적으로 ADA, EN 301 549 또는 WCAG 요구 사항을 충족하도록 대비 문제에 대해 사이트를 감사합니다.
프레젠테이션
슬라이드 및 문서 텍스트 색상이 모든 대상 청중이 확실하게 읽을 수 있는지 확인합니다.
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.