컬러 대비 체크
이 페이지는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
색상 입력
결과
계산 결과가 여기에 표시됩니다
값을 입력한 후 계산하기를 클릭하세요
색상 미리보기
Aa 가나다
본문 텍스트 미리보기 — 이 색상 조합이 실제로 어떻게 보이는지 확인하세요.
소형 텍스트 (14px): 접근성 기준이 더 엄격하게 적용됩니다.
전경색(텍스트)과 배경색을 선택하면 WCAG 2.1 기준 대비율과 AA·AAA 등급 통과 여부를 실시간으로 확인합니다.
활용하기
웹 접근성 의무화와 대비율 기준
한국은 장애인차별금지법에 따라 공공기관·일정 규모 이상 민간 웹사이트의 접근성 준수가 의무이며, 한국형 웹 콘텐츠 접근성 지침(KWCAG)은 국제 표준인 WCAG를 기반으로 합니다. 그 핵심 항목 중 하나가 텍스트와 배경의 명도 대비입니다. 본문 텍스트는 최소 4.5:1, 큰 글자는 3:1 이상을 요구합니다. 본 도구로 전경·배경색의 대비율을 미리 확인하면 디자인 단계에서 기준 미달을 잡을 수 있습니다.
대비가 낮은 회색 텍스트나 옅은 색 버튼은 디자인상 세련돼 보여도 저시력 사용자·고령자나 햇빛 아래 모바일 화면에서 읽기 어렵습니다. 브랜드 컬러가 대비 기준에 미치지 못할 때는 글자 크기를 키워 ‘큰 글자’ 기준(3:1)을 적용하거나, 명도를 조정한 보조 색상을 따로 두는 방법이 있습니다. 색만으로 정보를 구분하지 않고 아이콘·밑줄을 함께 쓰는 것도 접근성 원칙입니다.
자주 묻는 질문
WCAG 색상 대비율이란?
AA와 AAA 등급의 차이는?
검정 텍스트와 흰 배경의 대비율은?
색상 대비 외에 접근성 개선 방법은?
한국 공공기관 웹사이트의 색상 대비 기준은?
다크모드에서도 색상 대비를 확인해야 하나요?
그라디언트 배경 위의 텍스트 대비는 어떻게 확인하나요?
JSON 포매터 사용법: API 응답 데이터를 깔끔하게 정리하는 방법
JSON 포매터(JSON Formatter)로 압축된 JSON을 보기 좋게 정리하고, JSON 유효성 검사 및 데이터 구조를 분석하는 방법을 소개합니다.
29분 읽기관련
관련 도구
읽을거리