색상 대비 검사기
텍스트와 배경 색상의 대비율을 계산하고 WCAG 2.x AA·AAA 접근성 기준 통과 여부를 판정합니다. 웹 접근성 점검에 유용하며 모든 계산은 브라우저에서만 이루어집니다.
두 색상을 hex 형식으로 입력하세요 (예: #333333)
자주 묻는 질문
대비율은 어떻게 계산되나요?
WCAG 정의에 따라 두 색의 상대 휘도(relative luminance)를 구해 (밝은 값 + 0.05) ÷ (어두운 값 + 0.05)로 계산합니다. 결과는 1:1(동일)부터 21:1(흑백)까지입니다.
큰 텍스트의 기준은 무엇인가요?
18pt(약 24px) 이상, 또는 굵은 글씨 14pt(약 18.7px) 이상이 큰 텍스트입니다. 큰 텍스트는 AA 3:1, AAA 4.5:1로 기준이 완화됩니다.
어떤 색상 형식을 지원하나요?
#rgb, #rrggbb hex 형식을 지원합니다(# 생략 가능). rgb()나 hsl() 값은 색상 변환기로 hex로 바꾼 뒤 사용하세요.
관련 도구
HEX, RGB, HSL 색상 코드를 상호 변환하고 미리보기로 확인합니다.
기준 색상에서 밝은 톤과 어두운 톤의 HEX 팔레트를 생성합니다. 디자인 시스템의 색 단계를 만들 때 유용하며 모든 처리는 브라우저에서만 이루어집니다.
px·rem·em·pt·% 를 기준 폰트 크기에 맞춰 상호 변환합니다. 반응형 타이포그래피 작업에 유용하며 모든 계산은 브라우저에서만 이루어집니다.
오프셋·블러·확산·색상·투명도를 조절해 CSS box-shadow 코드를 만들고 실시간 미리보기로 확인합니다. inset 안쪽 그림자를 지원하며 모든 처리는 브라우저에서만 이루어집니다.
최소·최대 크기와 뷰포트 범위로 반응형 clamp() 코드를 만듭니다. 미디어쿼리 없이 폰트 크기가 화면 폭에 따라 부드럽게 변하는 fluid typography에 사용합니다. 모든 계산은 브라우저에서만 이루어집니다.
CSS에서 주석과 불필요한 공백을 제거해 파일 크기를 줄입니다. 문자열 값은 보존하며 모든 처리는 브라우저에서만 이루어집니다.