Search for a command to run...
두 색상의 WCAG 2.1 대비율을 계산하고 AA와 AAA 통과 여부를 즉시 확인합니다.
#RGB, #RRGGBB, #RRGGBBAA, rgb()/rgba(), hsl()/hsla() 형식을 지원합니다. CSS 색상 이름은 지원하지 않습니다.
알파 값은 측정 전에 배경과 합성하며, 반투명 배경은 흰색 위에 합성합니다.
통과 가능한 색상 제안
전경색의 명도를 검은색과 흰색 방향으로 각각 조정해 AA 4.5:1을 만족하는 가장 가까운 색을 찾습니다.
대비율
3.66:1
#7B8794 / #FFFFFF
AA 일반 텍스트
최소 4.5:1
AA 큰 텍스트
최소 3.0:1
AAA 일반 텍스트
최소 7.0:1
AAA 큰 텍스트
최소 4.5:1
비텍스트 및 UI 요소
최소 3.0:1
미리보기
본문에서 가장 많이 쓰이는 16px 일반 텍스트입니다.
큰 텍스트 24px 굵게
What
색상 대비 검사기는 전경색과 배경색의 상대 휘도 비율을 계산하는 도구이며, 이 값은 WCAG 2.1이 텍스트 가독성을 판단하는 기준입니다. 이 도구는 hex, rgb(), hsl() 값을 해석하고 알파를 배경에 합성한 뒤 AA와 AAA 기준을 모두 검사합니다.
Cases
디자인 시스템 토큰을 배포하기 전에 본문 대비 확인하기
흐린 회색 플레이스홀더가 AA를 만족하는지 검증하기
버튼과 아이콘 색상을 비텍스트 3:1 기준으로 점검하기
다크 모드 팔레트를 라이트 모드와 함께 감사하기
브랜드 색상이 AA에 미달할 때 가장 가까운 대체 색 찾기
접근성 리뷰 티켓에 대비 검사 결과 기록하기
How To
전경색과 배경색을 입력하면 WCAG 판정이 바로 표시됩니다.
색상 선택기를 사용하거나 hex, rgb(), hsl() 값을 직접 입력합니다.
같은 방식으로 배경색을 지정하고, 필요하면 색상 교체로 두 색을 바꿉니다.
대비율과 AA, AAA, 비텍스트 기준의 통과/미달 배지를 확인합니다.
기준에 미달하면 제안 색상을 적용하고 결과 리포트를 복사합니다.
Knowledge
FAQ