Anti forge색상견본

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 일반 텍스트에 미달하면 원래 글자색을 어둡게 또는 밝게 조정한 후보를 표시합니다. 예를 들어 흰 배경의 #777777은 미달하지만 #767676은 4.5 : 1을 넘습니다. 후보 버튼을 누르면 배경은 유지되고 미리보기와 CSS가 갱신됩니다. 모든 색 중 시각적으로 가장 가까운 색을 찾는 기능은 아닙니다.

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

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

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

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

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

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