접근성 있는 색상 대비: 디자이너를 위한 WCAG 가이드라인 설명

접근성 있는 색상 대비: WCAG 가이드라인 설명

색상 대비는 웹 접근성의 가장 중요한 측면 중 하나입니다. 사용자가 콘텐츠를 읽고, 인터페이스를 탐색하며, 작업을 완료할 수 있는지에 직접적인 영향을 미칩니다. 그러나 대비 실패는 웹에서 가장 흔한 접근성 문제 중 하나로 남아 있습니다 — 디자이너가 비율을 확인하지 않고 자신의 화면에서 보기 좋은 색상을 선택하기 때문입니다.

이 가이드는 WCAG 색상 대비 요구 사항, 이를 충족하는 방법, 시각적 품질을 희생하지 않고 접근성 있는 인터페이스를 디자인하는 방법에 대해 알아야 할 모든 것을 설명합니다.

색상 대비 비율이란?

색상 대비는 두 색상 간의 인지된 휘도 차이의 측정값입니다 — 일반적으로 전경(텍스트)과 배경 사이입니다. 대비는 1:1(동일한 색상, 보이지 않는 텍스트)에서 21:1(흰색 배경의 검은색 텍스트, 가능한 최대값)까지의 비율로 표현됩니다.

대비 비율은 인간의 눈이 다양한 빛의 파장을 인식하는 방식을 고려한 상대 휘도를 사용하여 계산됩니다. 공식은 다음과 같습니다:

대비 비율 = (L1 + 0.05) / (L2 + 0.05)

여기서 L1은 더 밝은 색상의 상대 휘도이고, L2는 더 어두운 색상의 상대 휘도입니다. 인간의 눈은 빨간색이나 파란색보다 초록색 빛에 더 민감하므로, 휘도 계산은 채널에 따라 다른 가중치를 둡니다.

이것을 수동으로 계산할 필요는 없습니다. 저희 색상 변환기를 포함한 모든 대비 검사 도구가 즉시 계산합니다.

WCAG 대비 요구 사항

웹 콘텐츠 접근성 가이드라인(WCAG)은 A, AA, AAA의 세 가지 준수 수준을 정의합니다. 색상 대비 요구 사항은 AA 및 AAA 수준에 적용됩니다.

WCAG AA 수준 (권장 최소값)

AA는 대부분의 웹사이트에 대한 최소 표준이며, 많은 관할권(유럽 접근성 법 및 미국, 캐나다, 호주의 접근성 규정 포함)에서 법적으로 요구됩니다.

| 텍스트 카테고리 | 최소 비율 | 흰색 배경에서 준수하는 회색 예시 | |----------------|-----------|----------------------------------| | 일반 텍스트 (18px 미만 / 14px 굵게) | 4.5:1 | 흰색 위 #767676 | | 큰 텍스트 (18px+ 굵게 또는 24px+ 일반) | 3:1 | 흰색 위 #9A9A9A | | UI 구성 요소 (테두리, 아이콘, 폼 필드) | 3:1 | 구성 요소 테두리, 포커스 표시기 | | 비장식적 그래픽 | 3:1 | 차트, 인포그래픽, 아이콘 |

WCAG AAA 수준 (강화)

AAA는 특히 저시력 또는 대비 민감성 문제가 있는 사용자에게 더 나은 가독성을 제공하는 더 높은 표준입니다.

| 텍스트 카테고리 | 최소 비율 | 흰색 배경에서 준수하는 회색 예시 | |----------------|-----------|----------------------------------| | 일반 텍스트 | 7:1 | 흰색 위 #595959 | | 큰 텍스트 | 4.5:1 | 흰색 위 #777777 |

AAA는 대부분의 규정 준수에 필수는 아니지만, 노인이나 시각 장애가 있는 사용자를 대상으로 하는 사이트에 권장됩니다.

이 요구 사항이 다루는 것

WCAG 대비 요구 사항은 다음에 적용됩니다:

• 텍스트 — 모든 본문 텍스트, 제목, 레이블, 캡션 및 링크 텍스트
• 이미지 내 텍스트 — 이미지의 일부인 텍스트 (장식적 텍스트 제외)
• UI 구성 요소 — 버튼, 폼 필드, 슬라이더, 토글 스위치 및 그 테두리
• 아이콘 — 정보를 전달하는 필수 아이콘 (비장식적)
• 포커스 표시기 — 키보드 포커스 윤곽선은 인접 배경에 대해 3:1 대비를 가져야 함

이 요구 사항이 다루지 않는 것

