성공기준 이해 1.4.11:텍스트 아닌 콘텐츠의 명도대비 (Level AA)

사용자 인터페이스 구성요소

컨트롤이 비활성화되어 있지 않은 한, 사용자가 컨트롤이 존재하는지와 작동 방법을 식별하는 데 필요한 시각적 정보는 인접한 색상과 최소 3:1의 대비율을 가져야 한다. 또한 구성 요소가 선택되었는지 또는 초점이 맞춰졌는지 여부와 같이 상태를 나타내는 데 필요한 모든 시각적 정보는 해당 상태에서 컨트롤을 식별하는 데 사용되는 정보가 최소 3:1 명암비를 갖도록 보장해야 한다.

이 성공 기준은 개별 구성 요소의 상태를 구별하는 색상 변화가 서로 옆에 나타나지 않을 때 3:1 명암비를 충족할 것을 요구하지 않는다. 예를 들어 방문한 링크가 기본 색상과 대조되거나 마우스오버 표시가 기본 상태와 대조되는 새로운 요구 사항은 없다. 그러나 구성 요소는 인접 색상과의 대비를 잃어서는 안 되며, 확인란의 체크 표시와 같은 텍스트가 아닌 표시나 메뉴가 선택되었거나 열려 있음을 나타내는 화살표 그래픽은 인접 색상과 충분한 대비를 가져야 한다.

경계

이 성공 기준에서는 컨트롤의 작동 영역(hit area)을 나타내는 시각적 경계가 있어야 한다고 요구하지 않는다. 그러나 컨트롤의 시각적 표식(visual indicator)이 컨트롤을 식별하는 유일한 방법인 경우 해당 표식은 충분한 대비를 가져야 한다. 버튼 내의 텍스트(또는 아이콘) 또는 텍스트 입력 내의 입력 예제(placeholder) 텍스트가 표시되고 작동 영역이 시각적으로 표시되지 않으면 성공 기준이 통과된 것이다. 텍스트가 있는 버튼에도 색상이 있는 테두리가 있는 경우 테두리가 유일한 표시를 제공하지 않기 때문에 텍스트 대비(1.4.3 명도 대비 (최소)) 외에는 대비 요구 사항이 없다. 인지 장애가 있는 사람의 경우 컨트롤 인식과 그에 따른 활동 완료를 돕기 위해 컨트롤 경계를 설명하는 것이 좋다.

인접한 색상

사용자 인터페이스 구성 요소의 경우 '인접 색상'은 구성 요소에 인접한 색상을 의미한다. 예를 들어 입력에 흰색 내부 배경, 어두운 테두리, 흰색 외부 배경이 있는 경우 구성요소에 대한 '인접 색상'은 흰색 외부 배경이 된다.

구성요소가 여러 색상을 사용하는 경우 구성요소 식별에 방해가 되지 않는 색상은 명암비 측정 시 무시할 수 있다. 예를 들어, 입력의 3D 그림자 또는 대비되는 배경 사이의 어두운 경계선은 밝기(인식된 명도)가 가장 가까운 색상에 포함되는 것으로 간주한다.

다음 예에서는 내부가 밝은 배경이고 주변이 어두운 배경인 입력을 보여준다. 입력에는 어두운 배경에 포함되는 것으로 간주되는 어두운 회색 테두리도 있다. 테두리는 구성 요소 식별에 방해가 되지 않으므로 흰색 배경과 진한 파란색 배경 사이의 명도대비를 사용한다.

체크박스의 체크표시나 슬라이더의 조절부와 같이 상태를 식별하는 데 필요한 시각적 정보의 경우 해당 부분은 구성 요소 내에 있을 수 있으므로 인접한 색상은 구성 요소의 다른 부분일 수 있다.

상태 표시가 구성 요소를 채우고 구성 요소와 대비되지 않지만 구성 요소에 인접한 색상과 대비되는 평면 디자인을 사용할 수 있다.

색상 사용과의 관계

색상 사용 성공 기준은 개체 또는 텍스트의 색상(색조)만 변경하고 형태는 변경하지 않는 것을 다룹니다. 기본 원칙은 대비율(밝기 차이)을 사용하여 텍스트 또는 그래픽을 구분할 수 있다는 것입니다. 예를 들어, G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on hover for links or controls where color alone is used to identify them은 링크나 컨트롤을 식별할 때 주변 텍스트와 3:1 대비율을 사용하는 기법이다. 이 경우 작업그룹은 링크 색상이 비링크 텍스트 색상과 3:1 대비율을 만족하면 색상(색조)뿐만 아니라 대비율에 의존하므로 성공 기준 1.4.1 색상 사용을 충족한다고 간주한다.

