개념 및 지식 허브
색상 대비율 계산기 및 WCAG 2.1 웹 접근성 검사
색상 대비율 계산기 및 WCAG 2.1 웹 접근성 검사
본 도구는 100% 클라이언트 환경(브라우저)에서 작동합니다. 소스 코드, 토큰, 기밀 데이터가 외부 서버로 절대 전송되지 않습니다.
핵심 아키텍처 및 수학 공식
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
Where L1 is the relative luminance of the lighter color and L2 is the luminance of the darker color. The resulting ratio ranges from 1:1 (no contrast, white on white) to 21:1 (maximum contrast, black on white).
모범 사례 및 필수 지침
- Aim for AA Compliance (4.5:1): The Web Content Accessibility Guidelines (WCAG) Level AA requires a minimum ratio of 4.5:1 for standard body text, and 3:1 for large text (usually 18pt or 14pt bold).
- Don't Rely Solely on Color for Meaning: Colorblind users cannot distinguish certain hues (like red error states versus green success states). Always pair color changes with iconography, underlines, or structural changes.
- Account for Dark Mode Reversals: A high contrast palette in Light Mode often fails catastrophically when mathematically inverted for Dark Mode. You must manually check the contrast ratios for both distinct themes.
자주 묻는 질문 (FAQ)
What is WCAG Level AAA?
Level AAA is the strictest accessibility standard, requiring a contrast ratio of 7:1 for normal text. It is typically only mandated for highly specialized government or medical software.
Does contrast apply to non text UI elements?
Yes. WCAG 2.1 introduced a 3:1 minimum contrast ratio requirement for 'UI Components and Graphical Objects', meaning your input borders and button backgrounds must also contrast against the page.
Why do my pure gray colors fail contrast?
Pure mid grays (like #808080) sitting on a pure white background usually hover around a 3.9:1 ratio, which strictly fails the 4.5:1 requirement for body text. You must darken them.