WCAG 명암비 검사기: AA, AAA 텍스트 준수 확인
이 WCAG 명암비 검사기는 전경색과 배경색 사이의 명암비를 계산한 뒤, 일반 텍스트와 큰 텍스트에 대한 AA 또는 AAA 요구사항과 비교합니다. 실시간 미리보기로 배경 위의 텍스트를 보여줘 가독성 평가에 도움이 됩니다. 기준값은 AA가 4.5:1과 3:1, AAA가 7:1과 4.5:1입니다.
이 WCAG 명암비 검사기는 전경색과 배경색 사이의 명암비를 계산합니다. 일반 텍스트와 큰 텍스트에 대한 WCAG AA, AAA 기준으로 결과를 등급 매기고, 배경 위의 텍스트를 볼 수 있는 실시간 미리보기를 제공합니다. 색상 명암비를 확인하고 가독성을 평가하는 동안 명확한 결과를 얻는 데 사용하세요.
색상을 AA 또는 AAA 기준으로 평가할지, 텍스트가 일반 텍스트인지 큰 텍스트인지 선택하세요. AA의 경우 요구 명암비는 일반 텍스트 4.5:1, 큰 텍스트 3:1입니다. AAA의 경우 일반 텍스트 7:1, 큰 텍스트 4.5:1입니다. 검사기는 선택한 요구사항과 비율을 비교해 보고합니다.
전경색과 배경색은 미리보기에서 역할이 다릅니다. 전경색은 텍스트 색상이고, 배경색은 그 뒤의 색상입니다. 두 색상을 함께 검사하면 각 색상을 따로 판단하는 대신 명암비를 함께 평가할 수 있습니다. 실시간 미리보기는 비율과 등급과 함께 빠른 시각적 확인을 제공합니다.
검사기는 브라우저에서 완전히 동작하며 입력은 사용자 기기에서 처리됩니다. 서버로 전송되는 데이터가 없습니다. 페이지가 로드된 후에는 오프라인으로 동작하고 무료로 사용할 수 있습니다. 개발자, 디자이너, DevOps 엔지니어는 WCAG 기준으로 색상 조합을 검사하고 인터페이스를 공유하거나 배포하기 전에 명암비 문제를 잡아낼 수 있습니다.
1단계: 검사할 전경색과 배경색을 입력하세요. 검사기가 비교하는 두 색상입니다.
2단계: 평가할 기준을 선택하세요. 검사기는 일반 텍스트와 큰 텍스트에 대한 AA 또는 AAA 기준으로 명암비를 등급 매깁니다.
3단계: 명암비와 등급을 확인하세요. 결과는 선택한 색상이 선택한 기준을 충족하는지 보여줍니다.
4단계: 실시간 미리보기를 확인하세요. 배경 위의 텍스트를 보면 가독성을 한눈에 판단할 수 있습니다.
사용 사례: 인터페이스에 사용하기 전에 전경색과 배경색 조합이 요구되는 WCAG 명암비 기준을 충족하는지 확인하세요.
사용 사례: 실패하는 색상 조합이 검토자나 사용자에게 전달되기 전에 미리 잡아내 평가를 앞당기세요.
사용 사례: 명암비 수치에만 의존하지 말고 통과/실패 결과와 이유를 함께 확인하세요.
사용 사례: 명암비를 확인하면서 실시간 미리보기로 배경 위의 텍스트가 어떻게 보이는지 판단하세요.
사용 사례: 텍스트 요구사항이 다를 때 일반 텍스트와 큰 텍스트를 AA 또는 AAA 기준으로 검사하세요.
사용 사례: 프로젝트가 따라야 하는 기준값에 제안된 색상 조합이 맞는지 검증하세요.