대비 검사기는 두 색상 간의 WCAG 2.1 대비비를 계산하고, 일반 텍스트와 큰 텍스트에 대해 AA/AAA 등급 기준을 충족하는지 평가합니다. 실시간 미리보기를 통해 선택한 색상이 적용된 텍스트를 볼 수 있으며, '페이지 배경 추출' 버튼으로 현재 페이지의 배경색을 샘플링할 수 있습니다.
접근성의 중요성은 점점 커지고 있습니다. 많은 국가에서 WCAG 준수가 법적 요구 사항이며, 그렇지 않더라도 낮은 대비는 사용자 이탈을 초래합니다. 대비 검사기는 두 색상이 WCAG 표준을 충족하는지 즉시 알려줍니다. 색상 선택기나 16진수(Hex) 값을 통해 전경색과 배경색을 선택하세요. 도구가 공식 WCAG 휘도 공식을 사용하여 대비비를 계산하고, 4가지 임계값인 AA 일반(≥4.5:1), AA 큰 글자(≥3:1), AAA 일반(≥7:1), AAA 큰 글자(≥4.5:1)에 대해 등급을 매깁니다. 각 임계값에는 명확한 통과/실패(Pass/Fail) 배지가 표시됩니다. 실시간 미리보기 기능은 선택한 색상으로 실제 큰 글자와 일반 글자를 렌더링하여 시각적 효과를 직접 확인할 수 있게 합니다. 또한 현재 페이지의 body 배경색을 한 번의 클릭으로 샘플링할 수 있어, 실제 사이트의 색상 조합이 기준을 통과하는지 확인할 때 매우 유용합니다. 모든 작업은 브라우저에서 로컬로 실행됩니다.
공식 WCAG 휘도 공식을 사용하여 대비비를 계산합니다. 결과는 정확하며 다른 모든 표준 접근성 검사 도구와 일치합니다.
AA 일반(≥4.5:1), AA 큰 글자(≥3:1), AAA 일반(≥7:1), AAA 큰 글자(≥4.5:1)에 대한 통과/실패 여부를 그리드 형태로 한눈에 보여줍니다.
선택한 색상으로 실제 큰 글자와 일반 글자를 렌더링하여 수치상의 대비비와 함께 실제 시각적 느낌을 확인할 수 있습니다.
클릭 한 번으로 현재 페이지의 계산된 body 배경색을 샘플링합니다. 실제 사이트의 색상 조합을 테스트할 때 편리합니다.
Hex 값을 직접 입력하거나 내장된 색상 선택기를 사용하세요. 두 입력 방식은 실시간으로 동기화됩니다.
클릭 한 번으로 전경색과 배경색을 바꿉니다. 반전된 테마나 호버(hover) 상태를 확인할 때 유용합니다.
색상 팔레트를 확정하기 전에 모든 텍스트 색상을 배경색과 대조하여 WCAG AA 준수 여부를 확인하세요. 나중에 수정하는 번거로움을 피할 수 있습니다.
실제 운영 중인 사이트에서 '페이지 배경 추출' 기능을 사용하고 실제 텍스트 색상을 대조해 보세요. Lighthouse를 돌리지 않고도 몇 분 만에 접근성 위반 사항을 찾을 수 있습니다.
브랜드 지정 컬러가 접근성 기준을 통과하지 못할 때, 이 도구를 사용하여 기준을 통과하는 가장 가까운 색상(더 어둡거나 밝은 톤)을 찾아보세요.
기본 상태뿐만 아니라 호버, 선택(active), 비활성화(disabled) 상태의 색상들도 여전히 대비 요구 사항을 충족하는지 확인하세요.
다크 테마는 회색 배경에 회색 글자를 사용하여 대비가 부족해지기 쉽습니다. 가장 어두운 회색 글자가 배경과 충분한 대비를 이루는지 확인하세요.
DevSuite Pro 독에서 대비(Contrast) 아이콘을 클릭합니다. 전경색과 배경색 필드가 있는 패널이 열립니다.
색상 선택기를 사용하거나 Hex 값을 붙여넣으세요. 색상을 변경하는 즉시 실시간 미리보기가 업데이트됩니다.
중앙의 큰 숫자(예: 4.8:1)가 대비비입니다. 숫자가 높을수록 좋으며, 일반 텍스트 기준 4.5 이상을 목표로 하는 것이 좋습니다.
AA 및 AAA 등급, 일반 및 큰 글자 크기에 대한 통과/실패 배지를 통해 현재 조합의 접근성 수준을 한눈에 파악하세요.
기준에 미달하는 경우 색상을 미세 조정하세요. 전경색을 어둡게 하거나 배경색을 밝게(혹은 그 반대로) 하여 목표 등급이 '통과'로 바뀔 때까지 조정합니다.
