무료 WCAG 색상 대비 검사기. 실시간 명암비 및 미리 보기, 16진수 또는 RGB를 사용하여 AA 및 AAA 접근성을 준수하는지 텍스트 및 배경색을 테스트합니다.
실시간 미리보기와 16진수 또는 RGB 입력을 통해 WCAG AA 및 AAA 표준에 따라 텍스트와 배경색 간의 명암비를 확인하세요.
저대비 텍스트는 가장 일반적인 접근성 오류 중 하나입니다. 이 검사기는 공식 WCAG 상대 휘도 공식을 사용하여 텍스트와 배경 색상 간의 정확한 대비 비율을 계산한 다음 AA(일반 텍스트의 경우 4.5:1, 큰 텍스트의 경우 3:1) 및 더 엄격한 AAA(7:1 및 4.5:1)를 통과하는지 알려줍니다. 실시간 미리보기에는 선택한 색상의 실제 텍스트가 표시됩니다.
전경색을 선택하거나 입력합니다.
배경색을 선택하거나 입력합니다.
명암비와 AA/AAA 결과를 확인하세요.
통과할 때까지 색상을 조정합니다.
색상 선택기를 사용하거나 16진수 코드 및 rgb() 값을 직접 입력하면 도구가 두 가지를 모두 구문 분석합니다. 색상을 조정하면 비율과 합격/불합격 배지가 즉시 업데이트되므로 원하는 색상이 나올 때까지 조금씩 움직일 수 있습니다. 모든 것이 로컬에서 실행되므로 UI, 테마 및 마케팅 페이지를 디자인하는 동안 빠른 동반자가 됩니다.
WCAG 2는 1:1(대비 없음)부터 21:1(흰색 바탕에 검은색)까지의 비율로 대비를 측정합니다. 일반적인 법률 및 업계 기준인 레벨 AA는 일반 텍스트의 경우 최소 4.5:1, 큰 텍스트의 경우 3:1을 요구합니다. 즉, 일반 텍스트는 24픽셀, 굵은 텍스트는 약 18.66픽셀 이상입니다. 레벨 AAA에서는 이를 7:1과 4.5:1로 높입니다. 입력 테두리, 포커스 링, 의미를 전달하는 아이콘과 같은 사용자 인터페이스 부분은 주변 환경과 최소 3:1 비율이 필요합니다. 비율은 각 색상의 상대적 휘도를 기준으로 계산됩니다. 따라서 다르게 보이는 두 색상이 동일하게 밝다면 여전히 실패할 수 있습니다. 이는 녹색 바탕에 빨간색이 일반적입니다.
한 쌍이 실패하면 색조 대신 밝기를 변경하십시오. 비율이 통과될 때까지 작은 단계로 텍스트를 어둡게 하거나 배경을 밝게 하십시오. 그러면 색상이 여전히 귀하의 브랜드처럼 느껴질 것입니다. 중간 오렌지색이나 청록색과 같은 중간톤의 브랜드 색상은 AA에서 흰색 텍스트를 표시할 수 없는 경우가 많습니다. 이 경우 큰 제목, 테두리 또는 배경에 브랜드 색상을 사용하고 본문 텍스트를 더 어두운 색상으로 설정하세요. 자리표시자 텍스트와 비활성화 상태도 테스트해 보세요. 너무 희미한 경우가 많기 때문입니다. 비율은 얇은 글꼴이나 이미지의 텍스트를 고려하지 않으므로 그러한 경우에는 여분의 여백을 두십시오.
AA의 경우 일반 텍스트는 4.5:1, 큰 텍스트는 3:1이 필요합니다. 더 엄격한 AAA의 경우 일반 텍스트는 7:1, 큰 텍스트는 4.5:1이 필요합니다. 큰 텍스트는 대략 18pt 또는 14pt 굵게 표시됩니다.
두 색상 모두에 대해 WCAG 상대 휘도 공식을 사용한 다음 밝은 휘도(더하기 0.05)를 더 어두운 휘도(더하기 0.05)로 나누어 1:1에서 21:1 사이의 값을 제공합니다.
예: #1e293b 또는 rgb(30, 41, 59)와 같은 16진수 코드를 입력하거나 색상 선택기를 사용하세요. 두 형식 모두 즉시 구문 분석됩니다.
예, 가입 없이 완전히 무료이며 브라우저에서 완전히 실행됩니다.
텍스트 및 배경 16진수 값을 입력합니다. 검사기는 명암비를 계산하고 일반 텍스트와 큰 텍스트에 대해 WCAG AA 및 AAA를 통과하는지 여부를 표시합니다.
대비가 낮으면 시력이 낮거나 색맹인 사람이 텍스트를 읽기가 어렵습니다. WCAG 비율을 충족하면 모든 사람이 콘텐츠를 읽을 수 있으며 이는 일반적인 접근성 및 SEO 요구 사항입니다.
Tool GuidesPhotos carry hidden data like GPS location and camera details. Here's why that matters for privacy and how to strip it before sharing.
Tool GuidesCPS means clicks per second. Here's how it's measured, what a good score looks like, and how to test your own click speed for free.
Tool GuidesCombine several PDFs into one document, reorder the pages, and keep everything private — no software and no server upload.