색상 도구

색상 대비 검사기

전경색과 배경색 사이의 명도 대비 비율을 계산하고 일반 텍스트 및 큰 텍스트 기준 충족 여부를 확인합니다.

도구 실행

전경색과 배경색의 색상 코드를 입력하여 두 색상 사이의 대비 비율을 확인하는 도구입니다. 3자리 또는 6자리 16진수 색상 코드(#fff 또는 #ffffff 형태)와 쉼표로 구분된 RGB 형식(rgb(255, 255, 255) 형태)을 지원합니다. 입력한 색상값을 바탕으로 계산된 명도 대비 비율은 소수점 둘째 자리까지 표시됩니다. 계산된 비율을 바탕으로 일반 텍스트 기준(4.5 대 1 및 7.0 대 1)과 큰 텍스트 기준(3.0 대 1 및 4.5 대 1)의 충족 여부를 안내합니다. 두 색상이 같으면 대비율은 1.0으로 계산되며, 잘못된 형식의 색상이 입력되면 오류 안내가 표시됩니다.

사용 방법

  1. 전경색 입력 칸에 글자나 전경 요소의 색상 코드를 입력합니다.
  2. 배경색 입력 칸에 바탕이 되는 배경 색상 코드를 입력합니다.
  3. 검사 버튼을 눌러 두 색상 사이의 대비 비율을 계산합니다.
  4. 결과 화면에서 계산된 대비 비율과 텍스트 크기별 기준 충족 상태를 확인합니다.

예시

  • 전경색에 #000000, 배경색에 #ffffff를 입력하면 대비율 21.00이 계산되어 일반 텍스트 및 큰 텍스트 기준을 모두 충족합니다.
  • 전경색에 #767676, 배경색에 #ffffff를 입력하면 대비율 4.54가 계산되어 일반 텍스트 4.5 기준 및 큰 텍스트 기준을 충족합니다.

자주 묻는 질문

어떤 색상 형식을 입력할 수 있습니까?

#으로 시작하는 3자리 또는 6자리 16진수 코드(예: #333, #333333)와 쉼표로 세 개의 십진수를 구분한 RGB 형식(예: rgb(51, 51, 51))을 입력할 수 있습니다.

색상 코드를 입력하지 않으면 어떻게 됩니까?

전경색의 기본값은 검은색(#000000)이며, 배경색의 기본값은 흰색(#ffffff)으로 자동 적용되어 계산됩니다.

전경색과 배경색에 동일한 색상을 넣으면 결과가 어떻게 나옵니까?

두 색상이 동일한 경우 대비 비율은 1.0으로 표시됩니다.

색상 형식 오류가 발생하면 어떻게 해결합니까?

입력값 앞뒤에 불필요한 기호가 없도록 확인하고, #으로 시작하는 16진수 3자리 또는 6자리 형태이거나 rgb(숫자, 숫자, 숫자) 형식인지 점검합니다.

이 도구 삽입하기

아래 코드를 사용해 작동하는 SmartPlusLab 도구를 웹사이트에 추가하세요.