DESIGN TOOLS

색상 대비 검사와 CSS 색상 조합

글자색과 배경색의 대비율을 계산하고 WCAG 2.2 텍스트 대비 기준을 확인하세요. 조합을 미리 보고 HEX·RGB와 CSS를 복사할 수 있습니다.

무료 · 가입 없이 · 기기에서 처리

BUILD YOUR PAIR

두 색을 골라보세요

투명도가 없는 sRGB HEX 색상을 지원합니다.

YOUR COLOR STORY

잘 읽히는 색은
내용을 또렷하게.

이 문장은 선택한 글자색과 배경색으로 표시됩니다. 작은 글자에서도 읽기 편한지 살펴보세요.

버튼 모양 예시

예시 영역의 색상은 검사 결과에 따라 가독성이 낮을 수 있습니다.

도구를 준비하는 중입니다.

COLOR NOTE

색상 조합에서 확인할 세 가지

01 / 명도 차이

색이 달라도 안 읽힐 수 있습니다

색상 대비는 두 색의 상대 휘도를 비교합니다. 서로 다른 색상이라도 밝기가 비슷하면 글자와 배경이 잘 구분되지 않을 수 있습니다. 이 도구는 sRGB 성분을 선형화한 뒤 휘도를 계산합니다.

02 / 글자 크기

일반 글자와 큰 글자를 구분하세요

WCAG의 AA 텍스트 대비 기준은 일반 글자 4.5 : 1, 큰 글자 3 : 1입니다. 큰 글자는 일반적으로 18pt 이상 또는 굵은 14pt 이상을 뜻하며, 한글 등은 이에 상응하는 크기를 고려합니다.

03 / 실제 화면

숫자 다음은 실제 읽기

얇은 글꼴, 배경 사진, 상태 변화는 두 단색만 비교한 결과로 설명되지 않습니다. 사용할 글꼴과 크기로 확인하고, 색으로만 성공·실패를 전달하지 말고 문구나 기호를 함께 표시하세요.

계산 기준: W3C WCAG 2.2 텍스트 대비 해설. 일반 글자 AAA는 7 : 1, 큰 글자 AAA는 4.5 : 1을 사용합니다.

자주 묻는 질문

4.499가 표시상 4.5에 가까우면 충족인가요?

아니요. 임계값에 도달했는지 반올림 전 수치로 판단합니다. 화면의 대비율은 소수 셋째 자리까지 보여주지만, 표시 자릿수 때문에 미달 조합을 충족으로 바꾸지 않습니다.

#ABC처럼 짧은 색상 코드도 되나요?

3자리 HEX는 각 자리를 두 번 반복해 6자리로 바꿉니다. 예를 들어 #ABC는 #AABBCC입니다. 대소문자는 구분하지 않으며 RGB 값과 복사용 CSS는 계산 결과에 표시합니다.

투명 배경이나 그라데이션은 검사하나요?

이 버전은 불투명한 단색 두 개만 검사합니다. 투명 색상은 실제 배경과 합성한 최종 색상을 알아야 하고, 그라데이션이나 사진은 글자 뒤의 위치별 배경을 확인해야 합니다. 알파값이 있는 HEX는 입력받지 않습니다.

추천 기본 글자색은 어떻게 정하나요?

현재 배경에 대해 검정과 흰색의 대비율을 각각 계산하고 더 높은 쪽을 제시합니다. 원래 글자색의 색조를 유지하는 보정은 아니며 버튼을 눌렀을 때만 적용합니다.

아이콘과 테두리도 같은 결과로 판단하나요?

필요한 비문자 요소에는 별도 기준과 예외가 있습니다. 이 도구의 AA·AAA 표시는 텍스트용입니다. 입력창 테두리나 아이콘은 WCAG 비텍스트 대비 항목과 실제 인접 색상을 따로 확인하세요.

사이트 전체가 접근성을 충족하나요?

텍스트 대비는 접근성의 한 부분입니다. 키보드 조작, 이름과 레이블, 화면 확대, 오류 안내 등 다른 항목은 이 색상 계산으로 검사되지 않습니다. 결과를 전체 사이트의 인증이나 보장으로 사용하지 마세요.