색상 접근성 검사기
전경색과 배경색(16진수 코드)을 입력하여 대비율과 WCAG 준수 여부를 확인하세요.
이것은 크고 굵은 텍스트입니다.
이것은 일반 크기의 텍스트입니다.
21.00:1
대비율
일반 텍스트 (AA)
큰 텍스트 (AA)
18pt+ or 14pt+ bold
UI 구성요소 (AA)
Buttons, form controls, etc.
Level AA (minimum required for accessibility compliance):
• Normal Text: Contrast ratio of at least 4.5:1
• Large Text: Contrast ratio of at least 3:1
• UI Components: Contrast ratio of at least 3:1
Level AAA (enhanced accessibility):
• Normal Text: Contrast ratio of at least 7:1
• Large Text: Contrast ratio of at least 4.5:1
Notes:
• "Large Text" is defined as 18pt or 14pt bold and above
• Logos and decorative elements have no minimum contrast requirement
• Text over images or gradients should be evaluated throughout the image
색상 접근성 검사기 사용 방법
- 1
두 가지 색상 입력
전경(텍스트) 색상과 배경 색상을 hex 코드로 입력하세요. 예: #1a1a1a 와 #ffffff.
- 2
대비 확인
Check Accessibility를 클릭해 두 색상 간의 대비 비율을 계산하세요.
- 3
WCAG 결과 검토
일반 텍스트, 큰 텍스트, UI 구성 요소 수준에서 AA와 AAA에 대한 통과 또는 실패 배지를 확인하고 실시간 미리보기를 살펴보세요.
- 4
필요에 따라 조정
색상을 서로 바꾸거나 hex 값을 미세 조정해 프로젝트에 필요한 WCAG 수준을 충족할 때까지 맞추세요.
WCAG 색상 대비, 쉽게 풀어보기
대비율이 뜻하는 것
색상 대비는 두 색 가운데 더 밝은 색과 더 어두운 색 사이의 비율로 표현되며, 1:1부터 21:1까지 이어집니다. 1:1은 두 색이 동일하다는 뜻이어서 텍스트가 배경에 대해 완전히 보이지 않게 되고, 21:1은 순수한 검정과 순수한 흰색 사이의 대비로 최댓값입니다. 다른 모든 조합은 그 사이 어딘가에 놓입니다. 이 비율은 어떤 색을 썼는지나 색조가 얼마나 다른지가 아니라 오직 밝기 차이에 관한 것이며, 그래서 당신에게는 뚜렷이 달라 보이는 두 색도 여전히 실패할 수 있습니다.
이 하나의 숫자가 접근성 있는 색상의 근간인데, 가장 다양한 사람과 환경에서 텍스트가 읽힐 수 있을지를 예측해 주기 때문입니다. 이 검사기는 입력한 어떤 전경색과 배경색 조합에 대해서도 그 값을 계산하고, 결과를 공표된 기준값과 비교합니다.
반드시 충족해야 하는 AA 기준값
WCAG의 AA 수준은 대부분의 웹사이트가 목표로 삼고 많은 접근성 법규와 조달 규정이 참조하는 기준이므로, 이를 기본선으로 삼으세요. AA는 일반 본문 텍스트에 최소 4.5:1, 큰 텍스트에 최소 3:1의 대비율을 요구합니다. 이 두 숫자가 일상적인 디자인 결정의 대부분을 다루며, 이 도구의 배지는 주어진 조합이 각 기준을 통과하는지 곧바로 알려 줍니다.
어떤 조합이 일반 텍스트와 큰 텍스트 모두에서 AA를 통과한다면, 탄탄하고 정당화할 수 있는 기반을 갖춘 것입니다. 일반 텍스트는 실패하지만 큰 텍스트는 통과한다면 그래도 사용할 수 있지만 큰 크기에서만 가능한데, 이는 나중에 발견하기보다 의도적으로 결정해 둘 가치가 있는 제약입니다.
AAA와 큰 텍스트의 의미
AAA 수준은 최대 가독성을 위한 강화 등급으로, 요건을 일반 텍스트 7:1, 큰 텍스트 4.5:1로 높입니다. AAA는 사이트 전체에 기대되는 수준이 아니며 브랜드 색상 팔레트에는 비현실적인 경우가 많지만, 긴 글 읽기, 중요한 콘텐츠, 그리고 저시력 사용자를 위해서는 노려볼 만한 목표입니다. 이 검사기는 AA와 함께 AAA도 보고하므로, 어떤 조합이 얼마만큼의 여유를 갖는지 확인할 수 있습니다.
큰 텍스트에는 사람들이 의외라고 느끼는 정확한 정의가 있습니다. 대략 18pt 이상, 굵게라면 14pt 이상을 뜻하며, 이는 약 24px 보통 굵기 또는 18.66px 굵게에 해당합니다. 기준값이 더 낮은 이유는 단지 더 크고 두꺼운 글자꼴이 더 낮은 대비에서도 읽히기 때문입니다. 그 경계보다 작은 것은 무엇이든 더 엄격한 일반 텍스트 비율을 충족해야 하므로, 커 보이는 제목이라도 실제 크기와 굵기를 확인하지 않고 자격이 된다고 단정하지 마세요.
실제 사용자에게 대비가 중요한 이유
충분한 대비는 형식적으로 체크 표시나 하는 일이 아니라, 실제 사람들이 인터페이스를 쓸 수 있을지를 결정합니다. 나이가 들수록 더 흔해지는 저시력 사용자는 대비에 직접 의존하며, 밝은 햇빛 아래에서나 어둡거나 값싼 디스플레이에서, 혹은 피곤한 상태에서 화면을 읽는 누구나 마찬가지입니다. 대비는 색각 이상과도 상호작용합니다. 비율이 색조가 아니라 밝기에 기반하므로, 빨강 대 초록의 차이에 의존하는 조합은 그 색조를 구별하지 못하는 사람에게는 무너질 수 있지만, 밝기 차이가 강하면 여전히 읽힙니다.
마지막 요점은 분명히 짚어 둘 따름이 하나 있습니다. 절대로 의미를 색상만으로 전달하지 마세요. 정보가 낮은 대비와 색맹 모두에서 살아남도록 색상을 텍스트, 아이콘, 밑줄, 또는 모양과 함께 사용하세요.
대비율이 계산되는 방식
배지 뒤에 있는 계산은 각 색이 사람 눈에 얼마나 밝게 보이는지를 나타내는 척도인 상대 휘도에서 시작합니다. 이는 빨강, 초록, 파랑 채널의 단순 평균이 아닌데, 눈이 파랑보다 초록에 훨씬 민감하기 때문에 초록에 가장 큰 가중치를, 파랑에 가장 작은 가중치를 둡니다. 또한 각 채널은 결과가 원시 신호가 아니라 지각을 따라가도록 먼저 약간의 감마 보정을 거칩니다.
두 색 모두 휘도 값을 갖게 되면, 대비율은 더 밝은 휘도에 작은 상수를 더한 값을 더 어두운 휘도에 같은 상수를 더한 값으로 나눈 것입니다. 이 상수는 검정에 가까울 때 식이 안정적으로 작동하도록 해 줍니다. 이를 직접 손으로 계산할 필요는 없지만, 결과를 좌우하는 것이 색조가 아니라 휘도임을 알면 단지 달라 보이는 색을 고르는 것만으로는 충분하지 않은 이유를 설명할 수 있습니다.
텍스트가 아닌 요소와 UI 대비
대비 규칙은 텍스트에만 국한되지 않습니다. WCAG는 상호작용 구성 요소의 시각적 경계와 의미 있는 그래픽에 대해서도 최소 3:1을 정하는데, 이 검사기가 UI 구성 요소 항목으로 표시하는 것이 바로 그것입니다. 여기에는 텍스트 입력란의 테두리, 버튼의 윤곽선, 체크박스 안의 체크 표시, 포커스 표시, 그리고 사용자가 이해하기 위해 인지해야 하는 아이콘이나 차트의 부분이 포함됩니다. 흰색 카드 위의 흐릿한 회색 입력란 테두리는, 그 안의 라벨 텍스트가 쉽게 통과하더라도, 이 규칙의 전형적인 실패 사례입니다.
주변 환경에 대해 3:1을 통과하도록 컨트롤을 디자인한다는 것은, 사람들이 옆의 글자만 읽는 것이 아니라 컨트롤을 실제로 찾고 조작할 수 있게 된다는 뜻입니다. 텍스트만이 아니라 구성 요소의 가장자리와 상태를 테스트하세요.
흔한 실패와 그 해결 방법
몇 가지 패턴이 거듭거듭 실패합니다. 흰색 위의 연한 회색 자리표시자나 보조 텍스트가 가장 흔하며, #999999에 가까운 중간 회색 같은 값은 흰색 위에서 4.5:1 아래로 떨어지므로 더 어둡게 해야 합니다. 브랜드 색상도 단골 위반자인데, 특히 본문 텍스트나 색이 있는 버튼 위의 흰색 텍스트에 쓰이는 중간 톤의 파랑, 초록, 주황은 조합이 AA에 살짝 못 미치는 경우가 잦습니다. 밝은 배경 위의 가늘고 밝은 테두리도 3:1 UI 기준을 흔히 놓칩니다.
해결책은 대개 작습니다. 비율이 기준선을 넘을 때까지 전경색을 더 어둡게 하거나 배경색을 더 밝게 하세요. HSL 관점에서는 브랜드가 여전히 알아보이도록 색조는 그대로 두고 밝기만 적당히 조정하는 것을 뜻하는 경우가 많습니다. 복잡한 이미지나 그라데이션 위의 텍스트라면, 최악의 영역까지 통과하도록 뒤에 불투명하거나 반투명한 막을 깔아 주세요. 여기에 실제 색상을 입력하고, 비율과 AA, AAA 배지가 갱신되는 것을 지켜보면서, 프로젝트에 필요한 모든 수준이 초록색으로 바뀔 때까지 값을 조금씩 조정하세요.
자주 묻는 질문
대비 비율이란 무엇이고 어느 정도가 좋은가요?
AA와 AAA의 차이는 무엇인가요?
왜 일반 텍스트는 실패하는데 큰 텍스트는 통과하나요?
어떤 색상 형식을 입력해야 하나요?
이 검사기는 무료이고 내 색상을 어딘가로 전송하나요?
관련 도구
이런 편리한 도구도 함께 사용해 보세요