• 로고 — 브랜드 로고 또는 회사 이름의 일부인 텍스트
• 장식 요소 — 기능적 목적이 없는 순수 장식 이미지
• 비활성 UI — 비활성화된 버튼 또는 폼 컨트롤 (단, 여전히 인지 가능해야 함)
• 감각적 텍스트 — 텍스트가 필수적이지 않은 배경 이미지의 일부인 텍스트

일반적인 대비 실패와 해결 방법

1. 밝은 회색 텍스트

흰색 배경의 밝은 회색 텍스트는 단연코 가장 흔한 대비 실패입니다. 흰색 위 #CCCCCC와 같은 음영은 1.6:1의 대비 비율만 가집니다 — 최소 4.5:1에 크게 못 미칩니다.

해결책: 회색 텍스트를 어둡게 하세요. 흰색 위 본문 텍스트의 경우 최소 #595959(AAA 준수)를 목표로 하세요. #767676(14px 텍스트의 AA 최소값)조차도 대부분의 "미묘한" 회색 선택보다 눈에 띄게 어둡습니다.

2. 본문 텍스트에 사용된 브랜드 색상

브랜드 색상은 텍스트로 적용될 때 종종 너무 밝습니다. 흰색 위 #3366CC와 같은 중간 파랑은 약 3.5:1의 비율을 가집니다 — 4.5:1 표준 미만입니다.

