색 대비 검사기 (WCAG 명도 대비)
글자색과 배경색을 고르면 대비율과 접근성 기준 통과 여부가 바로 나와요.
입력한 글과 파일은 서버로 보내지 않고 이 브라우저 안에서만 처리해요.
대비율
- 일반 텍스트 AA (4.5:1)-
- 일반 텍스트 AAA (7:1)-
- 큰 텍스트 AA (3:1)-
- 큰 텍스트 AAA (4.5:1)-
- UI 요소·그래픽 AA (3:1)-
큰 텍스트는 24px 이상, 굵은 글씨는 약 18.7px 이상이에요.
미리 보기
큰 제목은 이렇게 보여요
본문 글자는 4.5:1 이상이어야 읽기 편해요. 작은 화면이나 햇빛 아래에서도 확인해 보세요.
작은 안내 문구 · 13px
입력칸
통과하는 색 제안
글자색 바꾸기 -
배경색 바꾸기 -
사용 방법
- 글자색과 배경색을 색 칸으로 고르거나 #fff, rgb(…) 같은 코드로 넣으세요. 반투명 색은 배경 위에 겹친 색으로 계산해요.
- 대비율과 함께 일반 텍스트(4.5:1)·큰 텍스트(3:1)·UI 요소(3:1)의 AA 와 더 엄격한 AAA 통과 여부가 나와요.
- 미달이면 「통과하는 색 제안」에 색상은 두고 밝기만 바꾼 가장 가까운 색이 나와요. 「적용」을 누르면 바로 바뀌어요.
- 주소에 두 색이 담기므로 그대로 복사해 팀과 공유할 수 있어요.
자주 묻는 질문
AA 와 AAA 는 무엇인가요?
WCAG(웹 콘텐츠 접근성 지침)의 등급이에요. 일반 텍스트는 AA 가 4.5:1, AAA 가 7:1 이상이어야 해요. 한국형 웹 콘텐츠 접근성 지침(KWCAG)도 4.5:1 을 기준으로 삼아요.
대비율은 어떻게 계산하나요?
두 색의 상대 휘도를 구해 (밝은 쪽 + 0.05) ÷ (어두운 쪽 + 0.05) 로 계산해요. 같은 색이면 1:1, 검정과 흰색이면 21:1 이에요. 기준에 살짝 못 미치는 값이 통과처럼 보이지 않도록 소수 셋째 자리부터 버려요.
UI 요소 기준은 언제 보나요?
버튼 테두리, 입력칸 경계선, 아이콘처럼 글자가 아닌 요소는 맞닿은 색과 3:1 이상이면 돼요(WCAG 1.4.11).