1.4.1 색 사용

요구 사항

색이 정보를 전달하거나, 동작을 나타내거나, 응답을 요청하거나, 시각 요소를 구분하는 유일한 시각적 수단이 되어서는 안 됩니다. 색과 함께 텍스트, 아이콘, 패턴, 밑줄 같은 다른 단서를 제공합니다. 이 기준은 색 자체의 사용을 막는 것이 아니며, 색의 명도 대비는 1.4.3과 1.4.11이 다룹니다.

본문 안 링크를 색만으로 구분한다면, 주변 텍스트와 3:1 이상의 명도 대비를 두고 포커스·마우스를 올렸을 때 밑줄 같은 추가 단서를 주는 방법이 충분한 기법으로 인정됩니다. 다만 가장 확실한 방법은 밑줄을 유지하는 것입니다.

왜 필요한가요

색각 이상이 있는 사용자는 빨강·초록을 구분하지 못할 수 있고, 화면낭독기는 색을 읽지 않습니다. 흑백 인쇄나 고대비 모드에서도 색 정보는 사라집니다.

도움받는 사용자

• 색각 이상이 있는 사용자
• 저시력 사용자(화면 확대 사용자)
• 시각장애인(화면낭독기 사용자)
• 고령자
• 흑백 화면·고대비 모드 사용자

적용 방법

• 오류 필드는 빨간 테두리와 함께 오류 아이콘과 오류 메시지 텍스트를 표시합니다.
• 차트는 색과 함께 패턴, 데이터 레이블, 범례 텍스트를 사용합니다.
• 본문 링크에는 밑줄을 유지합니다.
• 선택된 탭·메뉴는 색 외에 굵기, 밑줄, 아이콘 등으로도 표시하고 aria-selected나 aria-current로 상태를 알립니다.

사례

<p>빨간색 항목은 필수입니다.</p>
<label style="color:red" for="n">이름</label> <input id="n">

<label for="n">이름 <span aria-hidden="true">*</span><span class="sr-only">(필수)</span></label>
<input id="n" required aria-required="true">
<p>* 표시는 필수 항목입니다.</p>

자주 하는 실수

• 오류·필수 항목을 글자 색만 바꿔 표시합니다.
• 본문 링크의 밑줄을 없애고 색으로만 구분합니다(대비 3:1 미만).
• 그래프 계열을 색으로만 구분하고 범례에도 색 견본만 둡니다.

검사 방법

• 흑백(회색조) 필터를 적용한 상태로 페이지를 보고 정보가 유지되는지 확인합니다.
• 색으로 구분된 요소마다 색 이외의 단서가 있는지 확인합니다.
• 본문 링크가 밑줄 없이 색으로만 구분되면 주변 텍스트와의 대비가 3:1 이상인지, 포커스·호버 시 추가 단서가 있는지 확인합니다.

관련 ARIA

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 1.4.1 (새 창)