개발
색상 대비 검사기
HEX, RGB, HSL 텍스트색과 배경색의 WCAG 대비율과 AA/AAA 통과 여부를 확인해요.
도구를 불러오는 중입니다.
도구 안내
텍스트와 배경색의 WCAG 대비율 검사
색상 대비 검사기는 HEX, RGB, HSL 텍스트 색상과 배경색을 넣고 WCAG 대비율, AA/AAA 통과 여부, 실제 카드 위 가독성을 확인할 때 씁니다. 디자인 시스템, 버튼, 배너, 본문 색상 조합을 빠르게 점검할 수 있습니다.
이럴 때 사용해요
- 본문과 버튼 색상의 AA/AAA 통과 여부 확인
- 디자인 시스템 색상 토큰 대비 점검
- 접근성 QA와 랜딩 페이지 색상 조합 검토
알아두면 좋아요
직접 입력한 색상 조합은 공유 링크에 포함하지 않습니다. 자동 판정 후에도 실제 화면 크기와 폰트 굵기를 함께 확인하는 것이 좋습니다.
개발 작업에서 확인할 점
생성된 코드, 정규식, 메타 태그, 설정 파일은 초안으로 보고 실제 프로젝트의 런타임, 보안 정책, 배포 환경에서 다시 검증하세요.
처리 방식
입력한 값은 가능한 한 브라우저 안에서 계산하고 변환합니다. 중요한 결과는 원본과 한 번 더 비교하세요. 업데이트 기준일은 2026년 6월 30일입니다.
색상 대비 검사 체크
색상 입력
- 텍스트색과 배경색을 실제 UI 기준으로 입력
- 호버, 비활성, 다크모드 색상도 따로 검사
기준
- 본문, 큰 글자, 버튼 텍스트의 WCAG 기준을 구분
- AA와 AAA 통과 여부를 목적에 맞게 비교
적용 전
- 실제 화면 크기와 폰트 굵기에서 다시 보기
- 브랜드 색을 유지해야 하면 배경이나 텍스트 굵기로 보완
텍스트와 배경 색상의 대비를 확인하나요?
전경색과 배경색을 입력해 WCAG 기준의 대비 비율과 통과 여부를 확인할 수 있습니다.
일반 텍스트와 큰 텍스트 기준이 다른가요?
네. 글자 크기와 굵기에 따라 요구 대비가 달라지므로 일반 텍스트와 큰 텍스트 결과를 함께 확인하세요.
브랜드 색상을 바꿔야 하는지 판단할 수 있나요?
접근성 판단에 도움이 되지만 실제 UI에서는 폰트 굵기, 배경 이미지, hover 상태도 함께 확인해야 합니다.