색상 대비 검사기

두 색의 WCAG 대비율을 확인하고 AA·AAA 통과 여부를 보여 줍니다.

전경색(텍스트)

배경색

샘플 텍스트 — 다람쥐 헌 쳇바퀴에 타고파

18.88:1명도 대비(WCAG 공식)

일반 텍스트 AA(≥ 4.5:1)통과

일반 텍스트 AAA(≥ 7:1)통과

큰 텍스트 AA(≥ 3:1)통과

큰 텍스트 AAA(≥ 4.5:1)통과

이 도구는 WCAG 명도 대비 공식의 원래 결과와 네 가지 기준의 통과·실패만 알려 줄 뿐 «이 페이지가 WCAG를 준수한다»는 뜻은 아닙니다. 실제 준수 여부는 글꼴 크기, 굵기, 나머지 디자인에도 달려 있습니다.

비슷한 CSS·디자인

코드 조각을 보기 좋은 스크린샷으로 만들어 줍니다.

선형, 방사형, 원뿔형 그라디언트를 눈으로 보며 만들고 CSS를 바로 복사합니다.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요!

색상 대비 검사기는 WCAG 공식으로 전경색과 배경색의 대비 비율을 계산하고 일반 텍스트와 큰 텍스트에 대한 AA/AAA 통과 여부를 표시합니다.

AA를 통과하면 내 페이지가 WCAG를 준수한다는 뜻인가요?

반드시 그렇지는 않습니다. 이 도구는 대비율 계산값과 네 가지 기준에 대한 통과/실패만 보여 줍니다. 실제 WCAG 준수는 글꼴 크기, 굵기, 전체 디자인에도 달려 있습니다.

통과/실패를 색만으로 표시하지 않는 이유는 무엇인가요?

색만으로 표시하면(예: 초록·빨강 점) 색각 이상이 있는 사용자가 알아볼 수 없습니다. 그래서 모든 기준에 아이콘과 텍스트 라벨(통과/실패)을 함께 표시합니다.

반투명 배경은 어떻게 처리하나요?

투명 배경에는 불투명한 “캔버스 배경” 색이 추가로 필요합니다. 도구는 코어의 기존 합성 로직으로 결과적인 불투명 색을 계산한 뒤 대비를 계산합니다.