어떤 기준이 적용되는지 먼저 구분하세요
WCAG 2.2 AA는 일반 글자에 최소 4.5:1, 큰 글자에 3:1을 요구합니다. AAA는 각각 7:1과 4.5:1입니다. 큰 글자는 일반 굵기 18포인트(대략 CSS 24픽셀) 이상, 굵은 글자 14포인트(대략 CSS 18.66픽셀) 이상입니다. 시각적으로 중요해 보인다는 이유로 16픽셀 제목을 큰 글자라고 부르면 안 됩니다.
사용자가 알아봐야 하는 조작부와 그래픽의 의미 있는 부분은 인접한 색에 대해 일반적으로 3:1이 필요합니다. 입력칸을 찾는 데 필요한 테두리, 포커스 링, 선택 탭 표시, 차트 선이 예입니다. 장식과 비활성 조작부에는 예외가 있지만 예외는 의도적으로 선택해야지 지름길이 되어서는 안 됩니다.
- 4.5:1 — 일반 글자 AA
- 3:1 — 큰 글자 AA
- 7:1 — 일반 글자 AAA
- 4.5:1 — 큰 글자 AAA
- 3:1 — 의미 있는 UI와 그래픽 경계
대비율이 무엇을 측정하는지 이해하세요
공식은 선형화한 sRGB 채널에서 상대 휘도를 구합니다. 밝은 휘도에 0.05를 더하고 어두운 휘도에 0.05를 더한 값으로 나눕니다. 같은 색은 1:1, 이상적인 흰색과 검정은 21:1입니다. 색상 차이나 주관적 아름다움이 아니라 휘도를 비교합니다.
기준은 엄격합니다. 4.49:1은 4.5:1을 충족하지 않으며 올림해 통과시켜서는 안 됩니다. 표시를 위해 반올림하는 방식에 따라 도구의 마지막 소수점이 조금 달라질 수 있지만 경계에 걸린 토큰은 원래 취약합니다. 중요한 글자에는 블렌딩, 안티앨리어싱, 미래 테마 변경을 위한 여유를 두세요.
흰색 위 #777777은 약 4.478:1이므로 흔한 예시에서 4.5로 반올림되더라도 일반 글자 AA에는 미달합니다.
상태 전체 행렬을 검사하세요
기본 구성요소는 통과해도 hover나 선택 상태는 미달할 수 있습니다. 기본, hover, 눌림, 포커스, 선택, 오류, 성공, 비활성 상태마다 글자·배경·테두리·아이콘·포커스 색의 작은 행렬을 만드세요. 라이트와 다크 테마가 모두 있다면 둘 다 확인합니다.
모든 보조 상태를 투명도로 만들지 마세요. 투명색은 아래 표면과 섞여 결과색과 대비율이 바뀝니다. 최종 합성색을 계산하거나 중요한 글자에는 명시적인 불투명 토큰을 쓰세요. 비활성 조작부는 예외일 수 있지만 주변 안내와 오류 설명이 조용해 보인다고 비활성 정보가 되는 것은 아닙니다.
이미지와 그라데이션은 여러 배경으로 다루세요
사진이나 그라데이션을 한 개의 표본색으로 대표할 수 없습니다. 반응형 크기마다 실제 글자 뒤의 가장 밝은 지점과 어두운 지점을 검사합니다. 데스크톱에서는 제목 옆에 있던 밝은 구름이 모바일 크롭에서는 글자 바로 아래로 이동할 수 있습니다.
안전한 방식은 글자를 확실한 단색 영역에 두기, 충분히 강한 스크림을 더하기, 단색 글자 컨테이너 쓰기, 화면 폭마다 구성을 바꾸기입니다. 글자 그림자만으로는 안정적으로 측정할 표면이 잘 생기지 않습니다. 콘텐츠 이미지가 동적으로 바뀐다면 한 샘플을 수동 승인하지 말고 안전층을 설계하세요.
대비와 색에만 의존하는 문제를 혼동하지 마세요
대비가 뛰어난 붉은 오류 테두리도 빨강이 유일한 오류 표시라면 사용자를 놓칠 수 있습니다. 아이콘과 설명 글자를 더하고 프로그램적으로 입력 오류와 연결하세요. 차트 선 두 개가 각각 흰 배경과 잘 대비돼도 서로는 구분되지 않을 수 있습니다.
라벨, 모양, 선 종류, 패턴, 위치로 의미를 보존합니다. 대비는 “이 글자나 경계를 이웃과 구분할 수 있는가?”를 답하고 색 사용은 “색상을 식별해야만 이해할 수 있는가?”를 답합니다. 두 질문을 같은 디자인 검수에서 다뤄야 합니다.
토큰과 검수 과정에 대비를 내장하세요
고립된 색 칩뿐 아니라 허용된 글자색-배경색 조합을 저장하세요. text-on-primary 같은 의미 토큰은 검증된 값을 가리키고 자동 구성요소 검사에 들어가야 합니다. 임의 글자색을 임의 표면 위에 놓지 못하도록 선택 범위를 줄입니다.
자동 수학은 빠르고 일관되지만 확대, 키보드 포커스, 강제 색상·고대비 설정, 서로 다른 화면, 사람의 검토로 마무리하세요. 대비율은 글꼴이 너무 가는지, 포커스 순서가 헷갈리는지, 상태 라벨에 의미가 없는지 알려주지 못합니다.
대비 검수 체크리스트
- 실제 글자 크기에 맞는 기준을 사용했습니다.
- 경계값을 올림해 통과시키지 않았습니다.
- 모든 상호작용·의미 상태를 검사했습니다.
- 포커스 표시가 양쪽 인접 영역과 구분됩니다.
- 투명색은 합성 후 결과로 측정했습니다.
- 이미지·그라데이션 위 글자를 모든 크롭에서 검사했습니다.
- 오류와 차트 계열이 색상에만 의존하지 않습니다.
- 자동 결과 뒤에 실제 구성요소를 검토했습니다.
자주 묻는 질문
글자에는 언제나 4.5:1이 필요한가요?
일반 글자의 WCAG AA 기준입니다. 큰 글자는 3:1을 쓸 수 있고 로고, 부수적인 글자, 비활성 조작부에는 특정 예외가 있습니다. 추측하지 말고 해당 성공 기준을 확인하세요.
4.48:1을 4.5:1로 반올림해도 되나요?
안 됩니다. W3C 지침은 계산값을 올림해 기준을 충족한 것으로 보면 안 된다고 설명합니다. 반올림 전 값이 통과하도록 한 색을 조정하세요.
비활성 버튼도 3:1이어야 하나요?
비활성 UI 구성요소는 최소 대비 기준의 예외가 있습니다. 그래도 상태는 이해할 수 있어야 하며 필수 안내나 정보에 이 예외를 적용하면 안 됩니다.