성공 기준(SC)
색상은 정보 전달, 동작 표시, 반응 유발 또는 시각적 요소 구별을 위한 유일한 시각적 수단으로만 사용되지 않는다.
참고
이 성공 기준은 색상 인식을 구체적으로 다룬다. 다른 형태의 인식은 색상에 대한 프로그래밍 방식의 접근 및 기타 시각적 표현에 대한 코딩을 포함하여 지침 1.3에서 다룬다.
1.4.1 색상 사용
(Level A)
- 목표
- 색상이 정보를 구별하는 유일한 방법은 아니다.
- 할 일
- 색상 외에 모양이나 텍스트 등의 정보를 사용하여 의미를 전달한다.
- 중요성
- 모든 사람이 색상을 보거나 같은 방식으로 보는 것은 아니다.
이 성공 기준의 목적은 모든 시각 사용자가 색상 차이에 의해 전달되는 정보를 인식할 수 있도록 보장하는 것이다. 즉, 특정 색이 의미를 가지는 방식으로 색상을 사용할 때, 그 정보가 색상을 구분하기 어려운 사용자에게도 다른 시각적 수단으로 제공되도록 하는 것을 의도한다. 이미지 등 텍스트가 아닌 형식에서 색상 차이로 정보를 전달하는 경우, 색각 이상이 있는 사용자는 색을 구별하지 못할 수 있다. 이때, 색상으로 전달되는 정보를 다른 시각적 방식으로 함께 제공하면 색을 볼 수 없는 사용자도 동일한 정보를 인지할 수 있다.
색상은 웹 콘텐츠의 디자인에서 심미성, 사용성, 접근성을 높이는 중요한 요소이다. 그러나 일부 사용자는 색상을 인지하는 데 어려움을 겪는다. 시야가 좁은 사용자는 종종 제한된 색각을 경험하고, 많은 노년층 사용자도 색을 잘 구별하지 못한다. 또한 제한된 색상 수나 단색 디스플레이와 브라우저를 사용하는 사람은 색상으로만 제공된 정보에 접근할 수 없다.
색상 차이로 정보를 전달하는 예시는 “필수 입력란은 빨간색”, “오류는 빨간색으로 표시”, “Mary의 매출은 빨간색, Tom의 매출은 파란색” 등이 있다. 행동을 나타내는 예시는 “새 창에서 열리는 링크” 또는 “데이터베이스 항목이 성공적으로 업데이트됨”을 색으로 표시하는 경우이다. 응답을 유도하는 예시는 “필수 입력란이 비어 있을 때 해당 입력 필드를 강조 표시하는 것”이 있다.
참고
이 기준은 페이지에서 색상 사용 자체나 색상을 적용하는 코딩의 사용을 제한하지 않는다. 단, 다른 시각적 표식과 함께 제공되어야 한다.
참고
색조뿐 아니라 밝기에서도 뚜렷한 차이를 보이는 색상을 사용하여 콘텐츠가 전달되는 경우, 두 색상 간의 상대 명도 대비가 3:1 이상이면 이를 추가적인 시각적 구별로 인정한다. 예를 들어 밝은 녹색과 어두운 빨강은 색상과 밝기가 모두 다르므로 대비 비율이 3:1 이상이면 기준을 충족한다. 또한 전경색과 배경색을 반전시켜 콘텐츠를 구분하는 경우에도 충분한 대비가 있으면 허용된다. 반면, 특정 색을 정확히 인식해야만 의미를 이해할 수 있는 경우에는 명도 대비와 관계없이 추가적인 시각적 표식이 필요하다. 예를 들어, 초록색 윤곽선은 유효함을, 빨간색 윤곽선은 오류를 의미하는 경우가 이에 해당한다.
참고
이 기준은 색상이 정보를 전달하거나, 행동을 나타내거나, 응답을 유도하거나, 시각적 요소를 구분하는 데 사용되지 않은 경우에는 적용되지 않는다. 예를 들어, 링크가 주변 정적 텍스트와 동일한 스타일로 표시되어 색상 차이가 없다면, 이 성공 기준의 실패로 간주되지 않는다. 다만, 이러한 스타일 차별화의 부족은 장애 유무와 관계없이 모든 사용자에게 사용성 저하를 일으킬 수 있다.
참고
이 기준은 보조 기술 사용자의 요구를 직접 다루지 않는다. 이 기준의 목적은 일부 색상을 구별하지 못하는 시각 사용자가 콘텐츠를 이해할 수 있도록 보장하는 것이다. 보조기술 사용자에게 정보가 전달되는 방식은 1.1.1 텍스트가 아닌 콘텐츠, 1.3.1 정보와 관계, 4.1.2 이름, 역할, 값 등 다른 성공 기준에서 별도로 다룬다.
반대로, 색상 차이로 전달되는 정보가 보조기술에 적절히 전달되더라도, 색을 구별하지 못하는 시각 사용자가 보조기술을 사용하지 않는 경우 시각적 대안이 없다면 이 기준을 충족하지 못한다. 따라서 이 성공 기준은 색상에 대한 시각적 대체 수단을 요구한다.
참고
대부분의 사용자 에이전트는 사용자가 이미 방문한 링크를 색상만으로 구분한다. 그러나 프라이버시 보호와 기술적 제약으로 인해 작성자는 이러한 색상 전용 표시를 거의 제어할 수 없다. 기술적 제약은 다음과 같다.
- 사용자 에이전트는 개인 정보 보호를 위해 링크의 방문 상태 노출을 제한한다. 저작자가 사용자 에이전트에 요청을 보내더라도 모든 링크가 방문되지 않은 것으로 표시된다.
- 링크 방문 상태 정보는 사용자와 브라우저에 의존하므로 정확하지 않다. 저작자가 특정 사용자의 방문 기록을 알 수 있더라도, 이는 현재 브라우저의 기록에 한정되며 다른 브라우저나 비공개 세션, 캐시 삭제 후의 기록은 알 수 없다.
- 저작자는 CSS의
:visited의사 클래스 스타일에서 색상 변경만 가능하며, 색상 이외의 스타일링은 제한된다. 팔레트 제약으로 인해 링크/비링크 텍스트 간 4.5:1 대비를 유지하면서, 방문/미방문 링크 간 3:1 대비를 동시에 달성하는 것은 어렵다. - 저작자는 링크의 방문 상태를 직접 설정할 수 없다. 앵커 요소에는 “visited” 속성이 없으므로 상태를 변경할 수 없다. 따라서 저작자는 방문한 링크에 대해 1.3.1 정보와 관계나 4.1.2 이름, 역할, 값을 달성할 수 없다.
이러한 이유로, 링크의 방문 상태를 설정하거나 전달하는 것은 저작자의 책임이 아니다. 방문 여부가 색상만으로 구분되더라도, 두 링크 색상 간의 대비가 3:1 미만이라 하더라도 본 성공 기준의 실패로 간주되지 않는다. 다만, 모든 텍스트 링크는 배경과의 명도 대비를 계속 충족해야 한다(SC 1.4.3).
- 시야가 좁은 사용자는 자주 제한적인 색각을 경험한다.
- 일부 노년층 사용자는 색상을 잘 보지 못할 수 있다.
- 색맹 사용자는 색상으로 전달되는 정보가 다른 시각적인 방식으로 제공될 때 이점을 얻는다.
- 제한된 색상의 단색 디스플레이를 사용하는 사람은 색상에 의존하는 정보에 접근하지 못할 수 있다.
- 색상 구별에 문제가 있는 사용자는 텍스트 표식을 찾아보거나 들을 수 있다.
색상과 텍스트를 사용하여 필수 필드를 나타내는 양식
양식에는 필수 필드와 선택 필드가 모두 포함된다. 양식 상단의 지시 사항은 필수 필드가 빨간색 텍스트와 아이콘으로 표시된다는 것을 설명한다. 선택적 필드 레이블과 필수 필드에 대한 빨간색 레이블 간의 차이를 인식할 수 없는 사용자는 여전히 빨간색 레이블 옆에 있는 아이콘을 볼 수 있다.
시험
학생은 화학 화합물의 SVG 이미지를 보고 사용된 색상, 각 원소 옆의 두 숫자를 기반으로 존재하는 화학 원소를 식별한다. 범례에는 각 유형의 요소에 대한 색상과 숫자가 표시된다. 모든 색상 차이를 인식할 수 없는 사용자도 숫자에 의존하여 이미지를 이해할 수 있다.
자료는 정보 제공 목적으로만 제공되며 보증을 암시하지 않는다.
- Vischeck
- AWARE Color Laboratory
- Wikipedia: Color Blindness
- Microsoft: Verify that a page is usable by people with color blindness
- Causes of Color: How do people inherit colorblindness? How often?: Genetics
- How to make figures and presentations that are friendly to Colorblind people
- The Color Tutor application
이 섹션의 각 번호가 매겨진 항목은 접근성 지침 실무 그룹이 이 성공 기준을 충족하기에 충분하다고 판단하는 기법 또는 기법의 조합을 나타낸다. 기법은 기준의 최소 요구 사항을 넘어설 수 있다. 이러한 기법에서 다루지 않는 기준을 충족하는 다른 방법이 있을 수 있다. 다른 기법 사용에 대한 정보는 WCAG 성공 기준에 대한 기법 이해, 특히 “다른 기법” 섹션을 참조하라.
아래에서 귀하의 콘텐츠와 일치하는 상황을 선택하라. 각 상황에는 해당 상황에 충분하다고 알려져 있고 문서화된 기법 또는 기법의 조합이 포함된다.
상황 A: If the color of particular words, backgrounds, or other content is used to indicate information:
Section titled “상황 A: If the color of particular words, backgrounds, or other content is used to indicate information:”- G14: Ensuring that information conveyed by color differences is also available in text
- G205: Including a text cue for colored form control labels
- G182: Ensuring that additional visual cues are available when text color differences are used to convey information
- 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
상황 B: If color is used within an image to convey information:
Section titled “상황 B: If color is used within an image to convey information:”- G111: Using color and pattern
- G14: Ensuring that information conveyed by color differences is also available in text
준수를 위해 필수는 아니지만, 콘텐츠를 더 접근할 수 있도록 다음의 추가 기법을 고려해야 한다. 모든 기법이 모든 상황에서 사용할 수 있거나 효과적이지는 않는다.
다음은 접근성 지침 실무 그룹에서 이 성공 기준의 실패로 간주하는 일반적인 실수이다.
- F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image
- F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision
- F81: Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only