실제 글자색과 배경색으로 대비를 검사하세요.
WCAG 2.2의 AA·AAA 기준과 큰 글자 조건, 자동 대비 조정의 한계를 설명합니다.
대비 숫자는 무엇을 뜻하나요?
대비 검사기는 불투명 sRGB의 빨강·초록·파랑 채널을 선형화해 상대 휘도를 계산한 뒤 밝은 색과 어두운 색을 비교합니다. 같은 색끼리는 1:1, 검정과 흰색은 21:1입니다. 색조가 서로 매우 달라 보여도 휘도가 비슷하면 읽기 어려울 수 있습니다.
화면에는 소수점 둘째 자리까지 표시하지만 통과 여부는 반올림하기 전 값으로 판단합니다. 4.50으로 표시되는 값도 실제로 4.5보다 조금 작으면 미달일 수 있습니다. 반올림으로 기준을 통과시키지 않습니다.
글자 크기에 맞는 기준을 사용하세요
WCAG 2.2 AA는 일반 글자 4.5:1 이상, 큰 글자 3:1 이상을 요구합니다. AAA는 일반 글자 7:1 이상, 큰 글자 4.5:1 이상입니다. 큰 글자는 일반 굵기 18포인트(24 CSS px) 이상 또는 굵은 글자 14포인트(약 18.67 CSS px) 이상을 뜻합니다.
글자색과 배경색은 3자리 또는 6자리 HEX로 입력합니다. 서로 바꾸기를 실행해도 비율은 같지만 실제 화면의 인상은 달라집니다. 미리보기의 서로 다른 글자 크기를 보며 사용 목적에 맞는지 판단하세요.
자동 조정은 검토할 후보를 만듭니다
AA 기준으로 글자색 조정은 배경색을 고정하고 원래 글자의 HSL 색조와 채도를 유지하면서 더 밝거나 어두운 후보를 탐색합니다. 기준을 통과하는 후보 중 원래 HSL 명도와 가까운 값을 선택합니다. 지각적으로 차이가 가장 작은 색상이나 브랜드 승인 색상이라는 뜻은 아닙니다.
이미 일반 글자 AA를 만족하면 원래 값을 유지합니다. 조정 후에는 실제 페이지의 글꼴, 굵기, 크기와 상태에 적용해 다시 확인하세요. 모니터에서 밝게 느껴진다는 이유만으로 대비 통과 여부를 판단하면 안 됩니다.
두 색상 검사로 확인할 수 없는 부분
투명한 글자는 실제 배경과 먼저 합성해야 하므로 이 도구는 불투명 값만 받습니다. 사진이나 그라데이션 배경은 글자 아래 위치마다 다른 색상이 존재합니다. 가장 불리한 영역을 점검하거나 안정적인 불투명 표면을 추가하세요.
포커스 표시, 마우스를 올린 상태, 선택된 항목, 비활성 컨트롤도 실제 화면에서 확인해야 합니다. 일부 비텍스트 UI에는 WCAG 1.4.11의 별도 3:1 기준이 적용됩니다. 이 텍스트 대비 검사기는 전체 접근성 감사를 대신하지 않습니다. 오류와 상태를 색상만으로 전달하지 말고 글자·아이콘 등도 함께 사용하세요.
구현 이후에도 다시 확인하세요
디자인 파일에 글자색, 배경색, 글자 크기·굵기와 사용 목적을 기록해 두세요. 개발 후에는 투명도, 덮개 레이어와 컴포넌트 변형 때문에 최종 색상이 달라질 수 있어 렌더링된 화면에서 다시 점검하는 것이 좋습니다.
공식 기준은 W3C의 Understanding Success Criterion 1.4.3에서 확인할 수 있습니다. PaletteTidy는 계산과 작업 보조를 제공하며 접근성 인증을 발급하지 않습니다.