WCAG AA 를 통과하려면 대비비가 얼마나 필요한가요?
일반 텍스트는 4.5:1, 큰 텍스트(18pt 이상 또는 14pt 굵게)는 3:1 이 필요합니다. WCAG 대비 검사기는 두 기준값과 현재 통과/실패 상태를 즉시 보여 줍니다.
컬렉션
디자인 및 색상 도구
색 대비비가 WCAG 를 충족하는지 확인하고, 색각 이상을 시뮬레이션하고, 화면 비율을 계산하세요 — 모두 브라우저에서 실행되는 무료 디자인 도우미입니다.
이 카테고리의 도구 3개
← 홈이 컬렉션이 필요한 이유
접근성이 좋고 균형 잡힌 비주얼은 올바른 숫자에서 시작됩니다. 이 컬렉션은 디자이너, 개발자, 콘텐츠 제작자가 색 접근성을 확인하고, 시각 조건을 시뮬레이션하고, 올바른 비율을 고정하는 데 사용하는 TeaFun 도구를 모았습니다.
자주 쓰는 경우
- 디자인을 내보내기 전에 본문 텍스트와 배경이 WCAG AA 대비비를 통과하는지 확인하세요.
- 팔레트를 녹색약과 적색약으로 미리 보고, 상태 색상이 의미를 전달하는 유일한 수단이 아닌지 확인하세요.
- 자르거나 내보내기 전에 이미지나 영상 프레임을 깔끔한 16:9 또는 4:3 비율로 고정하세요.
이 컬렉션에 담긴 도구
디자인 뒤의 숫자를 제대로 잡기 위한 세 가지 도구입니다. WCAG 대비 검사기, 색각 이상 시뮬레이터, 그리고 화면 비율 계산기. 대비 검사기는 전경색과 배경색을 받아 WCAG AA 및 AAA 기준값에 대한 대비비를 알려 주므로, 텍스트가 읽힐지를 추측하지 않고 알 수 있습니다. 색각 이상 시뮬레이터는 흔한 유형의 색각 이상이 있는 사람에게 팔레트가 어떻게 보이는지를 근사합니다. 화면 비율 계산기는 크기를 바꾸거나 자를 때 비율을 올바르게 유지합니다. 모두 작고 집중된 도구로, 디자인을 만드는 캔버스가 아니라 마무리 무렵에 하는 점검에 해당합니다.
이 컬렉션 사용법
텍스트가 색이나 이미지 배경 위에 놓일 때는 언제나 대비 검사기를 쓰세요. 두 색을 입력해 일반 텍스트는 최소 4.5:1, 큰 텍스트나 굵은 텍스트는 3:1 을 충족하는지 확인합니다. 색이 의미를 담는 모든 것——차트, 상태 배지 모음, 폼 오류 상태——에는 색각 이상 시뮬레이터를 돌려, 색이 없어도 정보가 살아남는지 확인하세요. 상당수 사용자가 어떤 형태로든 색각 이상이 있기 때문입니다. 왜곡 없이 크기를 바꿔야 할 때는 화면 비율 계산기를 쓰세요. 한쪽 치수와 목표 비율을 입력하면 다른 쪽을 알려 줍니다.
이 점검이 중요한 이유
접근성과 비율은 눈으로만 보면 틀리기 쉽습니다. 보정된 모니터에서는 괜찮아 보이는 색 조합이 햇빛 아래 휴대폰에서는 대비를 통과하지 못할 수 있고, 당신에게는 또렷한 팔레트도 색이 유일한 단서라면 색맹 사용자에게는 무너질 수 있습니다. WCAG 비율이 존재하는 이유는 바로 인간의 대비 판단이 믿을 만하지 않기 때문입니다. 비율도 마찬가지로 중요합니다. 잘못 잘린 이미지나 늘어난 영상은 사람들이 이름은 대지 못해도 알아채는 작은 결함입니다. 이 도구들은 대신 디자인을 해 주지는 않습니다. 좋은 눈도 놓칠 수 있는, 측정 가능한 실수를 잡아내어 작업이 당신의 화면을 벗어나서도 버티게 해 줍니다.
추천 도구
자주 묻는 질문
색각 이상 시뮬레이터는 어떻게 작동하나요?
입력한 색에 표준 색맹 변환 행렬을 적용해, 여러 유형의 색각 이상에서 그 색이 어떻게 보이는지를 근사합니다 — 모두 브라우저 안에서 로컬로 계산됩니다.
색만으로 정보를 전달해도 괜찮을까요?
안 됩니다. 일부 사용자는 특정 색을 구별하지 못하므로, 모든 색 단서에 두 번째 신호를 함께 두세요 — 레이블, 아이콘, 패턴, 또는 텍스트입니다. 시뮬레이터는 색이 사라져도 의미가 살아남는지 확인하는 데 도움을 줍니다.
화면 비율이 이미지와 영상에 왜 중요한가요?
잘못된 비율로 자르거나 크기를 바꾸면 내용이 왜곡되거나 레터박스가 생깁니다. 16:9 나 1:1 같은 표준 비율로 고정하면 표시되는 어느 곳에서나 비율이 유지되고 예측 가능해집니다.