색상 대비 검사기

색상 대비 검사기 소개

이 무료 색상 대비 검사기는 글자색과 배경색 사이의 대비율을 측정하고, 일반 텍스트와 큰 텍스트에 대해 WCAG AA 및 AAA 기준을 통과하는지 알려 드립니다.

브라우저 안에서 실행되며 아무것도 업로드되지 않습니다.

대비율의 의미

대비율은 두 색의 상대 휘도, 즉 각각이 얼마나 많은 빛을 내거나 반사하는지를 1:1부터 21:1까지의 척도로 비교한 값입니다.

1:1 — 동일한 색으로, 글자가 보이지 않습니다
21:1 — 순수한 검정과 순수한 흰색으로, 가능한 최댓값입니다
4.5:1 — WCAG AA에서 일반 본문 텍스트에 요구하는 최솟값입니다

중요한 점은 이 계산이 색이 얼마나 달라 보이는지가 아니라 휘도를 사용한다는 것입니다. 두 색이 아주 달라 보여도 기준에 미달할 수 있습니다. 초록 위의 빨강이 대표적인 예입니다. 시각적으로는 강렬하지만 휘도가 거의 같아서 많은 사람에게는 읽기 어려울 정도입니다.

눈으로 대비를 판단할 수 없는 이유도 여기에 있습니다. 디자이너는 좋은 모니터에서, 조명이 통제된 환경에서, 젊은 눈으로 작업합니다. 작업실에서는 우아해 보이는 밝은 회색이 햇빛 아래의 휴대폰에서는 사라져 버립니다.

기준값

WCAG는 두 가지 수준을 정하고 있으며, 요구 사항은 글자 크기에 따라 달라집니다.

AA 수준 — 일반적인 목표이며, 대부분의 접근성 관련 법률이 참조하는 수준입니다.

일반 텍스트에는 4.5:1
큰 텍스트에는 3:1
사용자 인터페이스 구성 요소와 의미를 담은 그래픽에는 3:1

AAA 수준 — 더 엄격한 기준으로, 저시력 독자를 대상으로 하는 콘텐츠에 적합합니다.

일반 텍스트에는 7:1
큰 텍스트에는 4.5:1

큰 텍스트란 18pt(24px) 이상, 또는 14pt(18.66px) 굵은 글씨 이상을 뜻합니다. 글자가 크면 획도 두꺼워지므로 낮은 대비에서도 견딥니다.

대부분의 사이트에서는 AA가 현실적인 목표입니다. AAA는 디자인 전체에 걸쳐 달성하기 어렵고 일반 콘텐츠에 요구되지도 않습니다.

이 문제가 생각보다 훨씬 많은 사람에게 영향을 주는 이유

대비를 "예외적인 경우"로 치부하기는 쉽습니다. 하지만 숫자는 다른 이야기를 합니다.

남성 약 12명 중 1명, 여성 약 200명 중 1명이 어떤 형태로든 색각 이상을 가지고 있습니다. 전 세계로는 약 3억 명에 이릅니다. 적록 색각 이상이 압도적으로 흔합니다.

40세가 넘은 거의 모든 사람이 대비 감도의 저하를 겪습니다. 또한 나이가 들면서 수정체가 누렇게 변해 파란색의 지각이 달라집니다.

누구에게나, 때때로 일어납니다. 대비가 부족하면 시력이 완벽한 사람도 야외에서 읽을 때, 화면을 어둡게 했을 때, 값싼 모니터를 쓸 때, 버스에서 얼룩진 휴대폰 화면 너머로 볼 때 어려움을 겪습니다. 여기서의 접근성 개선은 곧 모든 사용자를 위한 가독성 개선입니다.

법적인 측면도 있습니다. WCAG 2.1 AA는 실무적으로 미국 장애인법(Americans with Disabilities Act), 미국 연방 조달의 Section 508, 유럽 접근성법(European Accessibility Act), 그리고 영국, 캐나다, 호주의 동등한 규정에서 참조됩니다. 대비는 접근성 관련 민원에서 가장 자주 지적되는 결함 중 하나인데, 측정하기가 워낙 쉽다는 점이 큰 이유입니다.

디자인이 대개 실패하는 지점

입력 양식의 밝은 회색 자리 표시 텍스트 — 매우 흔하고 거의 언제나 기준 미달입니다
사진 위의 흰 글씨 — 대비율이 이미지의 위치마다 달라집니다. 오버레이나 어두운 막을 덧씌우십시오
브랜드 색상을 글자색으로 사용하는 경우 — 흰 배경 위의 중간 톤 기업 파랑이나 주황은 흔히 3:1 근처에 머뭅니다
비활성 상태 — 요구 사항에서 면제되지만 그래도 읽을 수 있게 유지할 가치가 있습니다
색으로만 구분한 링크 — 링크가 주변 글자와 밝기가 같다면 밑줄을 넣으십시오
노랑 위의 흰 글씨, 또는 회색 위의 회색 — 언제나 등장하는 문제들입니다
다크 모드 — 순수한 검정 위의 순수한 흰색은 기술적으로 21:1이지만 헐레이션을 일으킵니다. 약간 누그러뜨린 색이 더 잘 읽힙니다
흰 배경 위의 빨간 오류 메시지 — 가장 중요한 바로 그 메시지가 흔히 4.5:1에 미치지 못합니다

기준에 미달하는 조합 고치기

어떤 조합이 기준에 미달하면 색상(hue)이 아니라 명도를 바꾸십시오. 대개 브랜드 색상을 알아볼 수 있게 유지하면서도 기준을 통과할 만큼 어둡게 하거나 밝게 할 수 있습니다.

