콘텐츠로 건너뛰기
디자인 및 색상

WCAG 대비 검사기

WCAG 2.1 AA 및 AAA에 대해 전경 및 배경 쌍을 확인하십시오.

브라우저에서 실행됩니다.100% 비공개업로드 없음
도구를 불러오는 중…

이 도구를 공유하세요

필요하신 분에게 보내주세요.

Xfin
전체 가이드 읽기

WCAG 대비 검사기 정보

저대비 텍스트는 웹에서 가장 흔히 발생하는 접근성 오류입니다. 일반 텍스트, 큰 텍스트 및 UI 구성 요소에 대한 정확한 명암비와 합격/불합격 판정을 받으려면 텍스트와 배경색을 입력하세요.

사용방법

  1. 1텍스트 및 배경 설정색상 입력을 사용하거나 디자인 토큰의 hex 값을 붙여넣으세요.
  2. 2비율을 읽어보세요이 도구는 상대 휘도와 명암비를 소수점 이하 두 자리까지 계산합니다.
  3. 3수정하고 다시 테스트하세요쌍이 실패하면 통과할 때까지 밝기를 조정한 다음 호환되는 hex 값을 복사합니다.

왜 이 wcag 대비 검사기을 사용합니까?

  • 기기에서 아무것도 남지 않습니다.. 작업은 브라우저 탭에서 이루어집니다. 이 앱에는 업로드 엔드포인트가 없으므로 귀하의 파일과 텍스트는 저장, 기록 또는 볼 수 없습니다.
  • 업로드가 없습니다.. 서버 왕복을 완전히 건너뜁니다. 결과는 네트워크 속도나 대기열 크기가 아닌 자체 CPU에 따라 제한됩니다.
  • 무료, 계정 없음, 할당량 없음. 가입 장벽도 없고, 워터마크도 없고, 일일 한도도 없습니다. 선택적 계정은 여러 장치에 걸쳐 즐겨찾기와 사전 설정을 저장하기 위해서만 존재합니다.

자주 묻는 질문

내 색상 쌍을 여기서 사용해도 안전한가요?

예. 이 도구는 JavaScript를 사용하여 브라우저에서 완전히 실행됩니다. 붙여넣거나 연 내용은 서버로 전송되지 않으며, 페이지를 닫은 후에도 페이지에는 사본이 보관되지 않습니다.

계정을 만들어야 하나요?

아니요. 로그인하지 않고도 모든 도구를 완전히 사용할 수 있습니다. 계정은 저장된 즐겨찾기와 재사용 가능한 사전 설정만 추가합니다.

전화에서 작동합니까?

예. 인터페이스는 큰 터치 대상과 스택형 레이아웃을 갖춘 모바일 우선이므로 데스크톱은 물론 휴대폰, 태블릿에서도 작동합니다.

WCAG에는 어떤 비율이 필요합니까?

AA에서는 일반 텍스트의 경우 4.5:1, 큰 텍스트(18pt 또는 14pt 굵은 텍스트)의 경우 3:1이 필요합니다. AAA는 이를 7:1과 4.5:1로 높였습니다. 텍스트가 아닌 UI 구성요소는 최소 3:1이 필요합니다.

색상이 괜찮아 보이지만 실패하는 이유는 무엇입니까?

인지된 밝기는 색상에 따라 다릅니다. 포화된 파란색과 녹색은 보이는 것보다 휘도가 낮은 경우가 많으므로 견본을 신뢰하기보다는 항상 실제 쌍을 측정하세요.

도구 상자의 같은 모서리에서 더 많은 무료 유틸리티를 얻을 수 있습니다.