색과 움직임의 접근성

왜 색과 움직임인가

접근성을 스크린 리더 대응으로만 생각하기 쉽다. 하지만 저시력과 색각 결핍 인구(글루시엔의 글에 따르면 색각 결핍만 약 3억 명)는 전맹보다 훨씬 많다. 이들은 스크린 리더 대신 화면 확대, 브라우저 글자 크기, 사용자 스타일시트로 화면을 직접 본다. 그래서 이들에게는 마크업보다 색과 대비가 중요하다.

움직임도 같다. 자동으로 움직이는 요소는 ADHD 같은 주의력 장애가 있는 사람의 집중을 깨고, 전정 장애가 있는 사람에게 어지럼과 구역질을, 광과민성 사용자에게 발작을 일으킬 수 있다.

색각 결핍(CVD) 바로 알기

"색맹"이라고 하면 흑백으로 본다고 오해하기 쉽다. 정확한 말은 색각 결핍(Color Vision Deficiency)이다.

신호등은 빨강·초록이라는 가장 흔한 문제 색을 쓰지만 위치라는 보조 단서 덕분에 색각 결핍 운전자도 읽는다. 디자인도 이렇게 색 외의 단서를 함께 줘야 한다.

원칙 1. 색만으로 정보를 전하지 않는다

WCAG 성공 기준 1.4.1(색 사용)은 색이 정보 전달·행동 지시·반응 유도·요소 구분의 유일한 수단이 되어선 안 된다고 정한다. 색은 메시지를 강화하는 역할이지 전달자가 아니다.

데이터 시각화는 색에 가장 크게 기대는 영역이라 특히 주의한다. 색을 없앨 필요는 없다. 문제 조합을 피하고 모든 데이터에 레이블을 붙이면 된다. 「초록 버튼을 눌러 계속」처럼 안내 문구가 색을 가리키는 것도 같은 실수다.

빠른 점검법은 화면을 회색조로 보는 것이다(OS의 색상 필터나 DevTools 렌더링 에뮬레이션). 회색조에서 구분이 사라지는 곳이 색에만 기댄 곳이다.

밑줄 없는 링크

링크는 밑줄을 두는 것이 기본이다. 본문 속 링크에서 밑줄을 없애 색으로만 구분하려면 세 조건을 모두 지켜야 한다.

세 비율을 한꺼번에 맞추기는 생각보다 어렵다. 어두운 글자·밝은 배경 조합이라면 본문 색을 더 어둡게 하거나 배경을 더 밝게 해야 맞는 경우가 많다. 내비게이션 메뉴처럼 위치와 모양으로 링크임이 분명한 곳은 이 조건의 대상이 아니다. 대부분은 밑줄을 남기는 편이 가장 간단하다. Word·PowerPoint 같은 전자 문서는 호버·포커스 때 밑줄을 띄울 방법이 없으므로 문서 속 링크는 밑줄을 남긴다.

원칙 2. 대비를 지킨다

수치는 WCAG 2.2 기준이다. 법과 조달 기준은 보통 AA다.

대비비는 이렇게 계산한다

대비비(contrast ratio)는 두 색의 상대 휘도(relative luminance) 차이다. 1:1(같은 색)부터 21:1(검정과 흰색)까지다.

1. sRGB 각 채널을 0~1로 나눈다          c = R/255
2. 감마를 풀어 선형 값으로 바꾼다        c ≤ 0.04045 ? c/12.92 : ((c+0.055)/1.055)^2.4
3. 상대 휘도 L = 0.2126·R + 0.7152·G + 0.0722·B   (초록이 가장 밝게 느껴진다)
4. 대비비 = (L밝은 + 0.05) / (L어두운 + 0.05)

