WCAG 색상 대비 가이드

AA 및 AAA 대비 요구 사항, 텍스트 및 UI 구성 요소를 테스트하는 방법, 실패한 쌍을 수정하는 방법을 이해합니다.

FAQ

버튼에는 어떤 비율이 필요합니까?: UI 구성 요소와 그래픽 개체는 일반적으로 인접한 색상에 대해 최소 3:1이 필요합니다. 버튼 내부의 텍스트는 여전히 4.5:1(AA) 또는 큰 텍스트의 경우 3:1이 필요합니다.

WCAG 2.x는 텍스트와 배경색 간의 최소 대비율을 정의합니다. 레벨 AA는 일반적인 법적 및 제품 목표입니다. AAA는 가능하면 본문 텍스트에 더 엄격하므로 권장됩니다.

대비는 색조가 아닌 상대적 휘도를 기준으로 합니다. 두 색상은 다르게 보일 수 있지만 밝기가 너무 유사하면 대비가 실패합니다.

디자인 시스템에서 전경색과 배경색을 선택하세요. 대비 검사기를 통해 실행하십시오. 일반 텍스트 임계값과 큰 텍스트 임계값을 참고하세요.

기본 버튼과 링크뿐만 아니라 마우스 오버, 포커스, 비활성화 상태를 테스트합니다.