색상은 충분하지 않습니다

대비의 목적은 사람들이 인터페이스의 다른 부분을 보고 구별할 수 있도록 하는 것입니다. 색상은 이 맥락에서 중요한 요소이지만, 몇 가지 분명한 한계가 있습니다. 그것이 색상에만 의존하는 것이 일반적으로 좋은 전략이 아닌 이유입니다.

색상 대비의 한계

색상은 배경에서 전경을 분리하는 좋은 도구 입니다. 하지만, 배경에 대비하여 보이는 것만으로는 충분하지 않는 겨우가 많습니다. 유저 인터페이스나 컴포넌트의 다른 엘리먼트들도 서로로부터 구별 될 수 있어야 합니다. 그리고 충분한 대비를 가진 두 색상의 조합을 찾는 것이 쉬운 반면, 서로 대비가 충분한 3, 4, 그 이상의 색상 조합을 찾는 것은 불가능하지는 않더라도 금방 터무니 없는 일이 됩니다.

웹 콘텐트 접근성 지침'의 색상 사용의 규칙은 따라서 다음과 같이 명시합니다:

색상은 정보 전달, 동작 표시, 응답 유도, 시각적 요소 구분의 유일한 시각적 수단으로 사용되지 않습니다.

예: 현재 페이지 표시기

다음 그림은 페이지 상단에 위치될 수 있는 내비게이션 바를 보여줍니다.

모든 레이블은 흰 배경고 ㅏ충분한 대비를 가지지만, 활성 "Shop" 레이블의 색상과 그 주변의 비활성 레이블의 색상은 1.7:1의 명암비만을 가집니다. 이것은 이 동일한 내비게이션이 회색조로 보이는 방식입니다.

시야, 화면, 주변 광으로 인해 색상 차이를 잘 인식하지 못하는 사람들은 현재 선택된 항목을 파악하기가 어렵습니다.

이 문제는 색상을 변경과는 무관한 활성 엘리먼트에 하나 이상의 시각적 변경을 추가하여 해결 될 수 있습니다. 예를 들어, 글꼴 두께나 아래 밑줄을 활성 레이블에 변경할 수 있습니다.

이제, 색상 인식이 전혀 되지 않아도, 항목이 여전히 명확하게 구별할 수 있습니다.

마지막으로, 시각적인 모양을 넘어서 차별화는 근본적인 마크업에도 인코드 되어야 함을 명심하세요. 비시각적 수준에서도 엘리먼트를 명확하게 구별하기 위해 적절한 의미 정보가 제공되어야 합니다. 이를 수행하는 한 가지 방법은 레이블의 활성 상태를 나타내는 시각적으로 숨겨진 텍스트를 추가하는 것입니다.

엘리먼트를 시각적으로 숨기는 것을 유지하면서 스크린리더가 접근 할 수 있도록 하는 방법에 대한 더 자세한 내용을 보려면 화면 밖으로 이동시켜 엘리먼트를 시각적으로 숨기기를 참고하세요.

예: 파이 차트

시각적 차트는 의미를 전달하는데 사용되는 색상이 사용되는 빈번한 예입니다. 예를 들어 세 가지 다른 색상 색션이 있는 이 간단한 파이 차트는 별도의 범례에 레이블이 지정 됩니다.

• Apples (red)
• Oranges (orange)
• Bananas (yellow)

파이 차트의 세 색상은 흰 배경과 대비가 충분하지 않습니다. 그리고 이 경우에 서로에 대해 대비가 충분하지 않은 것도 사실입니다.

• Red/orange = 1.5:1
• Orange/yellow = 1.4:1
• Yellow/red = 2.4:1

이것은 대비가 주로 톤의 차이가 아니라 주로 휘도 차이에 대한 것이기 때문입니다 (더 자세한 내용은 색상 대비 계산을 참고하세요).

먼저, 색칠 된 영역 주변에 명확하게 보이는 윤곽선을 추가해 봅니다.

이제, 파이 차트가 흰 배경에 대해 눈에 띄고 실제로 세 섹션을 가짐이 분명합니다. 하지만 세 색상 간 낮은 대비 때문에 특정 사람들에게는 파이 차트의 섹션에 레이블을 할당하는 것은 여전히 매우 어려울 수 있습니다.

뚜렷한 시각적 패턴을 추가하는 것이 시각적 링크를 접근 가능하게 할 수 있습니다.

또는 이와 같이 간단한 차트에서는 별도의 범례를 무시하고 섹션 내부에 직접 레이블을 비치 할 수도 있습니다. 섹션의 배경색과 레이블 간의 대비가 텍스트에 대한 대비 요구사항을 만족하는 한 이것이 가장 직관적인 해결책일 수 있습니다.

분명히, 모든 차트가 이 예제만큼 간단하지 않습니다.더 복잡한 정보 그래픽의 경우 시각화의 메세지를 이해하는데 필수적인 엘리먼트에 초점을 맞추는 것이 좋습니다 (필요하기도 합니다).