먼저 측정할 대상을 확인합니다.
텍스트 색상과 실제 배경 색상을 3비트 또는 6비트 16진수 형식으로 입력하세요. 이 도구는 불투명한 sRGB 색상을 기준으로 계산합니다. 투명 색상, 배경 이미지 및 그라디언트의 경우 텍스트 위치의 실제 합성 배경을 먼저 확인해야 하며, 단순히 색상 값 중 하나를 대체값으로 사용할 수 없습니다.
이 색상 조합의 텍스트 대비를 확인한 결과, 페이지 전체가 WCAG 등급을 충족하지 않는 것으로 나타났습니다. 글꼴 크기, 글꼴 종류, 상호 작용 상태 및 기타 접근성 요구 사항은 실제 페이지에서 추가로 확인해야 합니다.
비율 계산 방법
각 8비트 색상 채널을 255로 나누어 c를 구합니다. c ≤ 0.04045이면 선형 값은 c ÷ 12.92이고, 그렇지 않으면 ((c + 0.055) ÷ 1.055)의 2.4제곱입니다. 상대 밝기 L = 0.2126R + 0.7152G + 0.0722B이며, 여기서 R, G, B는 위의 선형 값을 사용합니다.
(밝은 쪽의 L + 0.05) ÷ (어두운 쪽의 L + 0.05). 검정과 흰색은 21:1, 같은 색은 1:1입니다. 텍스트와 배경을 바꿔도 명암비는 같지만 화면의 인상은 달라집니다.
반올림을 통과로 착각하지 마세요.
일반 텍스트는 AA에서 최소 4.5:1, AAA에서 최소 7:1이 필요합니다. 큰 텍스트는 각각 최소 3:1과 4.5:1입니다. 큰 텍스트는 최소 18pt이거나 굵은 글씨로 최소 14pt입니다. 작은 텍스트에 큰 텍스트의 기준을 적용하지 마세요.
흰색 배경에서 #777777의 명암비는 약 4.478:1로, 일반 텍스트(AA)에 요구되는 4.5:1을 충족하지 못합니다. 인터페이스에서 4.5로 표시되더라도 표시된 값만으로는 판단할 수 없습니다. 이 사이트는 소수점 셋째 자리까지 표시하지만, 조건부 판단은 전체 계산값을 사용합니다.
색상 쌍을 실제 인터페이스에 다시 넣으세요
미리보기에서는 본문 텍스트는 16px, 제목은 24px로 입력된 색상만 표시됩니다. 먼저 대상 페이지에서 실제 텍스트 색상, 배경, 글꼴 크기 및 두께를 확인하고, 일반 상태, 마우스 오버 상태, 포커스 상태도 확인하세요. 디자인 초안에서 가장 보기 좋은 색상 조합만 확인하지 마세요.
텍스트를 점차 어둡게 하거나 배경을 밝게 한 후 계산을 반복하고, 실제 기기에서 글꼴과 읽기 환경을 확인합니다. 여기서 색상 대비 테스트는 색맹 판별, 아이콘 의미 해석 또는 전체 페이지 준수 여부를 측정하는 것이 아닙니다. 색상 값과 검증 위치는 추후 검토를 위해 저장됩니다.