팔레트 안의 모든 색 쌍을 한 번에
디자인 시스템 색을 점검할 때 필요한 것은 두 색 한 쌍이 아니라 쓰고 있는 색 전부의 조합을 보는 일입니다. 색을 3개에서 8개까지 넣으면 가능한 모든 쌍의 명암비를 표로 내고, 쌍마다 3 : 1 · 4.5 : 1 · 7 : 1 기준을 넘는지 함께 표시합니다. 두 색만 단건으로 판정하거나 부족한 만큼 조정하는 일은 각각 다른 도구가 맡습니다.
계산 방식과 기준
W3C WCAG가 정의한 상대휘도를 씁니다. 채널 값을 255로 나눈 뒤 0.04045를 경계로 선형화하고, 0.2126 · 0.7152 · 0.0722 가중치를 더해 휘도를 구한 다음 밝은 쪽과 어두운 쪽에 각각 0.05를 더해 나눕니다. 임계값은 AA 일반 텍스트 4.5 : 1, AA 큰 텍스트 3 : 1, AAA 일반 텍스트 7 : 1, AAA 큰 텍스트 4.5 : 1, 비텍스트 UI 요소 3 : 1 입니다. 큰 텍스트는 18pt 이상 또는 14pt 이상 굵은 글자를 말합니다. 기준값 이상이면 통과이므로 4.50 : 1 은 AA 통과입니다. 2026년 10월 기준 명세입니다.
한계
판정은 반올림하지 않은 값으로 하고, 표에는 소수 2자리 내림으로 보여 주므로 숫자와 통과 표시가 어긋나지 않습니다. 명암비는 글자 크기와 굵기, 투명도가 섞인 실제 화면을 대신하지 않으며 색각 이상 안전성도 판정하지 않습니다.
자주 묻는 질문
통과입니다. 기준이 4.5 : 1 이상이므로 경계값도 포함합니다. WCAG 규칙대로 반올림하지 않은 값으로 판정하고, 표에는 소수 2자리 내림으로 적어 4.4994가 4.49로 보이며 불통과로 나옵니다.
3 : 1 은 AA 큰 텍스트와 버튼·입력칸 같은 비텍스트 UI 요소 기준이고, 4.5 : 1 은 AA 일반 텍스트와 AAA 큰 텍스트 기준입니다. 두 등급이 같은 값을 쓰기 때문에 열을 합쳐 두었습니다.
상대휘도가 0인 검정과 1인 흰색에 각각 0.05를 더해 나누면 1.05를 0.05로 나눈 21이 됩니다. 명암비가 가질 수 있는 최대값이고, 같은 색끼리는 최소값인 1 : 1 이 됩니다.