성공 기준(SC)
다음 항목의 시각 표현(presentation)은 인접한 색상 대비 최소 3:1의 대비율을 가져야 한다:
- 사용자 인터페이스 구성요소
비활성 구성요소이거나 사용자 에이전트에 의해 결정되고 저작자가 수정하지 않은 경우를 제외하고, 사용자 인터페이스 구성요소와 상태를 식별하는 데 필요한 시각 정보
- 그래픽 객체
특정 그래픽 표현이 전달하는 정보에 필수적인 경우를 제외하고, 콘텐츠를 이해하는 데 필요한 그래픽의 일부
1.4.11 텍스트 아닌 콘텐츠의 대비
(Level AA)
- 목표
- 중요한 시각적 정보는 큰 텍스트에 요구되는 최소 명도대비 기준을 똑같이 충족한다.
- 할 일
- 의미 있는 시각적 단서는 배경 대비 3:1을 보장해야 한다.
- 중요성
- 어떤 사람은 명도대비가 낮은 요소를 인식하지 못할 수 있다.
이 성공 기준의 목적은 사용자 인터페이스 구성요소(즉, 컨트롤)와 의미 있는 그래픽이 중등도의 저시력을 가진 사람도 구분할 수 있도록 보장하는 것이다. 요구 사항과 근거는 1.4.3 대비(최소)의 큰 텍스트에 대한 요구 사항과 유사하다. 이 요구 사항은 비활성 사용자 인터페이스 구성요소에는 적용되지 않는다.
대비가 낮은 컨트롤은 인식하기 어려우며, 시각 장애가 있는 사람은 이를 완전히 놓칠 수도 있다. 마찬가지로, 그래픽이 웹 페이지의 콘텐츠나 기능을 이해하는 데 필요한 경우, 저시력 또는 기타 장애가 있는 사용자가 대비 향상 보조 기술 없이도 인식할 수 있어야 한다.
참고
이 성공 기준에서 참조하는 3:1 대비율은 임계값으로 처리되어야 한다. 산출된 대비율을 성공 기준 비율과 비교할 때 산출된 값을 반올림해서는 안 된다(예: 2.999:1은 3:1 임계값을 충족하지 않는다).
참고
저작자는 글꼴 다듬기 및 안티앨리어싱에 대한 사용자 설정을 제어할 수 없으므로, 이 성공 기준을 평가할 때는 화면에 표시된 텍스트 아닌 요소보다, 사용자 에이전트에서 얻은 색상 또는 기반 마크업 및 스타일시트를 참조해야 한다.
안티앨리어싱으로 인해, 특히 텍스트 아닌 요소의 얇은 선과 형태는 사용자 에이전트에서 CSS에 정의된 실제 색상보다 훨씬 더 연하게 렌더링될 수 있다. 이로 인해 비텍스트 요소의 명도대비율이 성공 기준을 충족하는 것으로 나타나지만 실제로는 훨씬 낮은 대비를 가지는 상황이 발생할 수 있다. 이러한 경우, 저작자는 특히 얇은 선과 형태를 피하거나, 이 성공 기준의 규범적 요구 사항을 초과하는 색상 조합을 사용하는 것이 모범 사례이다.
사용자 인터페이스 구성요소
Section titled “사용자 인터페이스 구성요소”컨트롤이 비활성 상태가 아닌 한, 사용자가 컨트롤의 존재와 조작 방법을 식별하는 데 필요한 모든 시각 정보는 인접한 색상 대비 최소 3:1의 대비율을 가져야 한다. 또한, 구성요소가 선택되거나 초점을 받은 상태인지 등의 상태를 나타내는 데 필요한 시각 정보도 해당 상태에서 컨트롤을 식별하는 데 사용되는 정보가 최소 3:1의 대비율을 충족해야 한다.
이 성공 기준은 개별 구성요소의 상태를 구분하는 색상 변화가 서로 나란히 나타나지 않는 경우 3:1 대비율을 충족할 것을 요구하지 않는다. 예를 들어, 방문한 링크와 기본 색상 간의 대비, 또는 마우스 호버 표시기와 기본 상태 간의 대비는 새로운 요구 사항이 아니다. 그러나 구성요소는 인접한 색상과의 대비를 가져야 한다, 체크박스의 체크 표시나 메뉴가 선택되거나 열렸음을 나타내는 화살표 그래픽 같은 텍스트 아닌 표시기는 인접한 색상과 충분한 대비를 가져야 한다.
이 성공 기준은 컨트롤이 히트 영역을 나타내는 시각적 경계선을 가질 것을 요구하지 않는다. 컨트롤에 컨트롤의 존재를 사용자가 식별하는 데 도움이 되는 가시적인 콘텐츠(텍스트 또는 충분히 대비되는 아이콘 같은)가 있다면, 히트 영역의 전체 경계를 나타내는 테두리나 기타 표시는 필요하지 않으며, 따라서 텍스트 아닌 콘텐츠 대비 요구사항의 적용을 받지 않는다. 히트 영역을 나타내는 시각적 경계가 필요한 경우는, 컨트롤의 존재를 식별할 수 있는 다른 시각적 방법이 없을 때 뿐이며, 그러한 경우에 한해 이 성공 기준을 충족하기 위해 경계가 충분한 텍스트 아닌 콘텐츠는 대비를 가져야 한다.
참고
컨트롤이 히트 영역을 나타내는 시각적 경계를 가질 필요가 없는 경우에도, 충분히 대비되는 초점 표시기는 여전히 필요하다.
참고
인지 장애가 있는 사용자를 위해, 가시적인 콘텐츠가 있는 컨트롤을 포함하여 모든 컨트롤의 경계를 명확히 표시하는 것이 모범 사례이며, 이는 컨트롤 인식과 작업 완료를 돕는다.
그림 1. 적합: 시각적 경계선이 없는 버튼, 그리고 흰색 배경에 회색(#949494)으로 정의된 시각적 경계선인 초점 표시기가 있는 동일한 버튼.
인접한 색상
Section titled “인접한 색상”사용자 인터페이스 구성요소의 경우 ‘인접한 색상’은 해당 구성요소에 인접한 색상을 의미한다. 예를 들어, 입력 필드의 내부 배경이 흰색이고 어두운 테두리가 있으며 외부 배경이 흰색인 경우, 해당 구성요소의 ‘인접한 색상’은 외부의 흰색 배경이 된다.
그림 2. 적합: 회색 테두리(#767676)와 구성요소 외부의 흰색 인접한 색상을 가진 표준 텍스트 입력 필드
구성요소에 여러 색상이 사용되는 경우, 구성요소 식별에 영향을 주지 않는 색상은 대비율 측정에서 무시할 수 있다. 예를 들어, 입력 필드의 3D 그림자 효과나 대조되는 배경 사이의 어두운 테두리 선은 밝기(인지 휘도)가 가장 가까운 색상으로 흡수된 것으로 간주한다.
다음 예시는 내부 배경이 밝고 주변 배경이 어두운 입력 필드를 보여준다. 입력 필드에는 어두운 회색 테두리가 있는데, 이는 어두운 배경으로 흡수된 것으로 간주한다. 해당 테두리는 구성요소 식별에 영향을 주지 않으므로 대비율은 흰색 배경과 어두운 파란색 배경 사이에서 측정된다.
그림 3. 적합: 입력 필드 배경(흰색)과 컨트롤에 인접한 색상(어두운 파란색 #003366) 간의 대비가 충분하다. 구성요소에는 어느 쪽과도 대비가 요구되지 않는 테두리(은색)도 있다.
상태를 식별하는 데 필요한 시각 정보(예: 체크박스의 체크 표시 또는 슬라이더의 조절기)가 구성요소 내부에 있을 수 있으므로, 인접한 색상이 구성요소의 다른 부분일 수 있다.
그림 4. 적합: 연한 회색 체크 표시(#E5E5E5)가 있는 사용자 정의 체크박스로, 보라색 박스(#6221EA) 대비 5.6:1의 대비율을 가진다.
상태 표시기가 구성요소 전체를 채우면서 구성요소와는 대비되지 않지만 구성요소에 인접한 색상과는 대비되는 플랫 디자인도 사용 가능하다.
그림 5. 적합: 첫 번째 라디오 버튼은 회색(#949494) 원의 기본 상태를 보여준다. 두 번째와 세 번째는 선택 상태로, 구성요소에 인접한 색상과 대비되는 색상으로 채워진 라디오 버튼을 보여준다. 마지막 예시는 상태 표시기가 구성요소 색상과 대비되는 것을 보여준다.
색상 사용과의 관계
Section titled “색상 사용과의 관계”색상 사용 성공 기준은 객체나 텍스트의 형태를 변경하지 않고 색상(색조)만 변경하는 경우를 다룬다. 원칙은 대비율(밝기 차이)을 사용하여 텍스트나 그래픽을 구분할 수 있다는 것이다. 예를 들어, G183: 색상만으로 링크나 컨트롤을 식별하는 경우 주변 텍스트 대비 3:1의 대비율을 사용하고 호버 시 추가 시각적 단서 제공은 링크와 컨트롤을 구분하기 위해 주변 텍스트 대비 3:1의 대비율을 사용하는 기법이다. 이 경우, 비링크 텍스트 색상 대비 3:1의 대비율을 충족하는 링크 색상은 색상(색조)뿐만 아니라 대비에도 의존하여 텍스트가 링크임을 전달하므로 성공 기준 1.4.1 색상 사용을 충족하는 것으로 간주한다.
컨트롤 내 텍스트 아닌 정보가 색조 변화만으로 입력의 값이나 상태를 전달하는 경우, 예를 들어 각 별에 검정 테두리가 있고 노란색(선택) 또는 흰색(미선택)으로 채워진 1~5점 별점 표시기는 이 기준보다는 색상 사용 기준에 위반될 가능성이 높다.
그림 6. 적합: 선택 상태를 나타내는 대비가 충분한 단색 채우기를 사용하거나, 노란색 채우기와 함께 더 두꺼운 테두리를 사용하는 두 가지 통과 예시.
그림 7. 부적합: 첫 번째 예시는 노란색과 흰색 색조에만 의존하여 색상 사용 기준에 실패한다. 두 번째 예시는 노란색(#FFF000)과 흰색의 명도대비율이 1.2:1로 텍스트 아닌 경우 대비 기준에 실패한다.
초점 및 기타 상태에 대해 대비 변화를 사용하는 것은 상태를 구분하는 기법이다. 이는 G195: 저작자가 제공하는 시각적 초점 표시기 사용의 기반이 되며, 추가 기법이 계속 개발되고 있다.
초점 가시성와의 관계
Section titled “초점 가시성와의 관계”2.4.7 초점 가시성(초점 가시성)와 함께, 구성요소의 시각적 초점 표시기는 저작자가 수정하지 않고 사용자 에이전트에 의해 결정되는 경우를 제외하고, 구성요소가 초점을 받을 때 인접한 배경과 충분한 대비를 가져야 한다.
대부분의 초점 표시기는 구성요소 외부에 나타나므로, 해당 구성요소가 위치한 배경과 대비를 가져야 한다. 다른 경우는 다음과 같다.
- 구성요소 내부에만 있는 초점 표시기는 구성요소 내부의 인접한 색상과 대비를 가져야 한다.
- 구성요소의 테두리(구성요소 내부이자 외부에 인접)인 초점 표시기는 양쪽 인접 색상 모두와 대비를 가져야 한다.
- 일부는 내부, 일부는 외부에 있는 초점 표시기는 어느 한쪽 부분이 인접한 색상과 대비를 가지면 된다.
그림 8. 적합: 내부 노란색 표시기(#FFFF00)가 파란색 버튼 배경(#4189B9)과 대비를 가진다.
그림 9. 부적합: 외부 노란색 표시기(#FFFF00)가 구성요소가 위치한 흰색 배경(#FFF)과 대비를 가지지 않는다.
그림 10. 적합: 외부 초록색 표시기(#008000)가 구성요소가 위치한 흰색 배경(#FFF)과 대비를 가진다. 시각적으로 버튼이 눈에 띄게 커지는 효과가 있어 사용자가 이 추가 테두리를 단독으로 구분할 필요가 없으므로, 구성요소 배경 및 구성요소 모두와 대비를 가질 필요는 없다.
텍스트 아닌 경우의 대비는 통과하지만, 매우 두껍지 않으면 좋은 표시기가 아니다.
WCAG 2.2 신규: WCAG 2.2에는 이 측면을 다루는 AAA 기준인 초점 형태가 있다.
표시기가 구성요소의 일부는 내부, 일부는 외부에 있는 경우 표시기의 어느 한쪽 부분이 명도대비를 제공할 수 있다.
그림 11. 적합: 초점 표시기가 버튼의 일부는 내부, 일부는 외부에 있다. 노란색 표시기(#FFFF00)의 내부 부분이 파란색 버튼 배경(#4189B9)과 명도대비를 가진다.
초점 표시기가 시각적 경계 내에서 구성요소의 테두리를 변경하는 경우, 구성요소와 명도대비를 가져야 한다. 일반적으로 아웃라인은 구성요소의 시각적 경계 바깥(외부)에 표시되는데, 이 경우 테두리 변경은 구성요소의 시각적 가장자리 바로 안쪽에 있다.
그림 12. 부적합: 컨트롤의 테두리가 파란색(#4189B9)에서 초록색(#4B933A)으로 변경된다. 이는 구성요소 내부에 있으며 구성요소 내부 배경과 대비를 가지지 않는다.
그림 13. 부적합: 내부 테두리의 어두운 초록색(#008000)이 검정 테두리와는 명도대비를 가지지만, 파란색 구성요소 배경과는 대비를 가지지 않는다.
그림 14. 적합: 흰색 내부 테두리가 검정 테두리와 파란색 구성요소 배경 모두와 대비를 가진다.
그림 15. 범위 외: 구성요소 내부의 배경 변화는 텍스트가 아닌 경우 대비의 범위에 해당하지 않는다. 그러나 이는 색상 사용 기준에 적합하지 않다
텍스트 아닌 경우 대비는 특히 ”…상태를 식별하는 데 필요한 시각 정보”를 명시하고 있다. 사용자가 호버 상태를 언급할 때, 이는 일반적으로 포인터가 컨트롤 위에 위치할 때 발생하는 시각적 효과를 의미한다. 그러나 여러 HTML 구성요소(예: 버튼, 체크박스, 라디오 버튼, 선택 목록)는 기본적으로 사용자가 포인터 컨트롤을 위로 이동할 때 추가적인 시각적 효과를 표시하지 않는다. 포인터 자체가 위치를 통해 사용자가 구성요소 위에 호버 중인지를 나타낸다. 따라서 저작자가 추가로 제공하는 호버 시각적 처리는 호버 상태를 “식별하는 데 필요”하지 않으며, 보충적인 것으로 간주되어 자체적으로 배경 대비 3:1을 충족할 필요가 없다.
이것이 다른 호버 효과를 권장하지 않는다는 의미는 아니다. 예를 들어, 일부 네이티브 구성요소는 컨트롤 위에 호버할 때 포인터의 모양을 변경한다. 포인터는 텍스트 입력과 텍스트 영역 위에 호버할 때 I빔 모양이 된다. 텍스트 굵게 표시나 그림자 효과 같은 추가 시각적 호버 효과가 일부 사용자에게 도움이 되는 경우가 있다. 그러나 강한 호버 효과가 산만하다고 느끼는 사용자도 있다. 호버 효과의 핵심 고려 사항은 구성요소 자체가 인접한 색상 대비 충분한 대비를 잃지 않게 하고, 초점이나 선택과 같은 다른 상태의 시각적 표시기가 충분한 대비를 잃지 않게 하는 것이다.
사용자 인터페이스 구성 요소 예제
Section titled “사용자 인터페이스 구성 요소 예제”초점 표시기, 선택 표시기, 명확하게 인식되어야 하는 사용자 인터페이스 구성요소 설계를 위해 충분한 대비를 가진 예시는 다음과 같다.
| 유형 | 설명 | 예시 |
|---|---|---|
| 링크 텍스트 | 브라우저의 기본 링크 텍스트 색상은 1.4.3 대비(최소)에서 다룬다. 밑줄이 텍스트와 동일한 색상이며 텍스트는 최소 3:1을 충족해야 하므로, 기본 밑줄은 항상 텍스트 아닌 경우 대비 요구 사항을 충족한다. | |
| 기본 초점 스타일 | 링크는 2.4.7 초점 가시성에 따라 시각적 초점 표시기를 가져야 한다. 웹사이트(저작자)가 링크, 폼 필드, 버튼과 같은 인터랙티브 컨트롤의 초점 스타일을 수정하지 않은 경우, 사용자 에이전트의 기본 초점 스타일은 명도대비 요구 사항에서 제외된다(그러나 여전히 시각적으로 표시되어야 한다). | |
| 버튼 | 버튼이 이미 위치, 텍스트 스타일, 맥락과 같은 식별 가능한 표시기로 구분되는 경우, 버튼임을 나타내도록 대비가 있는 시각적 표시기가 필요하지는 않다. 그러나 일부 사용자는 대비 요구 사항을 충족하는 테두리가 있는 버튼을 더 쉽게 식별할 수 있다. | |
| 텍스트 입력(최소) | 텍스트 입력이 하단 테두리(#767676) 같은 시각적 표시기를 가진 경우, 해당 표시기는 3:1 대비율을 충족해야 한다. | |
| 텍스트 입력 | 텍스트 입력이 전체 테두리(#767676) 같은 표시기를 가진 경우, 해당 표시기는 3:1 대비율을 충족해야 한다. | |
| 텍스트 입력 초점 스타일 | 초점 표시기가 반드시 제공되어야 한다. 이 경우, 추가로 적용된 회색(#CCC) 외곽선은 흰색(#FFF) 배경과의 대비가 1.6:1로 기준에 미치지 못한다. 하지만 입력 필드가 초점을 받을 때 표시되는 커서/캐럿은 충분히 강한 시각적 표시를 제공한다. | |
| 배경색이 사용된 텍스트 입력 | 테두리가 없고 배경색만으로 구분되는 텍스트 입력 필드는, 인접한 배경(#043464)과 3:1 이상의 대비를 가져야 한다. | |
| 토글 버튼 | 토글 버튼의 내부 배경(#070CD5)은 외부 흰색 배경과 충분한 대비를 가진다. 또한, 내부의 원형 토글(#7AC2FF)은 내부 배경과 충분한 대비를 가진다. | |
| 드롭다운 표시기 | 아래쪽 화살표는 드롭다운 기능이 있음을 이해하는 데 필수적이며, 어두운 회색(#6E747B) 배경 위 흰색 아이콘의 대비는 4.7:1이다. | |
| 드롭다운 표시기 | 아래쪽 화살표는 드롭다운 기능이 있음을 이해하는 데 필수적이며, 흰색 배경 위 검정 아이콘의 대비는 21:1이다. | |
| 체크박스 - 비어 있음 | 흰색 배경 위의 검정 테두리가 체크박스를 나타낸다. | |
| 체크박스 - 선택됨 | 흰색 배경에 검은색 테두리는 체크박스를 나타내고, 검은색 체크무늬는 체크된 상태를 나타낸다. | |
| 체크박스 - 은은한 호버 스타일 | 체크박스는 흰색 배경 위의 검정 테두리로 시각적으로 식별된다. 마우스 포인터가 체크박스 위에 올라가면 은은한 회색 배경(#DEDEDE)이 추가된다. 검정 테두리는 회색 배경과의 대비가 15:1이므로, 체크박스는 여전히 충분한 대비를 유지한다. 회색 호버 효과 자체는 페이지 배경과 3:1의 대비를 가질 필요가 없는데, 이는 포인터의 위치 자체가 호버 상태의 주된 표시 수단이기 때문이다. |
다음은 대비가 불충분한 사례이다.
| 유형 | 설명 | 예시 |
|---|---|---|
| 링크를 나타내는 유일한 표시가 색상이 적용된 밑줄인 경우 | 링크 텍스트와 일반 텍스트 모두 거의 검정에 가까운(#0D0F13) 배경 위에 흰색으로 표시된다. 링크를 식별하는 유일한 방법은 사용자 정의 밑줄(#B1262B)뿐이다. 빨간 밑줄은 배경색과의 대비가 3:1 미만이다. | |
| 체크박스 - 테두리 색상 | 체크박스의 회색 테두리(#9D9D9D)는 흰색 배경과의 대비가 2.7:1로, 체크박스를 식별하는 데 필요한 시각적 정보를 제공하기에 충분하지 않다. | |
| 체크박스 - 은은한 초점 스타일 | 초점 표시기가 반드시 제공되어야 한다. 작성자가 초점 표시기의 스타일을 지정하는 경우, 인접한 색상과 3:1 이상의 대비를 충족해야 한다. 이 경우, 회색(#AAA) 표시기는 인접한 흰색(#FFF) 배경과의 대비가 2.3:1로 기준에 미치지 못한다. | |
| 텍스트 입력 - 은은한 테두리 및 사용자 정의 캐럿 | 텍스트 입력 필드의 테두리 색상(#CCC)은 인접한 흰색 배경과의 대비가 3:1 미만이다. 또한, 캐럿/커서에 연한 파란색(#00C7FD)이 적용되었는데, 이 색상은 입력 필드 내부의 흰색 배경과의 대비가 3:1 미만이다. |
비활성 사용자 인터페이스 구성 요소
Section titled “비활성 사용자 인터페이스 구성 요소”사용자가 상호작용할 수 없는 사용자 인터페이스 구성요소(예: HTML의 disabled 컨트롤)는 대비 요건을 충족하지 않아도 된다. 비활성 사용자 인터페이스 구성요소는 화면에 보이기는 하지만 현재 조작할 수 없는 상태이다. 예를 들어, 폼의 필수 입력 항목이 모두 작성되기 전까지는 활성화되지 않는 제출 버튼이 이에 해당한다.
HTML의 disabled 컨트롤과 같은 비활성 구성요소는 사용자가 상호작용할 수 없다. 비활성 컨트롤을 대비 요건에서 제외하기로 한 결정은 여러 가지 고려 사항을 바탕으로 이루어졌다. 비활성 컨트롤을 식별할 수 있다면 일부 사용자에게는 유익하겠지만, 모두에게 맞는 단일 해결책을 마련하는 것은 매우 어렵다. 사용자 환경 설정에 따라 비활성 컨트롤에 아이콘을 추가하는 등, 비활성 컨트롤의 표시 방식을 다양화하는 방법은 향후 발전이 기대되는 분야이다.
그래픽 객체
Section titled “그래픽 객체”‘그래픽 객체’라는 용어는 인쇄 아이콘(텍스트 없이 단독으로 사용되는 경우)과 같은 단독 아이콘, 그리고 그래프의 각 선처럼 보다 복잡한 다이어그램에서 중요한 부분에 적용된다. 단일 색상 아이콘처럼 단순한 그래픽의 경우, 이미지 전체가 하나의 그래픽 객체이다. 여러 선, 색상, 도형으로 구성된 이미지는 다수의 그래픽 객체로 이루어지며, 그 중 일부는 내용을 이해하는 데 반드시 필요하다.
모든 그래픽 객체가 주변 요소와 대비를 갖출 필요는 없다. 사용자가 그래픽이 전달하는 내용을 이해하는 데 필요한 부분만 충족하면 된다. “연속성의 법칙”과 같은 게슈탈트 원리를 활용하면, 다른 그래픽 객체나 색상과의 사소한 겹침은 무시할 수 있다.
| 이미지 | 참고 사항 |
|---|---|
 | 전화기 아이콘은 주황색( 그래픽 객체는 흰색 전화기 아이콘이다. |
 | 자석은 양 끝이 더 밝은 색상을 가진 ‘U’ 모양으로 인식할 수 있다. 따라서 이 그래픽을 이해하기 위해서는 전체적인 형태(배경 대비)와 더 밝은 색상의 끝 부분(나머지 U 모양 및 배경 대비)을 구분할 수 있어야 한다. 그래픽 객체는 ‘U’ 모양(외곽선 또는 빨간색 배경 |
 | 통화(£)가 하락하는 것을 나타내는 이 기호는 형태(아래쪽 화살표)와 통화 기호(그래픽의 일부인 파운드 아이콘 형태)를 인식함으로써 이해할 수 있다. 이 그래픽을 이해하기 위해서는 흰색 배경 위의 화살표 형태와 노란색 배경(#F5A623) 위의 파운드 아이콘을 구분할 수 있어야 한다. 그래픽 객체는 화살표 형태와 통화 기호이다. |
 | 그래프를 이해하기 위해서는 각 조건에 해당하는 선과 형태를 구분할 수 있어야 한다. 각 선의 값을 파악하기 위해서는 100 단위 눈금을 표시하는 회색 선을 구분할 수 있어야 한다. 그래픽 객체는 그래프의 선들로, 값을 나타내는 배경 선과 형태가 있는 색상 선을 포함한다. 각 선은 배경과 3:1 이상의 대비를 가져야 하지만, 다른 선과의 겹침이 거의 없으므로 서로 간에 또는 눈금 선과의 대비를 충족할 필요는 없다. (아래의 테스트 원칙 참조.) |
 | 파이 차트를 이해하기 위해서는 각 조각을 서로 구분할 수 있어야 한다. 그래픽 객체는 파이 차트의 각 조각이다. 참고: 파이 차트 조각의 값이 적합한 방식으로 별도 제공되는 경우(자세한 내용은 파이 차트 예시 참조), 조각 자체가 내용 이해에 필수적이지 않을 수 있다. |
위의 자석 이미지를 예시로, 그래픽 객체를 파악하는 과정은 다음과 같다.
- 이미지의 각 부분 중 해당 이미지가 무엇을 나타내는지 이해하는 데 필요한 부분을 파악한다.
자석의 ‘U’ 모양은 외곽선 또는 빨간색 배경으로 전달할 수 있다(둘 다 허용 가능). 흰색 끝 부분도 중요한데(없으면 말굽 모양이 됨), 빨간색 배경과 충분한 대비를 가져야 한다. - 사용자가 해당 측면만 볼 수 있다고 가정한다. 인접한 색상과 대비를 충족하는가?
자석의 외곽선은 주변 텍스트(검정/흰색)와 충분한 대비를 가지며, 끝 부분 사이의 빨간색과 흰색도 충분한 대비를 가진다.
빨간색과 흰색의 강한 대비 덕분에, 자석의 흰색 끝 부분에만 외곽선을 적용하더라도 기준을 충족할 수 있다.
이해에 필수적인 요소
Section titled “이해에 필수적인 요소”‘이해에 필수적인 요소’라는 용어가 성공 기준에서 사용되는 이유는, 많은 그래픽이 대비 요구사항을 충족하지 않아도 되기 때문이다. 사용자가 그래픽 또는 그래픽의 일부(그래픽 객체)를 인식해야 내용을 이해할 수 있는 경우에는 충분한 대비가 필요하다. 그러나 다음의 경우에는 요구사항이 아니다.
- 텍스트가 내장되거나 겹쳐진 그래픽이 동일한 정보를 전달하는 경우. 예를 들어 차트의 레이블과 수치가 이에 해당한다.
참고
그래픽 내의 텍스트는 1.4.3 대비(최소)를 충족해야 한다.
- 그래픽이 순전히 미적 목적으로 사용되며, 사용자가 내용을 이해하거나 기능을 사용하는 데 해당 그래픽을 보거나 이해하지 않아도 되는 경우.
- ‘자세한 설명 보기’ 버튼을 누르면 나타나는 그래프 다음의 표와 같이, 다른 형태로 정보가 제공되는 경우.
- 그래픽이 로고 또는 브랜드명의 일부인 경우(표현에 있어 ‘필수적’으로 간주됨).
로고는 기업 아이덴티티나 브랜드 가이드라인에 따라 더 엄격한 색상 선택을 준수해야 한다는 가정 하에 대비 요구 사항에서 면제된다. 그러나 로고가 사용자 인터페이스 구성 요소(예: 링크나 기타 대화형 컨트롤)로 작동하는 경우 문제가 될 수 있다. 이러한 경우, 모범 사례로서 저작자는 기업 아이덴티티나 브랜드 가이드라인에서 허용한다면 충분한 대비를 가진 로고 변형을 선택하는 것을 고려해야 한다. 또는 저작자는 동일한 목적을 수행하면서 대비 요구 사항을 충족하는 동등한 사용자 인터페이스 구성 요소를 제공하는 것을 고려해야 한다.
로고가 불충분한 대비로 표시되지만 그러한 표현이 기업 아이덴티티나 브랜드 가이드라인에 의해 요구된 것이 아니라 저작자의 선택인 경우, 해당 저대비 표현은 “필수적”이지 않으며, 로고는 대비 요구 사항에서 면제되지 않는다.
그림 17. 저작자가 회사 로고를 기본적으로 낮은 대비로 표시하다가 마우스를 올렸을 때만 다르게 표시하기로 선택한 경우. 초기의 낮은 대비 표현이 “필수적”이지 않으므로, 로고라는 사실만으로는 이 시나리오가 이 성공 기준의 요구 사항을 위반하는 것에서 면제되지 않는다.
그라디언트는 영역 간의 명백한 대비를 낮추고 테스트를 더 어렵게 만들 수 있다. 일반 원칙은 이해에 필수적인 그래픽 객체를 파악하고 해당 영역의 중앙 색상을 기준으로 측정하는 것이다. 충분한 대비를 갖추지 못한 인접 색상 부분을 제거했을 때, 여전히 그래픽 객체를 식별하고 이해할 수 있는가?
그림 18. 대비가 충분하지 않은 배경을 제거하면 그래픽 개체(“i”)를 이해할 수 없게 된다.
일부 그래픽은 상호작용을 통해 대비가 변화하거나, 각 그래픽 객체에 마우스를 올리거나 탭하거나 초점을 받으면 해당 정보가 텍스트로 표시되는 경우가 있다. 사용자가 그래픽의 존재 자체를 인식하려면, 초점을 받지 않은 기본 상태에서도 충분한 대비를 가진 색상이나 텍스트가 제공되어야 한다. 초점을 받는 영역의 경우, 팝업 텍스트로 정보를 동적으로 제공하거나 대비를 높여 동적으로 강조하는 방식을 사용할 수 있다.
그림 19. 현재 ‘조각’에 마우스를 올리거나 초점이 가면 해당 수치가 텍스트로 표시되고 해당 계열이 강조되는 동적 차트
인포그래픽은 차트나 다이어그램과 같이 데이터를 전달하는 모든 그래픽을 의미할 수 있다. 웹에서는 다양한 진술, 그림, 차트 또는 기타 데이터 전달 방식이 포함된 대형 그래픽을 가리키는 데 자주 사용된다. 그래픽 대비의 맥락에서, 인포그래픽 내의 각 항목은 하나의 파일로 구성되었든 여러 파일로 구성되었든 관계없이 일련의 그래픽 객체로 취급해야 한다.
인포그래픽은 다음을 포함한 여러 WCAG AA 수준 기준을 충족하지 못하는 경우가 많다.
인포그래픽에 다른 기준을 충족하는 텍스트를 활용하면, 이해에 필수적인 그래픽 객체의 수를 최소화할 수 있다. 예를 들어, 차트에서 수치를 제공하기 위해 충분한 대비를 가진 텍스트를 사용하는 경우가 이에 해당한다. 자세한 설명을 별도로 제공하는 방법도 적합한데, 이를 통해 인포그래픽에 의존하지 않고도 내용을 이해할 수 있게 되기 때문이다.
기호로 사용되는 텍스트 문자
Section titled “기호로 사용되는 텍스트 문자”텍스트 문자가 기호로 사용되는 경우, 즉 인간의 언어를 표현하는 것이 아니라 시각적 형태 자체로 사용되는 경우에는 텍스트가 아닌 콘텐츠의 정의에 해당한다.
그림 20. 두 버튼 모두 텍스트 문자를 사용하고 있지만, ‘닫기’ 버튼에 자주 사용되는 대문자 X와 오른쪽을 가리키는 화살표 역할을 하는 > 문자는 텍스트 아닌 문자/기호로 간주된다. 이들의 대비는 3:1을 약간 초과하여 이 성공 기준을 충족한다.
그래픽 객체는 ‘특정 그래픽의 표현 방식이 전달되는 정보에 필수적인 경우’에는 대비 요건을 충족하지 않아도 된다. 필수 예외는 의미를 훼손하지 않고서는 충분한 대비로 그래픽을 표현할 방법이 없는 경우에 적용되도록 의도되었다. 예를 들면 다음과 같다.
-
로고 및 국기: 조직이나 제품의 브랜드 로고는 해당 조직의 상징이므로 예외로 인정된다. 국기는 색상을 충분한 대비를 갖도록 변경하면 식별이 불가능해질 수 있다.
-
감각적 표현: 사람이나 풍경 사진과 같은 실제 장면의 이미지는 변경이 요구되지 않는다.
-
다른 방식으로 표현이 불가능한 경우: 다음 사례처럼 그래픽을 다른 방법으로 표현할 수 없다면 필수 예외로 인정된다.
- 웹사이트의 외관을 보여주기 위한 스크린샷.
- 생물학적 색상을 사용하는 의학 정보 다이어그램(위키피디아의 의학 개략도 예시).
- 열지도와 같이 측정값을 나타내는 색상 그라디언트(위키피디아의 열 지도 예시) 과 같은 측정값을 나타내는 색상 그라디언트.
테스트 원칙
Section titled “테스트 원칙”웹 페이지에서 텍스트 아닌 콘텐츠를 발견하고 평가하는 고수준 절차 요약
- 페이지의 각 사용자 인터페이스 컴포넌트(링크, 버튼, 폼 컨트롤)를 파악하고
- 컨트롤의 존재를 식별하고 현재 상태를 나타내는 데 필요한 시각적(텍스트 아닌) 표시기를 파악한다. 기본 상태(페이지 로드 시)에서 인접한 색상과의 대비를 테스트한다.
- 각 상태마다 대비를 테스트한다.
- 내용 이해에 필요한 정보가 포함된 페이지의 각 그래픽을 파악하고(동일한 정보를 제공하는 텍스트가 표시되어 있거나 장식용 그래픽은 제외)
- 그래픽 객체와 인접한 색상 간의 대비를 확인한다.
- 여러 색상이나 그라디언트가 있는 경우, 대비가 가장 낮은 영역을 선택하여 테스트한다.
- 기준에 적합하면 다음 그래픽 객체로 넘어간다.
- 대비가 가장 낮은 영역이 3:1 미만이면, 해당 영역이 보이지 않는다고 가정할 때에도 그래픽 객체를 여전히 이해할 수 있는지 판단한다.
- 그래픽 객체의 이해에 충분한 부분이 남아 있으면 적합, 그렇지 않으면 부적합으로 판정한다.
아래의 각 기법에는 테스트 기준이 포함되어 있으며, 관련 기준인 초점 가시성(2.4.7), 색상 사용(1.4.1), 대비 최소에 대한 기법도 함께 제공된다.
저시력 사용자는 대비가 불충분한 그래픽을 인식하는 데 어려움을 겪는 경우가 많다. 색각 이상이 있는 사용자의 경우 대비가 더욱 낮아져 문제가 악화될 수 있다. 상대 휘도(밝기 차이)를 3:1 이상으로 제공하면, 전체 색상 범위를 인식하지 못하는 사용자도 해당 요소를 더 잘 구분할 수 있다.
- 애플리케이션 대시보드의 상태 아이콘(관련 텍스트 없음)은 최소 3:1의 대비를 가진다.
- 텍스트 입력 필드는 흰색 편집 영역 주변에 어두운 테두리가 있다.
- 그래프는 밝은 배경을 사용하고, 각 선의 색상이 배경과 3:1 이상의 대비를 갖도록 한다.
파이 차트는 이 성공 기준의 그래픽 객체 부분에 대한 좋은 연구 사례이다. 다음 파이 차트들은 각 브라우저의 시장 점유율 비율을 전달하기 위한 것이다. 참고: 실제 수치는 임의로 만든 것으로, 실제 시장 점유율을 나타내지 않는다.
그림 21. 부적합: 이 파이 차트는 각 조각에 레이블이 있어 1.4.1 색상 사용 기준은 충족하지만(적합), 조각의 비율을 이해하려면 조각의 경계(필수 정보를 전달하는 그래픽 객체)를 구분할 수 있어야 한다. 그런데 조각 간의 대비가 3:1 이상이 되지 않는다.
그림 22. 해당 없음: 이 파이 차트는 그래픽 객체(파이 조각)와 동등한 정보를 전달하는 레이블과 수치가 화면에 표시된다.
그림 22. 적합: 이 파이 차트는 레이블이 표시되어 있으며, 파이 차트의 조각(그래픽 객체) 주변 및 조각 간에 충분한 대비가 확보되어 있다. 노란색 조각에는 대비 기준을 충족하기 위해 더 어두운 테두리가 추가되었다.
그림 23. 부적합: 네트워크의 규모를 이해하려면 원을 구분할 수 있어야 하며, 각 원 안의 아이콘을 구분해야 어떤 네트워크인지 식별할 수 있다.
그래픽 객체는 원(배경 기준으로 측정)과 각 원 안의 아이콘(원 배경을 기준으로 측정)이다.
그림 24. 적합: 원에 대비가 강한 테두리가 적용되었으며, 아이콘은 밝은 원 배경 위에 대비가 강한 어두운 색상으로 표시되어 있다.
대비를 확보하는 방법은 다양하며, 위 예시에서는 테두리 사용 방식을 보여주고 있다. 다른 방법으로는 원의 배경을 더 어두운 색상으로 사용하거나, 각 항목에 텍스트 레이블과 수치를 추가하는 방법이 있다.
자료는 정보 제공 목적으로만 제공되며 보증을 암시하지 않는다.
- Accessibility Requirements for People with Low Vision.
- Smith Kettlewell Eye Research Institute - “If the text is better understood with the graphics, they should be equally visible as the text”.
- Gordon Legge - “Contrast requirements for form controls should be equivalent to contrast requirements for text”.
이 섹션의 각 번호가 매겨진 항목은 접근성 지침 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 판단하는 기법 또는 기법의 조합을 나타낸다. 기법은 기준의 최소 요구 사항을 넘어설 수 있다. 이러한 기법에서 포괄하지 않은 기준 충족의 다른 방법이 있을 수 있다. 다른 기법 사용에 대한 정보는 WCAG 성공 기준에 대한 기법 이해, 특히 “기타 기법” 섹션을 참조하라.
아래에서 귀하의 콘텐츠와 일치하는 상황을 선택하라. 각 상황에는 해당 상황에 충분하다고 알려져 있고 문서화된 기법 또는 기법의 조합이 포함된다.
상황 A: Color is used to identify user interface components or used to identify user interface component states
Section titled “상황 A: Color is used to identify user interface components or used to identify user interface component states”- G195: Using an author-supplied, visible focus indicator
- G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast
상황 B: Color is required to understand graphical content
Section titled “상황 B: Color is required to understand graphical content”- G207: Ensuring that a contrast ratio of 3:1 is provided for icons
- G209: Provide sufficient contrast at the boundaries between adjoining colors
다음은 접근성 지침 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.