해결책: 브랜드 색상은 제목과 악센트용으로 예약하세요. 본문 텍스트에는 거의 검정(#1A1A1A에서 #333333)을 사용하세요. 모든 색상 텍스트가 비율을 충족하는지 확인하세요.

3. 색상만 사용한 링크 표시기

본문 텍스트와 색상만 다른 링크는 WCAG 성공 기준 1.4.1(색상 사용)에 실패합니다. 색맹 사용자는 그 차이를 인식하지 못할 수 있습니다.

해결책: 항상 링크에 비색상 표시기를 제공하세요. 일반적인 접근 방식:

• 링크에 밑줄 긋기 (가장 강력한 솔루션)
• 아이콘 추가 (화살표 또는 외부 링크 기호)
• 인라인 링크에 굵은 두께 사용
• 배경 하이라이트 제공

4. 배경 이미지 위의 텍스트

사진이나 그라데이션 위에 배치된 텍스트는 전체 이미지에서 충분한 대비를 거의 가지지 않습니다.

해결책:

• 이미지와 텍스트 사이에 반투명 오버레이 추가
• 미묘한 윤곽선 효과를 위해 text-shadow 사용
• 단색 상자 오버레이에 텍스트 배치
• 텍스트 뒤에 나타날 수 있는 이미지의 모든 부분이 최소 비율을 충족하는지 확인

5. 낮은 대비의 플레이스홀더 텍스트

흰색 위 #BDBDBD(1.9:1)와 같은 폼 플레이스홀더는 흔하지만 대비 요구 사항에 실패합니다.

해결책: 플레이스홀더를 최소 #757575(4.6:1)로 어둡게 하세요. 더 나은 방법은 플레이스홀더 대신 레이블을 사용하는 것입니다 — 레이블은 항상 표시되며 사용자가 입력을 시작할 때 절대 사라지지 않습니다.

색상 대비 테스트

자동화 도구

• 브라우저 DevTools — Chrome 및 Firefox DevTools에는 대비 검사 기능이 내장되어 있습니다. 요소를 검사하고 "Styles" 또는 "Accessibility" 패널에서 대비 비율을 확인하세요.
• 온라인 대비 검사기 — 두 색상을 입력하고 AA 및 AAA에 대한 즉각적인 통과/실패 상태를 확인하세요.
• 디자인 도구 플러그인 — Stark, A11y, Contrast는 Figma, Sketch, Adobe XD에서 사용할 수 있습니다. 이들은 디자인 파일에서 직접 대비를 확인합니다.
• Lighthouse — Google의 Lighthouse 감사는 대비 실패를 자동으로 보고합니다.

수동 테스트

자동화 도구는 텍스트 대비만 확인할 수 있습니다. 완전한 접근성 검토를 위해:

1. 모니터를 끄세요 — 모든 인터페이스 요소를 구별할 수 있나요?
2. 그레이스케일 필터를 사용하세요 — 색상 없이도 정보가 올바르게 전달되나요?
3. 색맹 시뮬레이터로 테스트하세요 — Colorblindly(Chrome 확장 프로그램)와 같은 도구는 다양한 유형의 색각 결함을 가진 사용자에게 사이트가 어떻게 보이는지 보여줍니다.
4. 직사광선에서 테스트하세요 — 높은 주변 조명은 인식되는 대비를 감소시킵니다.

색맹을 위한 디자인

약 12명 중 1명의 남성(8%)과 200명 중 1명의 여성(0.5%)이 어떤 형태의 색각 결함을 가지고 있습니다. 가장 일반적인 유형은:

• 제2색맹 (녹색맹, 남성의 6%) — 빨강과 초록을 구별하기 어려움
• 제1색맹 (적색맹, 남성의 2%) — 빨강이 더 어둡게 보이고, 초록과 혼동됨
• 제3색맹 (청색맹, 드묾) — 파랑과 노랑을 구별하기 어려움

디자인 전략

1. 색상에만 의존하지 마세요 — 색상을 통해 전달되는 모든 정보(오류 상태, 상태 표시기, 차트 카테고리)는 텍스트, 아이콘, 패턴 또는 위치를 통해서도 전달되어야 합니다.

2. 문제가 있는 조합을 피하세요 — 빨강/초록, 파랑/보라, 초록/갈색, 초록/파랑은 가장 흔히 혼동되는 쌍입니다.

3. 패턴과 질감을 사용하세요 — 차트와 그래프에서 색상 외에도 점선, 해칭 채우기 및 다양한 모양을 사용하세요.

4. 직접 레이블을 추가하세요 — 데이터 시각화에서 색상으로 구분된 범례에 의존하는 대신 데이터 포인트에 직접 레이블을 지정하세요.

5. 시뮬레이터로 테스트하세요 — 모든 디자인은 배포 전에 제2색맹 및 제1색맹 시뮬레이터를 통해 테스트해야 합니다.

접근성 있는 색상 시스템 구축하기

1단계: 접근성 있는 기본 색상 선택하기

자연스럽게 좋은 대비를 제공하는 색상으로 시작하세요. 진한 파랑, 어두운 초록, 풍부한 빨강은 적절히 조합하면 모두 접근성 있는 기본 색상이 될 수 있습니다.

2단계: 준수하는 스케일 생성하기

각 단계가 더 밝은 이웃과 더 어두운 이웃 모두와 충분한 대비를 유지하는 명도 스케일을 만드세요. OKLCH는 명도 채널이 지각적으로 균일하므로 이에 이상적입니다:

--text-primary: oklch(10% 0.01 0);    /* 거의 검정, 흰색 위 ~19:1 */
--text-secondary: oklch(35% 0.02 0);  /* 어두운 회색, 흰색 위 ~9:1 */
--text-muted: oklch(45% 0.02 0);      /* 중간 회색, 흰색 위 ~5.5:1 */
--text-disabled: oklch(60% 0.02 0);   /* 밝은 회색, 흰색 위 ~3:1 */

3단계: 모든 조합 확인하기

디자인 시스템의 모든 전경-배경 쌍을 확인해야 합니다:

• 표면 위 기본 텍스트 — 최소 4.5:1 (7:1 권장)
• 표면 위 보조 텍스트 — 최소 4.5:1
• 표면 위 약한 텍스트 — 최소 3:1 (비필수 텍스트만 해당)
• 대화형 요소 — 상태에 대해 최소 3:1
• 포커스 표시기 — 최소 3:1

개발자를 위한 실용 체크리스트

• [ ] 모든 본문 텍스트가 4.5:1 대비 비율을 충족하거나 초과함
• [ ] 모든 큰 텍스트가 3:1 대비 비율을 충족하거나 초과함
• [ ] 링크에 비색상 표시기가 있음 (밑줄, 아이콘 또는 두께 변경)
• [ ] 폼 입력에 보이는 테두리 또는 배경이 있음 (플레이스홀더 텍스트만이 아님)
• [ ] 포커스 표시기가 인접 배경에 대해 3:1 대비를 가짐
• [ ] 오류 상태가 색상과 텍스트 또는 아이콘을 결합함
• [ ] 차트와 그래프가 색상 외에 패턴 또는 직접 레이블을 사용함
• [ ] 플레이스홀더 텍스트가 최소 4.5:1을 충족함
• [ ] 비활성 요소가 시각적으로 구별 가능하지만 여전히 인지 가능함
• [ ] 디자인이 색맹 시뮬레이터로 테스트되었음

결론

접근성 있는 색상 대비는 선택 사항이 아닙니다 — 포용적인 웹 디자인의 기본 요구 사항입니다. WCAG AA 표준을 충족하면 시각 장애가 있는 사용자가 콘텐츠에 접근할 수 있고, 모든 사람의 가독성이 향상되며, 종종 더 깔끔하고 의도적인 디자인이 만들어집니다. 워크플로에 대비 확인을 포함하고, 색상을 다른 시각적 표시기의 대체제가 아닌 보완재로 사용하며, 항상 접근성의 관점에서 디자인을 테스트하세요.

WCAG AA 및 AAA 표준에 대한 색상 조합을 확인하려면 대비 검사 기능이 내장된 무료 온라인 색상 변환기를 사용하세요.