컨트롤 내의 비텍스트 정보가 입력 값이나 상태를 전달하기 위해 색조(hue) 변화만을 사용하는 경우, 예를 들어 1~5개의 별점 표시에서 각 별의 윤곽선은 검정색이지만 내부는 노란색(꽉 참)이거나 흰색(비어 있음)으로 표시되는 것은 색상 사용 기준을 위반할 가능성이 높다.

초점과 다른 상태에 대한 대비 변경을 사용하는 것은 상태를 구별하는 기법이다. 이것이 G195: Using an author-supplied, visible focus indicator의 기초이고, 더 많은 기법이 추가되고 있다.

초점 시각화와의 관계

2.4.7 초점 시각화(초점 시각화)와 함께 구성 요소의 시각적 초점 표시는 구성 요소에 초점이 맞춰졌을 때 인접한 배경과 충분한 대비를 가져야 한다. 단, 구성 요소의 모양이 사용자 에이전트에 의해 결정되고 저작자가 수정하지 않은 경우는 제외된다.

대부분의 초점 표시기(focus indicator)는 구성 요소 외부에 나타난다. 이 경우 구성 요소가 있는 배경과 대조되어야 한다. 다른 경우에는 다음과 같은 초점 표시기가 포함된다.

• 구성 요소 내부에만 있고 구성 요소 내의 인접한 색상과 대비되어야 한다.
• 구성 요소의 경계(구성 요소 내부이면서 외부와 인접한 부분)이며, 내부와 외부 양쪽 인접 색상과 대비되어야 한다.
• 부분적으로 내부, 부분적으로 외부에 있어 초점 표시기의 일부가 인접 색상과 대비될 수 있는 경우

어두운 윤곽선이 있는 위의 그림은 텍스트가 아닌 콘텐츠의 대비를 통과하지만 매우 두껍지 않으면 좋은 지시자가 아니다. WCAG 2.2의 새로운 기능: WCAG 2.2에는 이러한 측면을 다루는 AAA 기준인 초점 시각화가 있다.

지시자 일부는 구성 요소 내부에 있고 일부는 외부에 있는 경우 지시자의 어느 부분이든 대비를 제공할 수 있다.

초점 표시기가 보이는 경계 내에서 구성 요소의 테두리를 변경하는 경우 구성 요소와 대비되어야 한다. 일반적으로 윤곽선은 구성 요소의 보이는 경계 주변(외부)으로 이동한다. 이 경우 테두리 변경은 구성 요소의 보이는 외곽의 바로 안쪽에 있다.

주의할 점은 이 성공 기준에서 컨트롤의 포커스 상태와 포커스 해제 상태를 직접 비교하지 않는다는 것이다. 포커스 상태가 색상 변화에 의존한다면(예: 버튼의 배경색만 변경하는 경우) 이 성공 기준은 두 상태 간의 대비 차이에 대한 요구사항을 정의하지 않는다.

사용자 인터페이스 구성 요소 예제

명확하게 인식되어야 하는 초점 표시기, 선택 지시자, 사용자 인터페이스 구성 요소를 디자인하기 위해 충분한 대비를 갖춘 예는 다음과 같다.

사용자 인터페이스 구성 요소 예제

