무료 도구로 명암비 확인하기

대비를 눈대중으로 판단할 필요는 없습니다. 무료 도구가 두 색상의 정확한 비율을 계산하고, 통과 여부를 즉시 알려 줍니다.

WebAIM 대비 검사기는 대표적인 도구입니다. 전경색과 배경색을 입력하면 대비 비율과 AA 및 AAA 통과 여부를 보여 줍니다.

좋은 도구는 일반 텍스트와 큰 텍스트를 구분하여 각 결과에 통과 또는 실패를 표시하므로, 어떤 기준을 충족했는지 정확히 알 수 있습니다.

브라우저에서 바로 사용할 수 있는 색상 선택기는 색상을 조정하는 동안 실시간 대비 비율과 AA 기준선을 보여 줍니다. DevTools의 기능입니다.

DevTools는 실제로 렌더링된 계산된 색상과 배경을 읽으므로, 기대한 값이 아니라 실제 픽셀을 검사할 수 있습니다.

axe DevTools 또는 Lighthouse를 실행하여 전체 페이지를 한 번에 검사하세요. 한 쌍씩 검사하는 대신 대비가 낮은 모든 요소를 표시해 줍니다.

많은 검사기에는 스포이트 기능이 포함되어 있어, 16진수 코드를 찾지 않고도 실제 사이트나 시안에서 바로 색상을 추출할 수 있습니다.

Figma와 유사한 앱에는 대비 플러그인도 있어, 코드가 작성되기 훨씬 전인 디자인 단계에서 문제를 발견할 수 있습니다.

도구는 단색으로 된 한 쌍만 검사합니다. 그레이디언트나 이미지 위에서는 텍스트 대비가 일부 영역에서만 실패할 수 있으므로, 가장 불리한 지점을 직접 검사하세요.

대부분의 검사기에서는 통과할 때까지 색상을 조금씩 조정할 수 있으며, CSS에 바로 붙여 넣을 수 있는 기준을 충족한 16진수 값을 제공합니다.

스타일시트에 있는 정확한 16진수 값을 검사기에 입력하여, 배포 전에 이 조합이 4.5:1 기준을 충족하는지 확인하세요.

대비를 명확한 통과 또는 실패 결과로 바꿔 주는 WebAIM, DevTools, axe 같은 무료 도구를 배웠습니다. 실제 색상을 측정하고 출시 전에 문제를 수정하세요. ✅