• 가중치 때문에 같은 "순색"이라도 대비가 크게 다르다. 흰 배경에서 순빨강(#ff0000)은 약 4:1, 순초록(#00ff00)은 약 1.4:1, 순파랑(#0000ff)은 약 8.6:1이다.
• 글자색과 배경색을 맞바꿔도 대비비는 같다.
• HSL의 명도(lightness)를 바꾸는 것이 대비를 조절하는 가장 직접적인 방법이다. 색조를 유지한 채 밝기만 움직이면 된다. HSL은 색상(hue, 0360도: 빨강 0, 초록 120, 파랑 240), 채도(saturation, 0%면 회색조), 명도(lightness, 0% 검정100% 흰색)로 색을 나눠 RGB보다 사람이 느끼는 방식에 가깝게 다룬다.
• 반투명 색(alpha)은 뒤 배경이 비쳐 실제 색이 달라진다. 합성된 결과색으로 계산한다.
• 반올림하지 않는다. 4.47:1은 4.5:1이 아니라 미달이다.

큰 텍스트의 정의

큰 텍스트는 18pt(약 24px) 이상, 또는 굵게 14pt(약 18.66px) 이상이다. 굵게는 보통 font-weight: 700 이상이다. CSS의 px는 1pt = 4/3px로 환산한다. 글꼴마다 실제 크기가 달라 보이므로, 획이 가는 글꼴은 이 크기를 넘어도 읽기 어려울 수 있다.

기준에서 빠지는 것과 따로 봐야 하는 것

비텍스트 대비: 1.4.11 Non-text Contrast

텍스트가 아닌 요소도 알아보고 조작하는 데 필요한 시각 정보라면 인접한 색과 3:1을 넘어야 한다. 배경색만이 아니라 맞닿은 색과 비교한다. 여러 색으로 된 아이콘은 부분마다 여러 번 잴 수 있다.

• 아이콘 옆에 4.5:1을 넘는 텍스트 라벨이 있으면 아이콘은 정보 전달에 필수가 아니므로 3:1이 필요 없다.
• 브라우저 기본 입력 칸 테두리와 포커스 링은 예외지만 대비가 낮은 경우가 많다. 직접 스타일을 주는 편이 낫다. 직접 스타일을 주는 순간 그 스타일은 기준 대상이 된다.

"필수"인지는 그 그래픽이 사라지면 정보나 기능이 바뀌는가로 판단한다. 홈 버튼으로 쓰는 집 모양 SVG 아이콘은 필수다. 예를 들어 배경 #cccccc에 선 #8f8f8f는 약 2:1이라 미달이고, 선을 #717171로 조금 어둡게 하면 3:1을 넘는다. 같은 접근성 패턴(숨긴 텍스트 "Home")을 써도 색 하나로 통과 여부가 갈린다.

WebAIM이 해마다 상위 100만 개 홈페이지를 검사하는 WebAIM Million에서 낮은 텍스트 대비는 매년 가장 흔한 오류다. 2026년 보고서에서는 홈페이지의 83.9%에서 발견됐다.

상태 변화도 색만으로 보여 주지 않는다

1.4.11은 각 상태가 인접 색과 3:1을 넘는지만 본다. 상태끼리의 차이는 묻지 않는다. 그래서 체크박스 테두리가 기본 회색에서 포커스 때 파랑으로만 바뀌면, 두 색이 모두 배경과 3:1을 넘어도 색을 구분하지 못하는 사람에게는 상태 변화가 보이지 않는다. 1.4.1(색 사용)과 1.4.11 사이의 이 빈틈은 상태 사이에도 3:1 차이를 두거나(2.4.13 포커스 표시 모양이 포커스에 요구하는 방식) 두께·모양 변화(굵은 외곽선, 밑줄)를 더해 메운다. 키보드 포커스는 아예 별도 외곽선을 두르는 편이 가장 확실하다.

이 때문에 컴포넌트 하나도 재야 할 곳이 많다. 「약관에 동의한다」 체크박스 하나만 해도 라벨 텍스트, 체크박스 경계, 체크 표시, 포커스 표시를 기본·호버·포커스·선택 상태마다 재면 열다섯 번이 넘는다.

대비 평가 방법

한 가지 도구로 끝나지 않는다. 보통 세 단계를 섞는다.

1. 훑어보기   색에만 기댄 곳(링크·폼 오류), 연한 텍스트, 이미지 속 텍스트,
              UI 컴포넌트·그래픽, 호버·포커스 상태를 눈으로 먼저 찾는다
2. 자동 검사  WAVE·axe·Lighthouse로 텍스트 대비 오류를 모은다
3. 수동 측정  대비 검사기와 스포이트로 자동 검사가 못 보는 곳을 잰다

팔레트 단계에서는 A11Y Color Palette처럼 팔레트 전체 조합을 한 번에 보는 도구가 편하다. Office 문서는 Word·PowerPoint·Excel의 접근성 검사가 낮은 대비를 잡는다.

APCA는 아직 기준이 아니다

APCA(Accessible Perceptual Contrast Algorithm)는 글자 크기·굵기와 밝은 글자/어두운 글자의 방향까지 반영하는 대비 계산법이다. 지금의 WCAG 2 공식이 어두운 색끼리의 대비를 과대평가하는 문제를 보완하려는 시도다. 하지만 WCAG 3 작업 초안에서 검토되는 후보일 뿐이고, WCAG 2.2의 성공 기준도 법적 기준도 아니다. 준수 판단은 위의 WCAG 2 대비비로 한다. APCA는 디자인을 다듬을 때 참고로만 쓴다.

원칙 3. 사용자 설정을 존중한다

사용자가 경험을 고르게 하는 편이 사용자가 원하는 것을 안다고 가정하는 것보다 낫다.

주요 브라우저가 모두 지원한다. 쿼리를 겹치면 「밝은/어두운 × 보통/높은 대비」 네 상태를 따로 다듬을 수 있다.

@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
  :root { --text: #fff; --bg: #000; --border: #fff; }
}

밝은 테마가 더 잘 읽히는 사람도 있으니 다크 모드(prefers-color-scheme)는 강요하지 않고 고를 수 있게 둔다. 다크 모드가 대비 검사를 대신하지는 않는다.

SVG의 선·채움 색을 마크업에 하드코딩하지 말고 CSS로 제어하면 테마 대응이 쉽다.

.icon-home { stroke: #717171; fill: none; }
 
@media (prefers-color-scheme: dark) {
  .icon-home { stroke: #d0d0d0; }
}
 
@media (prefers-reduced-motion: reduce) {
  .animated-logo * { animation: none; }
}

기본 테마가 밝으면 어두운 테마를 미디어 쿼리로 추가하고, 반대면 prefers-color-scheme: light를 쓴다. 테마별로 다른 SVG를 바꿔 끼운다면 숨긴 쪽은 보조 기술에서도 숨긴다(display: none 또는 aria-hidden).

원칙 4. 움직임을 통제할 수 있게 한다

먼저 그 움직임이 내용과 동작을 이해하는 데 꼭 필요한지 묻는다. 필요 없으면 미세한 움직임까지 모두 없앤다. 필요하면 아래 규칙을 지킨다.

WCAG 규칙: 자동으로 시작해 5초 넘게 이어지고 다른 내용과 함께 보이는 움직임·깜박임·스크롤은 사용자가 일시정지·정지·숨김할 수 있어야 한다. 제어는 요소 단위(캐러셀 옆 정지 버튼)나 화면 단위(「움직임 끄기」 설정)로 둔다.

주의할 함정: reduced-motion 버전을 "느린 무한 반복"으로 만들면 여전히 5초 규칙을 어긴다. 줄인 버전도 5초 안에 멈춰야 한다.

기본값을 「움직임 없음」으로

OS 설정은 이름과 방향이 제각각이다. macOS·iOS는 「동작 줄이기」를 켜야 하고, Android는 「애니메이션 삭제」를 켜야 하며, Windows는 기본으로 켜져 있는 「애니메이션 효과」를 꺼야 한다. 설정을 모르는 사람도 많고, 아주 작은 움직임도 어지럼을 일으킬 수 있다. 그래서 점진적 향상으로 움직임 없는 상태를 기본으로 두고, 사용자가 움직임을 거부하지 않았을 때만 애니메이션을 더하는 편이 안전하다.

.hero { animation: none; }
 
@media (prefers-reduced-motion: no-preference) {
  .hero { animation: float 4s ease-in-out 1; }
}

OS 설정만으로는 「필요 없는 움직임만 끄고 잘 만든 움직임은 보고 싶은」 중간 선택이 안 된다. 사이트 안에 애니메이션 켜기/끄기 토글을 두고, 그 기본값도 끔으로 하면 사용자가 직접 고른다.

광과민성 뇌전증은 뇌전증 환자의 약 3~5%에 해당한다(Epilepsy Action). 초당 세 번 넘는 번쩍임은 금지이고(2.3.1), 밝고 어두운 배경이 빠르게 바뀌는 콘텐츠는 PEAT로 검사한다.

테스트는 실제 사람과

• 색맹 시뮬레이터에만 기대지 않는다. 실제 색각 결핍의 다양성을 담기엔 부정확하다.
• 동료에게 장애 여부를 캐묻지 않는다(미국 등에선 직장에서 위법일 수 있다). 자발적으로 돕겠다는 사람이나 장애인 대상 리서치 전문 업체와 테스트한다.
• 색각 결핍 디자이너·개발자는 팔레트 검토와 대비 문제 지적에 강점이 있다. 이들은 팔레트 생성기, 헥스 값, 고대비 에디터 테마, 컬러 피커, 대비 검사기로 일한다. 색각 결핍을 디자이너의 결격 사유로 보는 편견은 근거가 없다.

정리

• 저시력·색각 결핍 사용자는 화면을 본다. 접근성은 스크린 리더 대응만이 아니다.
• 색만으로 정보를 전하지 않는다. 아이콘, 텍스트, 패턴, 레이블을 함께 쓴다.
• 텍스트 4.5:1(큰 텍스트 3:1), UI 컴포넌트·상태·포커스·필수 그래픽 3:1을 반올림 없이 확인한다. 밑줄 없는 링크는 본문과 3:1에 호버·포커스 밑줄까지 필요하다.
• 자동 검사 뒤에 그라데이션·이미지 위 텍스트·상태별 색은 직접 잰다. APCA는 참고용이고 준수 기준은 WCAG 2 대비비다.
• prefers-color-scheme, prefers-reduced-motion으로 사용자 설정을 따른다.
• 5초 넘는 자동 애니메이션은 멈출 수 있게 하고, 시뮬레이터보다 실제 사용자와 테스트한다.

관련 노트: 웹 접근성, 반응형 디자인과 다국어 타이포그래피, Animated Icon: 영상을 투명 배경 아이콘으로 쓰기, 발표·포트폴리오 디자인 팁, CSS 애니메이션: transition과 @keyframes, 테마와 다크 모드 구현