본문 색상 조합 점검
텍스트와 배경 색상의 대비율을 계산해 일반 텍스트의 AA·AAA 기준 충족 여부를 확인할 수 있습니다.
WCAG 색상 대비율 검사기
WCAG 색상 대비율 검사기
전경과 배경 HEX 색상의 WCAG 2.x 대비율을 계산하고 일반·큰 텍스트의 AA·AAA 통과 여부를 확인합니다.
주요 기능
- 3자리 또는 6자리 HEX 전경·배경 색상을 입력하거나 컬러 입력으로 고릅니다.
- WCAG 2.x sRGB 상대 휘도를 사용해 1:1~21:1 대비율을 계산합니다.
- 일반 텍스트의 AA 4.5:1·AAA 7:1 기준을 판정합니다.
- 큰 텍스트의 AA 3:1·AAA 4.5:1 기준과 실제 색상 미리보기를 제공합니다.
- 전경과 배경을 맞바꾸고 각 HEX 값을 복사합니다.
사용 방법
- 전경 텍스트와 배경의 HEX 색상을 입력합니다.
- 대비율과 일반·큰 텍스트의 AA·AAA 결과를 확인합니다.
- 필요하면 색을 교환하거나 HEX 값을 조정해 다시 검사합니다.
활용 예시
디자인 토큰 후보 비교
전경과 배경을 맞바꾸거나 HEX 값을 조정하며 접근성 기준에 맞는 팔레트 후보를 찾을 수 있습니다.
개인정보 보호
색상 변환과 대비율 계산은 브라우저에서 수행됩니다.
사용 환경
결과는 WCAG 2.x의 색상 대비 기준만 다루며 글꼴 크기·굵기, 상태 표현, 전체 사용성 검토를 대신하지 않습니다.
자주 묻는 질문
- 큰 텍스트와 일반 텍스트의 기준이 다른가요?
- 네. 일반 텍스트는 AA 4.5:1·AAA 7:1, 큰 텍스트는 AA 3:1·AAA 4.5:1 기준으로 각각 표시합니다.
- #fff 같은 3자리 HEX도 입력할 수 있나요?
- 네. 3자리와 6자리 HEX를 모두 받아 정규화한 뒤 대비율을 계산합니다.
관련 도구
- 컬러 피커 | 이미지·화면 색상 추출HEX·RGB·HSL을 변환하고 업로드·붙여넣기 이미지의 픽셀 또는 지원 브라우저 화면에서 색상을 추출합니다.
- HEX·RGB·HSL·HSV 색상 변환기색상 선택기나 문자열 입력으로 HEX, RGB, HSL, HSV 값을 실시간 동기화하고 투명도까지 변환합니다.
- Linear·Radial CSS 그라디언트 생성기선형 또는 방사형 그라디언트의 방향, 모양, 색상 스톱과 위치를 시각적으로 편집하고 background CSS를 복사합니다.
- CSS box-shadow 그림자 생성기여러 그림자 레이어의 위치, 흐림, 확산, 색상, 투명도와 inset을 조절해 CSS box-shadow 코드를 만듭니다.