색 대비

흰 바탕 위 연회색 #999999의 대비율은 2.85:1로, WCAG 2.2가 본문 글자에 요구하는 4.5:1에 한참 못 미칩니다.

대비가 중요한 이유

배경과 비슷하게 흐린 글자는 저시력인 사람, 나이 든 독자 상당수, 햇빛 아래에서 휴대전화를 보는 사람 누구에게나 읽기 어렵습니다. WCAG 2.2는 「흐리다」는 판단을 각자의 취향에 맡기지 않습니다. WCAG는 먼저 두 색의 상대 휘도를 잽니다. 상대 휘도는 검정을 0, 흰색을 1로 하는 수입니다. 그런 다음 두 색의 휘도를 대비율 (L1 + 0.05) / (L2 + 0.05)에 넣어 비교합니다. 여기서 L1은 둘 가운데 밝은 쪽 색입니다. 계산한 결과는 같은 색끼리의 1:1부터 흰 바탕 위 검정의 21:1까지입니다. 이 공식을 한 단계씩 풀어 보는 과정은 색 이론 과정에 있고, 이 단원에서는 공식을 가져다 씁니다.

꼭 맞춰야 할 숫자

성공 기준 1.4.3 「최소 대비」(AA 수준)는 보통 글자에 4.5:1 이상, 큰 글자에 3:1 이상을 요구합니다. WCAG에서 말하는 큰 글자는 18포인트 이상인 글자, 또는 굵게 쓴 14포인트 이상인 글자입니다. 성공 기준 1.4.6(AAA 수준)은 이 값을 각각 7:1과 4.5:1로 올립니다. 1.4.11 「텍스트 아닌 대비」는 입력 칸 테두리나 그래프 선처럼 사람이 알아봐야 하는 컨트롤과 그래픽의 부분에 3:1 이상의 대비를 요구합니다. 로고, 순수하게 장식으로만 쓴 글자, 비활성 컨트롤에 들어 있는 글자는 이 기준에서 예외입니다.

외워 두면 쓸모 있는 값이 몇 가지 있습니다. 회색 #767676은 흰 바탕에서 4.54:1로, AA를 통과하는 가장 밝은 무채색 회색으로 자주 인용됩니다. #777777은 4.48:1로 미달입니다. 이보다 더 어두운 #595959는 7.00:1로 AAA까지 통과합니다. 채도가 높은 색은 보기보다 대비가 낮아서 눈을 속이기 쉽습니다. 흰 바탕 위의 순수한 빨강 #ff0000은 4.00:1밖에 안 됩니다. 반면 더 짙은 빨강 #c01c28은 6.11:1입니다. 입력 칸 안의 예시 글자(placeholder)는 일부러 아주 흐리게 만드는 경우가 많아 기준에 자주 미달합니다.

실제로 색을 점검하는 법

실제로 공식을 손으로 풀 일은 거의 없습니다. 개발자 도구에서 글자 요소를 검사하면 주요 브라우저 개발자 도구의 색 선택기가 배경과의 대비율을 보여 주고, AA와 AAA 기준이 어디인지 선을 함께 그어 보여 주는 경우가 많습니다. 다만 두 가지 경우에는 더 조심해야 합니다. 사진이나 그라데이션 위의 글자는 배경이 하나가 아니므로, 글자가 놓인 자리 가운데 가장 밝은 부분과 비교해 보거나 글자 뒤에 단색 판을 하나 깔아야 합니다. 또 어두운 테마가 있는 사이트는 색을 두 번 점검해야 합니다. 흰 바탕에서 통과한 색이 검정에 가까운 바탕에서는 미달할 수 있습니다. 파랑 #1a5fb4는 흰 바탕에서 6.29:1이지만 순수한 검정 위에서는 3.34:1밖에 안 됩니다.

색 하나에만 기대지 않기

글자와 배경의 대비는 이야기의 절반에 지나지 않습니다. 성공 기준 1.4.1 「색 사용」(A 수준)은 색을 정보를 보여 주는 유일한 수단으로 쓰지 말라고 합니다. 빨강 #c01c28과 파랑 #1a5fb4는 흰 바탕 위에서는 둘 다 잘 읽힙니다. 하지만 두 색을 서로 비교한 대비율은 1.03:1밖에 안 됩니다. 흑백으로 보면, 또는 빨강과 파랑을 잘 구별하지 못하는 사람이 보면, 두 색은 같은 회색이 되어 버립니다. 그래서 빨간색 레이블 하나로만 표시한 필수 입력 칸이나 주변 글과 색으로만 구별되는 링크에는 글자, 아이콘, 밑줄 같은 두 번째 단서가 함께 있어야 합니다.