다음의 시각적 표현은 인접 색상에 대해 최소 3:1의 명암비를 가집니다.
• 유저 인터페이스 컴포넌트: 비활성 컴포넌트 또는 컴포넌트의 외관이 브라우저 기본 스타일인 경우를 제외하고, 컴포넌트 및 컴포넌트의 상태를 식별하는데 필요한 시각적 정보 • 그래픽 개체: 그래픽의 특정 표현이 필수적인 경우를 제외하고, 내용을 이애하는데 필요한 그래픽의 부분
저시력 사용자가 활성 유저 인터페이스 컴포넌트 및 의미 있는 그래픽을 구별할 수 있도록 하기 위한 항목입니다.
낮은 대비의 콘텐츠는 저시력, 색약, 노안 등의 장애를 가진 사용자에게 구별을 어렵게 만듭니다.
컨트롤이 배경이나 주변 콘텐츠와 낮은 대비를 이루고 있을 경우 저시력 사용자는 컨트롤임을 구별하기 어려워 인지할 수 없게 됩니다. 예를 들어, 입력 필드의 시각적 경계 또는 입력 영역과 배경 간의 명도 대비가 낮을 경우 저시력자는 입력 필드의 위치를 찾을 수 없어 입력에 어려움을 겪게 됩니다.
마찬가지로 그래픽의 특정 부분이 색상으로만 구별되어 있으나 대비가 낮을 경우 저시력 사용자는 구별할 수 없어 그래픽이 전달하는 정보를 올바르게 인식하기 어렵게 됩니다. 이는 특히 차트에서 주로 발견되는데 불가결하게 색상만으로 영역을 구별해야 하는 차트에서 각 영역의 대비가 낮을 경우 저시력자는 둘을 구별하기 어렵습니다.
컨트롤의 상태 변화를 색상만으로 구별하는 경우 역시, 각 상태의 색상이 서로 낮은 대비로 이루어지면 저시력자는 상태의 변화를 인식할 수 없습니다. 예를 들어 좋아요 버튼과 같이 눌림 상태를 가지고 이 상태를 색상만으로 구분하는 컨트롤이 있는 경우 좋아요 상태와 좋아요가 해제 되어 있는 상태의 색상 대비가 낮다면 저시력자는 좋아요가 된 상태인지 아닌지를 구별할 수 없기 때문에 사용이 어려워집니다.
따라서 최소 3:1 이상의 대비를 갖게하여, 저시력자가 별도의 보조 기술 없이도 사용할 수 있도록 제공되어야 합니다.