WCAG 명도 대비 검사기이란?

전경색과 배경색 사이의 명도 대비율을 계산하고, 일반 텍스트와 큰 텍스트에 대해 WCAG 2.1 Level AA 및 AAA 접근성 기준을 충족하는지 검사하는 WCAG 색상 대비 검사기입니다.

사용 방법

1. 색상 선택기 또는 HEX 입력란을 통해 전경(텍스트) 색상과 배경 색상을 입력하세요.
2. 일반 텍스트, 큰 텍스트, UI 컴포넌트에 대한 WCAG AA 및 AAA 적합 여부와 명도 대비율을 확인하세요.
3. 대비가 기준을 충족하지 못할 경우, 제안된 색상 조정 옵션을 활용해 가장 가까운 접근 가능한 색상 조합을 찾으세요.

결과

UI 디자이너가 브랜드 블루 #3B82F6을 흰색 #FFFFFF 배경에 적용했을 때 4.5:1 비율이 큰 텍스트 AA는 통과하지만 일반 텍스트 AAA는 통과하지 못했습니다. #2563EB(5.3:1)로 어둡게 조정해 두 기준을 모두 충족시켰습니다.

관련 도구