실용적인 접근법:

큰 요소에는 브랜드 색상을 그대로 쓰십시오. 제목, 버튼, 아이콘 등에서는 기준값이 3:1입니다. 본문 텍스트에는 더 어두운 변형을 사용하십시오.

한쪽만 조정하십시오. 배경을 바꾸는 것보다 글자를 어둡게 하는 편이 보통 덜 부담스럽습니다.

이미지 위에는 어두운 막을 덧씌우십시오. 사진과 글자 사이에 반투명한 어두운 층을 두는 방법입니다. 사진에 무엇이 담겨 있든 대비율을 보장해 줍니다.

의미를 전달할 때 색에만 의존하지 마십시오. 아이콘, 레이블, 밑줄을 더하면 색을 전혀 구분하지 못하는 사람에게도 정보가 남습니다.

사용 방법

글자색과 배경색을 선택합니다
대비율과 AA / AAA 통과 여부 배지를 확인합니다
실시간 미리보기를 직접 읽어 판단한 뒤 색을 조정합니다

알아 두면 좋은 점

실제로 사용할 색을 불투명도까지 포함해 테스트하십시오. 불투명도 70%의 글자는 배경에 대해 사실상 다른 색입니다.
두 가지 테마를 모두 확인하십시오. 라이트 모드에서 통과하는 팔레트가 다크 모드에서는 미달할 수 있습니다.
로고는 대비 요구 사항에서 면제됩니다. 부수적이고 장식적인 텍스트도 마찬가지입니다.
가는 글꼴은 실제로는 대비율이 시사하는 것보다 더 높은 대비를 필요로 합니다. 표준은 획 굵기를 측정하지 않지만 독자는 그것을 느낍니다.
가능하다면 낮에 야외에서 휴대폰으로 확인하십시오. 어떤 모니터보다도 정직한 테스트입니다.
통과는 바닥이지 목표가 아닙니다. 4.5:1은 허용 가능한 최솟값이지 지향점이 아닙니다.

자주 묻는 질문

좋은 대비율은 어느 정도인가요?

일반 본문 텍스트라면 WCAG AA를 충족하기 위해 최소 4.5:1이 필요합니다. 이는 대부분의 접근성 법률이 참조하는 수준입니다. 큰 텍스트, 즉 18pt/24px 또는 14pt/18.66px 굵은 글씨 이상은 3:1이 필요합니다. 더 엄격한 AAA 수준은 일반 텍스트에 7:1을 요구합니다. 이 값들은 목표가 아니라 최솟값으로 여기십시오. 편안하게 읽히는 수준은 대개 그보다 훨씬 위에 있습니다.

WCAG AA와 AAA의 차이는 무엇인가요?

AA는 대부분의 규정과 조직이 채택하는 실무 표준으로, 일반 텍스트에 4.5:1, 큰 텍스트에 3:1을 요구합니다. AAA는 더 엄격해서 각각 7:1과 4.5:1이며, 저시력 독자를 특별히 대상으로 하는 콘텐츠를 위한 것입니다. AAA는 디자인 전체에 걸쳐 달성하기 어렵고 일반 목적의 사이트에는 요구되지 않습니다.

제 눈에는 괜찮아 보이는데 왜 색 조합이 기준에 미달하나요?

대비가 두 색이 얼마나 달라 보이는지가 아니라 휘도로 계산되기 때문입니다. 빨강과 초록은 확연히 달라 보이지만 휘도가 비슷해서 그 조합이 기준을 통과하지 못합니다. 개인의 판단도 믿을 수 없습니다. 디자이너는 대개 좋은 화면에서, 조명이 통제된 환경에서, 좋은 시력으로 작업하는데, 대부분의 독자는 그런 조건에 있지 않습니다.

이미지와 아이콘에도 대비가 중요한가요?

네. WCAG는 사용자 인터페이스 구성 요소와, 상태를 알리는 아이콘이나 입력 양식의 테두리처럼 의미를 담은 그래픽에 3:1을 요구합니다. 순수하게 장식적인 이미지와 로고는 면제됩니다. 흔한 문제는 사진 위에 놓인 글자인데, 대비율이 사진의 위치마다 달라지기 때문입니다. 반투명 오버레이를 덧씌우면 해결됩니다.

브랜드 색상을 잃지 않으면서 기준 미달인 색 조합을 고치려면 어떻게 해야 하나요?

색상이 아니라 명도를 조정하십시오. 같은 색의 더 어둡거나 밝은 버전이면 대개 브랜드다움을 알아볼 수 있게 유지하면서도 기준값을 넘길 수 있습니다. 3:1만 요구되는 제목, 버튼, 아이콘에는 원래 색을 그대로 쓰고, 4.5:1이 적용되는 본문 텍스트에는 더 어두운 변형을 사용하는 방법도 있습니다.

순수한 검정 위의 순수한 흰색이 최선인가요?

21:1로 최댓값이지만 반드시 가장 편안한 조합은 아닙니다. 아주 높은 대비는 헐레이션, 즉 글자 주위가 번져 빛나 보이는 현상을 일으킬 수 있으며, 특히 다크 모드에서, 그리고 난독증이나 난시가 있는 일부 독자에게 두드러집니다. 오프화이트 위의 아주 짙은 회색, 또는 짙은 회색 위의 누그러뜨린 흰색이 여유 있게 기준을 통과하면서도 더 편안하게 읽히는 경우가 많습니다.

제가 고른 색이 어딘가로 전송되나요?

아니요. 색을 고르는 즉시 브라우저 안에서 대비율이 계산되므로 아무것도 전송되거나 저장되지 않으며, 이 도구는 오프라인에서도 작동합니다.