1.4.11 비텍스트 대비

요구 사항

다음 시각 요소는 인접한 색과 명도 대비가 3:1 이상이어야 합니다.

• 사용자 인터페이스 구성 요소: 구성 요소와 그 상태를 알아보는 데 필요한 시각 정보(입력 필드 테두리, 체크박스 모양, 선택 상태, 포커스 표시 등). 예외: 비활성화된 구성 요소, 작성자가 바꾸지 않고 브라우저 기본 모양을 그대로 쓴 경우.
• 그래픽 객체: 콘텐츠를 이해하는 데 필요한 그래픽 부분(차트의 선과 막대, 정보 아이콘). 예외: 특정 표현이 정보 전달에 필수인 경우(예: 실제 사진, 브랜드 로고, 히트맵처럼 색 자체가 데이터인 경우).

텍스트 자체의 대비는 1.4.3이 다룹니다. 텍스트가 있는 버튼이라면 버튼의 배경 경계가 아니라 텍스트 대비가 중요하며, 버튼 영역을 알아보는 데 테두리가 꼭 필요할 때만 테두리가 대상이 됩니다.

왜 필요한가요

저시력 사용자는 연한 회색 테두리의 입력 필드나 연한 아이콘을 아예 찾지 못할 수 있습니다. 어디를 눌러야 하는지, 현재 어떤 상태인지 알 수 없게 됩니다.

도움받는 사용자

• 저시력 사용자(화면 확대 사용자)
• 색각 이상이 있는 사용자
• 고령자

적용 방법

• 입력 필드 테두리, 체크박스·라디오 모양, 토글 스위치의 켜짐/꺼짐 표시를 3:1 이상으로 디자인합니다.
• 포커스 표시가 배경과 3:1 이상 대비를 가지게 합니다(포커스 표시의 크기와 변화량은 2.4.13에서 더 자세히 다룹니다).
• 아이콘만 있는 버튼의 아이콘, 차트의 선·막대 사이 경계도 3:1 이상으로 만듭니다.

input, select { border: 1px solid #767676; } /* 흰 배경 대비 4.54:1 */
:focus-visible { outline: 3px solid #0b57d0; outline-offset: 2px; }

사례

input { border: 1px solid #dddddd; } /* 흰 배경 대비 1.36:1 */

자주 하는 실수

• 입력 필드 테두리를 연한 회색으로 디자인합니다.
• 사용자 정의 체크박스의 선택 상태를 연한 색 변화로만 표시합니다.
• 포커스 표시가 배경과 거의 같은 색입니다.

검사 방법

• 입력 필드, 버튼 경계, 체크박스, 스위치, 아이콘, 포커스 표시의 색과 인접 색의 대비를 측정합니다.
• 상태(선택, 펼침, 포커스)별로 상태를 나타내는 시각 요소의 대비를 확인합니다.
• 차트·그래프에서 이해에 필요한 선과 영역의 대비를 확인합니다.

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 1.4.11 (새 창)