UNIT · 1.4

색상 대비와 시각적 디자인

Color Contrast and Visual Design

한국어 해설 KO

Original Text EN

WCAG AA/AAA 색상 대비 기준과 비텍스트 콘텐츠의 대비 요구사항을 학습합니다.

Learn WCAG AA/AAA color contrast ratios and requirements for non-text content.

학습 목표

WCAG Level AA와 AAA의 텍스트 대비 비율을 구분할 수 있다

큰 텍스트의 정의와 대비 기준 차이를 설명할 수 있다

비텍스트 대비(UI 컴포넌트, 그래픽) 요구사항을 이해한다

색상 대비 검사 도구를 나열할 수 있다

Learning Objectives

Distinguish WCAG Level AA and AAA text contrast ratios

Explain the definition of large text and its contrast requirements

Understand non-text contrast requirements for UI components and graphics

List color contrast checking tools

텍스트 대비 기준

Text Contrast Requirements

WCAG 1.4.3(Level AA): 일반 텍스트는 최소 4.5:1, 큰 텍스트는 최소 3:1의 명도 대비가 필요합니다. 큰 텍스트의 정의는 18pt(약 24px) 이상, 또는 14pt(약 18.66px) 이상의 굵은 글씨입니다. WCAG 1.4.6(Level AAA)은 일반 7:1, 큰 텍스트 4.5:1을 요구합니다.

WCAG 1.4.3 (Level AA): normal text needs at least 4.5:1 luminance contrast; large text at least 3:1. Large text is defined as 18pt (~24px) or larger, or 14pt (~18.66px) or larger when bold. WCAG 1.4.6 (Level AAA) requires 7:1 and 4.5:1 respectively.

대비 비율은 색상(hue)이 아닌 상대 휘도(relative luminance)로 계산되며 1:1(동일)부터 21:1(흑백)까지입니다. 로고와 비활성 상태의 텍스트, 순수 장식 텍스트는 예외입니다. 배경이 이미지나 그라데이션이면 텍스트가 겹치는 가장 불리한 지점을 기준으로 판단합니다.

Contrast ratio is computed from relative luminance, not hue, and ranges from 1:1 (identical) to 21:1 (black on white). Logos, text in disabled states, and purely decorative text are exempt. Over images or gradients, judge against the worst-case point where the text overlaps.

비텍스트 대비

Non-text Contrast

WCAG 1.4.11 비텍스트 대비(Level AA, 2.1 신규): UI 컴포넌트(버튼·입력 필드의 경계, 체크박스, 포커스 표시)와 의미 전달에 필요한 그래픽 요소(차트 선, 아이콘)는 인접 색과 최소 3:1 대비가 필요합니다. 비활성 요소와 순수 장식은 면제됩니다.

WCAG 1.4.11 Non-text Contrast (Level AA, new in 2.1): UI components (button and input boundaries, checkboxes, focus indicators) and graphics required to understand content (chart lines, icons) need at least 3:1 contrast against adjacent colors. Disabled elements and pure decoration are exempt.

자주 걸리는 사례: 옅은 회색 테두리의 입력 필드(어디까지가 입력 영역인지 저시력 사용자가 알 수 없음), 배경과 구분되지 않는 토글 스위치, 컬러 코드에만 의존하는 라인 차트. 상태 변화(선택됨·포커스됨)를 나타내는 시각 표시 자체도 3:1을 충족해야 합니다.

Common failures: input fields with pale gray borders (low-vision users can't tell where the field is), toggle switches indistinguishable from the background, and line charts relying on color coding alone. Visual indicators of state (selected, focused) must themselves meet 3:1.

검사 도구와 실무 팁

Tools and Practical Tips

대비 검사 도구: WebAIM Contrast Checker(온라인), Colour Contrast Analyser(CCA, 데스크톱 — 스포이드로 화면 어디든 측정), Chrome DevTools 색상 피커(AA/AAA 표시), axe·WAVE 같은 자동화 도구, Figma의 Stark 플러그인. 대비는 자동 검사가 가장 잘 잡는 항목이지만, 이미지 위 텍스트·그라데이션은 수동 확인이 필요합니다.

Contrast tools: WebAIM Contrast Checker (online), Colour Contrast Analyser (CCA, desktop — eyedropper measures anywhere on screen), Chrome DevTools color picker (AA/AAA indicators), automated tools like axe and WAVE, and the Stark plugin in Figma. Contrast is what automation catches best, but text over images and gradients still needs manual checks.

실무 팁: 흰 배경의 회색 텍스트 #999는 2.85:1로 AA 미달 — 최소 #767676(4.54:1)을 쓰세요. 플레이스홀더 텍스트도 대비 기준 적용 대상입니다. 색상만으로 정보를 전달하지 마세요(WCAG 1.4.1) — 오류를 빨간 테두리로만 표시하지 말고 아이콘·텍스트를 병행합니다. 다크 모드는 별도 팔레트로 다시 검증해야 합니다.

Practical tips: gray #999 on white is 2.85:1 — an AA failure; use at least #767676 (4.54:1). Placeholder text is subject to contrast requirements too. Never convey information by color alone (WCAG 1.4.1) — pair error states with icons and text, not just a red border. Dark mode is a separate palette that must be re-verified.