색상 대비 검사

비율은 WCAG 대비 공식을 사용하여 전경색과 배경색의 상대적 휘도를 비교합니다. 비율은 동일한 휘도를 나타내는 1:1부터 가장 강한 흑백 차이를 나타내는 21:1까지입니다. 계산에서는 입력된 색상 값을 사용하므로 투명도, 그라데이션, 배경 이미지, 그림자, 앤티앨리어싱, 표시 조건 또는 대화형 상태에 표시되는 다른 색상은 자동으로 고려되지 않습니다. 일반, 호버, 포커스, 활성, 비활성화 및 방문한 상태에 대해 실제 렌더링된 색상이 다를 경우 이를 테스트합니다.

일반 텍스트의 경우 WCAG AA는 4.5:1의 최소 비율을 사용하고 AAA는 7:1을 사용합니다. 큰 텍스트는 더 크고 충분히 굵은 문자가 구별하기 쉽기 때문에 더 낮은 임계값을 사용합니다(AA의 경우 3:1, AAA의 경우 4.5:1). 텍스트가 큰지 여부는 디자인 라벨뿐만 아니라 렌더링된 크기와 무게에 따라 달라집니다. 따라서 쌍은 큰 제목에는 통과하고 본문 텍스트에는 실패할 수 있습니다. 실제 타이포그래피와 적합성 목표에 맞는 요구사항을 확인해보세요.

예. 텍스트 대비는 색상 접근성의 한 부분일 뿐입니다. 사용자 인터페이스 컨트롤, 구성 요소 상태, 그래픽 개체 및 키보드 포커스 표시기를 식별하는 데 필요한 시각적 정보는 일반적으로 WCAG 비텍스트 대비 지침에 따라 인접 색상에 대해 최소 3:1 대비가 필요합니다. 장식 요소와 비활성 컨트롤에는 서로 다른 고려 사항이 있습니다. 테두리, 아이콘, 차트, 선택한 상태, 유효성 검사 메시지 및 초점 윤곽선을 상황에 맞춰 테스트합니다. AA를 전달하는 텍스트 쌍은 동일한 화면의 모든 대화형 또는 그래픽 요소에 액세스할 수 있음을 증명하지 않습니다.

텍스트나 필수 그래픽이 나타나는 지점에 효과적인 전경색과 배경색을 입력하세요. 반투명 레이어는 뒤에 있는 레이어와 혼합되며 그라데이션이나 사진은 동일한 요소 전체에 걸쳐 서로 다른 명암비를 생성합니다. 가장 약한 관련 영역을 샘플링한 다음 다른 가능성 있는 위치와 반응하는 작물을 테스트합니다. 대비가 그림자, 윤곽선 또는 오버레이에 따라 달라지는 경우 수동 검토에 실제 렌더링된 효과를 포함합니다. 기본 이미지가 변경될 수 있는 경우 중요한 텍스트 뒤에 안정적인 단색 뒷면을 선호합니다.

아니요. 대비는 측정 가능한 요구 사항 중 하나입니다. 접근성이 뛰어난 디자인에는 읽기 쉬운 유형, 충분한 간격, 의미 구조, 레이블, 키보드 작동, 시각적 초점, 의미 있는 대안, 사용 가능한 확대/축소 및 리플로우, 제어된 동작, 색상에만 의존하지 않는 지침도 필요합니다. 색상 쌍은 수학적으로는 통과할 수 있지만 얇은 글꼴, 작은 크기, 눈부심, 색각 차이 또는 조밀한 레이아웃에서는 여전히 어렵습니다. 결과를 보다 광범위한 검토에서 하나의 확인으로 사용하고 대표적인 콘텐츠 및 상태로 실제 인터페이스를 테스트하십시오.