종류	설명	예제
링크 텍스트	기본 링크 텍스트는 1.4.3 대비(최소)1.4.3 대비(최소) 범위에 속하며 밑줄만으로도 링크를 표시하기에 충분하다.
기본 초점 스타일	링크에는 2.4.7 초점 시각화에 따라 시각적 초점 표시기가 있어야 한다 . 사용자 에이전트의 포커스 스타일이 웹 사이트(저작자)에 의해 대화형 컨트롤(예: 링크, 양식 필드 또는 버튼)에서 조정되지 않은 경우 기본 포커스 스타일은 대비 요구 사항에서 제외된다(그러나 여전히 표시되어야 함).
버튼	위치, 텍스트 스타일 또는 컨텍스트와 같은 구별 표시가 있는 버튼은 버튼임을 표시하기 위해 대비되는 시각적 표시가 필요하지 않지만 일부 사용자는 대비 요구 사항을 충족하는 윤곽선이 있는 버튼을 더 쉽게 식별할 가능성이 높다.
텍스트 입력(최소)	텍스트 입력에 아래쪽 테두리(#767676)와 같이 입력임을 나타내는 시각적 지시자가 있는 경우 해당 표시기는 3:1 명암비를 충족해야 한다.
텍스트 입력	텍스트 입력에 완전한 테두리(#767676)와 같은 지시자가 있는 경우 해당 표시기는 3:1 명암비를 충족해야 한다.
텍스트 입력 초점 스타일	초점 표시가 필요하다. 이 경우 추가 회색(#CCC) 윤곽선은 흰색(#FFF) 배경에 비해 1.6:1의 대비가 충분하지 않지만 입력이 초점을 받을 때 표시되는 커서/캐럿은 충분히 강한 시각적 표시를 제공한다.
배경색이 사용된 텍스트 입력	테두리가 없고 배경색으로만 구별되는 텍스트 입력은 인접한 배경과 3:1 명암비를 가져야 한다(#043464).
토글 버튼	토글 버튼의 ​​내부 배경(#070CD5)은 외부 흰색 배경과 대비가 좋다. 또한 (#7AC2FF) 내의 둥근 토글은 내부 배경과 대비된다.
드롭다운 지시자	드롭다운 기능이 있다는 것을 이해하려면 아래쪽 화살표가 필요하다. 진한 회색의 흰색 아이콘(#6E747B)에 대한 대비는 4.7:1이다.
드롭다운 지시자	드롭다운 기능이 있다는 것을 이해하려면 아래쪽 화살표가 필요하다. 흰색 바탕에 검은색 아이콘의 대비는 21:1이다.
체크박스 - 비어 있음	흰색 배경에 검은색 테두리가 체크박스를 나타낸다.
체크박스 - 선택됨	흰색 배경에 검은색 테두리는 체크박스를 나타내고, 검은색 체크무늬는 체크된 상태를 나타낸다.
체크박스 - 실패	체크박스의 회색 테두리 색상(#9D9D9D)은 흰색 배경과의 대비율이 2.7:1로 체크박스를 식별하는 데 필요한 시각적 정보가 충분하지 않다.
체크박스 - 미묘한 호버 스타일	흰색 배경의 검정색 테두리는 확인란을 나타내며, 마우스 포인터가 미묘한 호버 상태를 활성화하면 회색 배경(#DEDEDE)이 추가된다. 검정색 테두리는 회색 배경과 15:1의 명암비를 갖는다.
체크박스 - 미묘한 초점 스타일 - 실패	초점 표시가 필요하다. 초점 표시는 저작자가 스타일을 지정한 경우 인접 색상과의 명암비가 3:1을 충족해야 한다. 이 경우 회색(#AAA) 표시는 흰색(#FFF) 인접 배경과의 비율이 2.3:1로 부족하다.

비활성 사용자 인터페이스 구성 요소

사용자 상호 작용에 사용할 수 없는 사용자 인터페이스 구성 요소(예: HTML에서 비활성화된 컨트롤)는 대비 요구 사항을 충족할 필요가 없다. 비활성 사용자 인터페이스 구성 요소는 표시되지만 현재 작동할 수는 없다. 예를 들어 양식 하단에 표시되지만 양식의 모든 필수 필드가 완료될 때까지 활성화할 수 없는 제출 버튼이 있다.

HTML의 비활성화된 컨트롤과 같은 비활성 구성 요소는 사용자 상호 작용에 사용할 수 없다. 비활성 대조군을 대비 요구 사항에서 제외하기로 한 결정은 여러 가지 고려 사항을 바탕으로 이루어졌다. 일부 사람들에게는 비활성 컨트롤을 식별하는 것이 도움이 될 수 있지만 모든 경우에 적용되는 단일 솔루션을 구축하는 것은 매우 어렵다. 향후에는 비활성화된 컨트롤에 대한 아이콘을 추가하는 등 비활성화된 컨트롤의 표현을 사용자의 선호도에 따라 다양하게 표현하는 방식이 발전할 것으로 예상된다.

그래픽 객체

"그래픽 개체"라는 용어는 인쇄 아이콘(텍스트 없음)과 같은 독립형 아이콘과 그래프의 각 선과 같은 보다 복잡한 다이어그램의 중요한 부분에 적용된다. 단색 아이콘과 같은 간단한 그래픽의 경우 전체 이미지가 그래픽 개체이다. 여러 선, 색상 및 모양으로 구성된 이미지는 여러 그래픽 개체로 구성되며 그 중 일부는 이해가 필요하다.

모든 그래픽 개체가 주변 환경과 대비되어야 하는 것은 아니다. 그래픽이 전달하는 내용을 사용자가 이해하는 데 필요한 개체만 필요하다. "연속성의 법칙"과 같은 게슈탈트 원리를 사용하면 다른 그래픽 개체나 색상과의 사소한 겹침을 무시할 수 있다.

이미지	참고 사항
	전화 아이콘은 주황색(#E3660E) 원 안에 있는 단순한 모양이다. 해당 아이콘만으로도 의미를 이해할 수 있으며, 원 뒤의 배경은 관련이 없다. 주황색 배경과 흰색 아이콘의 명암비는 3:1보다 크므로 통과한다. 그래픽 개체는 흰색 전화 아이콘이다.
	자석은 밝은 색상의 팁이 있는 "U" 모양으로 이해될 수 있다. 따라서 이 그래픽을 이해하려면 전체적인 모양(배경에 대해)과 더 밝은 색상의 팁(나머지 U 모양 및 배경에 대해)을 식별할 수 있어야 한다. 그래픽 개체는 "U" 모양(윤곽선 또는 단색 #D0021B)과 자석의 각 끝이다.
	아래로 내려가는 통화(파운드)를 나타내는 기호는 모양(아래쪽 화살표)과 통화 기호(그래픽의 일부인 모양이 있는 파운드 아이콘)를 인식하면 이해할 수 있다. 이 그래픽을 이해하려면 흰색 배경에 있는 화살표 모양과 노란색 배경에 있는 파운드 아이콘(#F5A623)을 식별해야 한다. 그래픽 개체는 모양과 통화 기호이다.
	그래프를 이해하려면 각 조건에 대한 선과 모양을 식별해야 한다. 차트를 따라 각 선의 값을 인식하려면 100단계 값 증분을 표시하는 회색 선을 식별해야 한다. 그래픽 개체는 값의 배경 선과 모양이 있는 색상 선을 포함하여 그래프의 선이다. 선은 배경과 3:1 대비를 가져야 하지만 다른 선과 거의 겹치지 않으므로 서로 또는 눈금선과 대비할 필요가 없다. (아래 테스트 원칙을 참조하라.)
	원형 차트를 이해하려면 원형 차트의 각 조각을 다른 조각과 구별해야 한다. 그래픽 개체는 원형(차트)의 조각이다. 참고: 원형 차트 조각의 값도 적합한 방식으로 표시되는 경우(자세한 내용은 원형 차트 예 참조) 이해하는 데 조각이 필요하지 않다.

위의 자석 이미지를 예로 들면 그래픽 객체를 설정하는 프로세스는 다음과 같다.

• 각 이미지가 무엇을 나타내는지 이해하려면 각 이미지의 어느 부분이 필요한지 평가한다.
  자석의 "U" 모양은 윤곽선이나 빨간색 배경으로 전달될 수 있다(모두 허용됨). 흰색 끝부분도 중요하다(그렇지 않으면 말굽 모양이 된다). 빨간색 배경과 대비되어야 한다.
• 사용자가 해당 측면만 볼 수 있다고 가정한다. 인접한 색상과 대조되는가?
  자석의 윤곽선은 주변 텍스트(검은색/흰색)와 대조를 이루며, 끝부분 사이의 빨간색과 흰색도 충분한 대비를 이룬다.

빨간색과 흰색의 강한 대비로 인해 자석의 흰색 끝 부분에만 윤곽선을 배치하는 것도 가능하며 여전히 준수한다.

그라디언트

그라디언트는 영역 간의 뚜렷한 대비를 줄여 테스트를 더 어렵게 만들 수 있다. 일반적인 원칙은 이해에 필요한 그래픽 개체를 식별하고 해당 영역의 중심 색상을 취하는 것이다. 대비가 충분하지 않은 인접 색상을 제거해도 그래픽 개체를 식별하고 이해할 수 있는가?

동적 예제

일부 그래픽에는 대비를 변경하거나 각 그래픽 개체에 마우스를 올리거나 탭하거나 초점을 맞출 때 정보를 텍스트로 표시하는 상호 작용이 있을 수 있다. 누군가 그래픽이 전혀 존재하는지 식별하려면 초점이 맞지 않은 기본 버전에 이미 충분히 대비되는 색상이나 텍스트가 있어야 한다. 초점을 받는 영역의 경우 정보는 팝업 텍스트가 동적으로 제공되거나 대비를 높여 동적으로 전경에 표시할 수 있다.

기호 텍스트 문자

텍스트 문자가 인간의 언어로 무언가를 표현하는 것이 아니라 시각적 모양을 위해 사용되는 기호로 사용되는 경우 이는 텍스트가 아닌 콘텐츠의 정의에 속한다.

충분 기법

아래에서 귀하의 콘텐츠와 일치하는 상황을 선택하라. 각 상황에는 해당 상황에 충분하다고 알려져 있고 문서화된 기법 또는 기법의 조합이 포함된다.

오류

다음은 WCAG 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.

• F78: Failure of Success Criterion 1.4.11, 2.4.7 and 2.4.13 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator