작업 공간 준비 중…

입력

작업 공간 준비 중…

출력

결과가 여기에 표시됩니다.

사용 방법

어떤 배경에서 또렷한 전경색도 다른 배경에서는 구분하기 어려울 수 있습니다. 이 도구는 두 색상을 비교하고 일반 텍스트, 큰 텍스트, 인터페이스 그래픽의 기준을 따로 보여 줍니다.

미리보기는 시각적인 맥락을 제공하고 통과 여부는 계산된 대비율로 판단합니다. 완성된 인터페이스에서는 글자 크기, 굵기와 주변 디자인도 함께 확인해야 합니다.

sRGB 채널을 선형화하여 상대 휘도를 계산합니다. 밝은 색상의 휘도에 0.05를 더한 값을 어두운 색상의 휘도에 0.05를 더한 값으로 나눕니다.

흰 배경에 검정 텍스트를 놓은 예의 대비율은 21:1입니다. 전경색과 배경색을 바꾸어도 대비율은 같지만 시각적인 인상은 달라집니다.

예제

입력

#000000 on #ffffff

결과

21.00:1 · AA and AAA pass

흰 배경의 검정 텍스트는 WCAG 최대 대비율인 21:1입니다.

일반 텍스트는 AA 4.5:1, AAA 7:1을 검사합니다. 큰 텍스트는 3:1과 4.5:1을, 인터페이스 그래픽은 해당 기준이 적용되는 경우 3:1을 사용합니다.

표시되는 대비율은 소수 둘째 자리까지지만 통과 여부는 반올림 전 값으로 판단합니다. 투명한 색상은 뒤의 배경에 따라 실제 색상이 달라지므로 허용하지 않습니다.

실제 글자 크기, 굵기와 컴포넌트 상태를 함께 고려하세요. 색상 대비 통과만으로 포커스 표시, 키보드 접근, 의미 있는 레이블 등 페이지의 다른 접근성 항목까지 평가할 수는 없습니다.

처리 한도

텍스트 입력 한도는 1 MiB입니다. CSS 및 HTML 변환은 워커에서 실행되며 제한 시간은 30초입니다. 색상 도구는 sRGB를 사용하며, 생성된 스타일은 미리 보기이므로 실제 레이아웃에서 테스트해야 합니다.

표시된 대비율이 기준값인데도 실패하는 이유는 무엇인가요?

소수 둘째 자리까지 표시하면서 값이 올림될 수 있습니다. 통과 여부는 전체 계산값을 사용하므로 기준보다 조금이라도 낮으면 실패합니다.

투명한 색상을 입력할 수 있나요?

아니요. 사용할 배경과 합성한 최종 불투명 색상을 입력하세요.

색상을 교환하면 대비율도 바뀌나요?

아니요. 휘도 대비율은 순서에 영향을 받지 않습니다. 색상 교환은 두 가지 시각적 구성을 비교하도록 미리보기만 바꿉니다.

AA를 통과하면 페이지 전체가 접근성을 충족하나요?

아니요. 선택한 두 색상을 표시된 대비 기준으로 검사한 결과입니다. 실제 텍스트·컴포넌트에 적용할 기준과 다른 접근성 요구사항은 별도로 검토해야 합니다.

대비 결과를 저장할 수 있나요?

복사로 표시된 대비율을 가져갈 수 있습니다. 접근성 보고서를 만들거나 페이지를 인증하는 기능은 제공하지 않습니다.