도입 스토리

"이 폼 좀 봐요." 박멘토가 회원가입 페이지를 열었습니다.

이메일 입력란 아래, 잘못된 형식일 때 빨간색 테두리가 표시되고 있었습니다. 입력이 정상이면 초록색 테두리였습니다.

"디자인 깔끔한데요?" 김개발이 말했습니다.

"색각이상이 있는 사람에게는 어떻게 보일까요?" 박멘토가 Chrome DevTools를 열고 Rendering 탭에서 색각이상 시뮬레이션을 켰습니다.

빨간색과 초록색 테두리가 거의 동일하게 보였습니다. 어느 것이 오류인지 알 수 없었습니다.

핵심 개념 설명

색에만 의존하지 않기

WCAG 성공 기준 1.4.1은 "색이 정보를 전달하는 유일한 시각적 수단이 되어서는 안 된다"고 명시합니다.

전 세계 남성의 약 8%, 여성의 약 0.5%가 색각이상입니다. 이들은 특정 색상을 구분하기 어렵습니다.

<!-- 잘못된 예: 색만으로 오류 표시 --><input type="email" style="border-color: red;"><!-- 올바른 예: 색 + 아이콘 + 텍스트 메시지 --><div class="input-wrapper">  <input type="email" aria-invalid="true" aria-describedby="email-error">  <span class="error-icon" aria-hidden="true">⚠</span>  <p id="email-error" class="error-message">올바른 이메일 형식이 아닙니다.</p></div>

색상 외에 아이콘, 텍스트, 패턴을 함께 사용해야 합니다.

색상 대비율

WCAG 성공 기준 1.4.3은 텍스트와 배경 사이의 최소 명도 대비율을 요구합니다.

대비율을 쉽게 확인하는 도구:

• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• Colour Contrast Analyser: 데스크톱 앱 (무료)
• Chrome DevTools: Elements 탭에서 색상 선택기 클릭 시 대비율 표시

대비율 계산 방법

대비율은 두 색상의 상대적 밝기(Relative Luminance) 차이로 계산합니다.

대비율 = (밝은 색의 밝기 + 0.05) / (어두운 색의 밝기 + 0.05)

직접 계산할 필요는 없습니다. 도구를 활용하세요.

자주 실패하는 색상 조합:

• 연한 회색 텍스트 (#999) + 흰색 배경: 2.85:1 (실패)
• 파란색 (#0066CC) + 흰색 배경: 4.58:1 (통과)

/* 실패 */.muted-text {  color: #999999; /* 흰색 배경에서 대비율 2.85:1 */}/* 통과 */.muted-text {  color: #767676; /* 흰색 배경에서 대비율 4.54:1 */}

포커스 표시의 대비

포커스 표시(:focus)도 대비율을 충족해야 합니다. 많은 사이트가 기본 포커스 스타일을 제거(outline: none)하여 키보드 사용자를 어렵게 만듭니다.

/* 절대 하지 말 것 */:focus {  outline: none;}/* 올바른 포커스 스타일 */:focus-visible {  outline: 3px solid #005FCC;  outline-offset: 2px;}

단계별 실습

따라하기: 색상 대비율 확인하기

1. WebAIM Contrast Checker에 접속합니다: https://webaim.org/resources/contrastchecker/
2. 자신의 프로젝트 또는 좋아하는 사이트의 주요 텍스트 색상과 배경 색상을 입력합니다.
3. 대비율이 4.5:1 이상인지 확인합니다.

변형하기: 색각이상 시뮬레이션

Chrome DevTools → Rendering 탭 → Emulate vision deficiencies에서 색각이상을 시뮬레이션합니다.

• Protanopia: 빨간색 인식 어려움
• Deuteranopia: 초록색 인식 어려움 (가장 흔한 유형)
• Tritanopia: 파란색 인식 어려움

색만으로 상태를 구분하는 요소(빨간=오류, 초록=성공 등)가 시뮬레이션에서 어떻게 보이는지 확인합니다.

응용하기: 폼 오류 메시지 접근성 개선

다음 코드에서 색에만 의존하는 오류 표시를 개선합니다.

<!-- 수정 전: 색만으로 오류 표시 --><input type="email" class="error-border"><!-- 수정 후: 색 + 아이콘 + 텍스트 + ARIA --><div class="field-wrapper">  <label for="email">이메일 <span class="required" aria-label="필수">*</span></label>  <input    type="email"    id="email"    aria-invalid="true"    aria-describedby="email-error"    class="input-error"  >  <p id="email-error" class="error-message" role="alert">    <span aria-hidden="true">⚠</span>    올바른 이메일 형식을 입력해 주세요. (예: [email protected])  </p></div>

정리와 확인

핵심 내용 요약

• 색은 정보 전달의 유일한 수단이 될 수 없음 — 아이콘, 텍스트, 패턴 병행
• 일반 텍스트 최소 대비율: 4.5:1 (Level AA 기준)
• 큰 텍스트 최소 대비율: 3:1 (Level AA 기준)
• outline: none 금지 — 포커스 스타일 반드시 유지
• 색각이상 시뮬레이션으로 직접 확인

확인 문제

문제 1. 흰색 배경(#FFFFFF)에서 대비율 4.5:1을 충족하지 못하는 텍스트 색은?

#999999 (대비율 2.85:1) — 실패
#767676 (대비율 4.54:1) — 통과

문제 2. 폼에서 필수 입력란을 표시할 때 빨간 별표(*)만 사용하면 안 되는 이유는?

색각이상 사용자에게는 빨간 별표가 다른 색으로 보일 수 있기 때문입니다.
텍스트로 "(필수)" 또는 aria-label="필수"를 함께 제공해야 합니다.

다음 챕터에서는 텍스트 크기와 확대 기능의 접근성을 다룹니다. 200%까지 확대해도 레이아웃이 무너지지 않아야 합니다.