색상 대비 행렬 검사기

왜 색상 조합을 하나씩이 아니라 한 번에 모두 검사해야 할까요?

WCAG 접근성 가이드라인은 텍스트와 배경색 사이에 최소한의 대비율을 요구합니다. 그렇지 않으면 저시력자나 색약이 있는 사용자가 텍스트를 읽기 어려울 수 있습니다. 실제로 대부분의 웹사이트는 여러 브랜드 컬러, 배경색, 상태 색상을 함께 사용합니다——밝은 회색 카드 위에 메인 컬러 제목, 흰색 배경 위에 경고 색상, 색이 있는 배경 위에 어두운 텍스트 등——이런 조합을 하나씩 수동으로 확인하다 보면 실수하거나 빠뜨리기 쉽습니다. 이 도구는 실제로 사용하는 모든 색상을 붙여넣기만 하면 가능한 모든 조합의 대비율을 즉시 계산하여 하나의 행렬로 보여줍니다——더 이상 조합을 하나씩 확인할 필요가 없습니다.

대비율은 어떻게 계산될까요? 구체적인 예시로 알아보기

WCAG 2.1은 대비율을 (L1 + 0.05) / (L2 + 0.05)로 정의하며, L1과 L2는 두 색상의 "상대 휘도"로, 값이 클수록 흰색에 가깝다는 뜻입니다. 예를 들어 순수한 검정 #000000과 순수한 흰색 #FFFFFF는 완벽한 21:1을 기록하지만, 밝은 회색 #999999와 흰색은 겨우 2.85:1로, 일반 텍스트에 필요한 최소 기준인 4.5:1보다 훨씬 낮습니다. 일반 텍스트(18px 미만, 또는 굵은체 14px 미만)는 AA 기준 4.5:1 이상, 더 엄격한 AAA 기준으로는 7:1 이상이 필요합니다. 큰 텍스트(굵은체 18px 이상 또는 24px 이상)는 기준이 다소 완화되어 AA는 3:1 이상이면 됩니다.

결과 행렬은 어떻게 읽나요?

행렬의 각 셀은 해당 행의 색상과 열의 색상 간 대비율을 나타내며, 초록(AAA 통과), 노란(AA만 통과), 빨강(불합격)으로 색상 코드가 지정됩니다. 한눈에 문제가 있는 조합을 파악할 수 있어 일일이 수동으로 계산할 필요가 없습니다.

대비율은 순수하게 각 색상의 RGB 값만으로 계산된 것으로, 실제 렌더링에서의 폰트 굵기, 안티앨리어싱, 반투명 오버레이 등은 고려하지 않습니다. 배포 전에는 항상 실제 기기에서 다시 한번 확인하는 것을 권장합니다.