무료 WCAG 색상 대비 검사기: 브라우저에서 AA 및 AAA 규정을 준수하는지 텍스트와 배경색을 테스트합니다. 16진수 또는 RGB 값을 입력하고 명암비를 확인하고 즉시 합격/불합격을 확인하세요. 로그인도 안 되고, 업로드도 안 됩니다.
sRGB 상대 휘도를 사용하여 전경(텍스트) 색상과 배경 색상 간의 WCAG 2.x 명암비를 계산합니다. 일반 텍스트와 큰 텍스트에 대한 WCAG AA 및 AAA 임계값에 대한 숫자 비율(예: 4.52:1)과 통과/실패를 얻을 수 있습니다. 이는 전체 사이트에 대한 완전 자동화된 접근성 감사가 아닌 디자인 QA 도우미입니다.
16진수(#RGB, #RRGGBB, #RRGGBBAA), rgb() 및 rgba(). Figma 토큰, CSS 변수 또는 디자인 문서의 브랜드 팔레트 값을 붙여넣습니다. #fff와 같은 짧은 16진수는 휘도가 계산되기 전에 #ffffff로 확장됩니다.
AA는 일반적인 법적 및 제품 기준으로 일반 텍스트의 경우 4.5:1, 큰 텍스트의 경우 3:1입니다. AAA는 더 엄격합니다: 일반 7:1, 대형 4.5:1. 많은 마케팅 사이트에서는 본문 카피에 대해 AA를 타겟팅하고 영웅 헤드라인이나 고위험 UI에 대해서만 AAA를 타겟팅합니다. 이 도구는 두 가지를 모두 표시하므로 디자인을 통해 방어 가능한 대상을 선택할 수 있습니다.
큰 텍스트는 최소 18포인트(24 CSS px) 일반 두께이거나 최소 14포인트 굵게(약 18.66 CSS px)입니다. 제목이 통과되더라도 버튼, 캡션 및 작은 글씨는 AA에 실패하는 경우가 많습니다. H1 견본뿐만 아니라 배송하는 모든 크기를 확인하세요.
아니요. 구문 분석 및 휘도 계산은 전적으로 브라우저에서 실행됩니다. 출시되지 않은 팔레트 실험 및 클라이언트 NDA 색상이 장치에 유지됩니다. 완료되면 공유 컴퓨터의 필드를 지웁니다.
rgba 및 #RRGGBBAA 값은 구문 분석되지만 대비는 불투명 sRGB 채널에서 평가됩니다. 검사기는 사진 배경 위에 텍스트를 알파 합성하지 않습니다. 이미지에 있는 텍스트의 경우 복사본 뒤의 효과적인 색상을 샘플링하거나 단색 오버레이를 먼저 사용한 다음 다시 확인하세요.
그렇습니다. 코어 비율 및 합격/불합격 경로는 로그인 없이 무료입니다.