만든 홈페이지를 두고 글씨가 잘 안 보인다는 말을 들었다면, 글자 크기부터 키울 일이 아닙니다. 대부분은 글자색과 배경색 사이의 명도 대비가 모자란 경우이고, 이건 색 두 개만 넣으면 무료 도구가 숫자로 알려줍니다. 본문 글자는 4.5 대 1, 큰 글자와 버튼·아이콘은 3 대 1 이 기준입니다.
글자를 키우는 방식은 화면만 답답해지고 정작 읽기 어려운 문제는 그대로 남는 경우가 많습니다. 반대로 대비는 색 값 하나만 바꿔도 곧바로 올라가고, 고쳤는지 아닌지를 같은 도구로 다시 재서 확인할 수 있습니다.
핵심 요약
- 본문 글자와 배경의 대비는 4.5 대 1 이상이어야 합니다(W3C WCAG 2.2 AA 기준).
- 18pt 이상이거나 굵은 14pt 이상인 큰 글자, 그리고 버튼·아이콘 같은 요소는 3 대 1 이상이면 됩니다.
- 색 조합 하나만 볼 때는 대비 검사기, 페이지 전체를 훑을 때는 WAVE 나 크롬에 들어 있는 도구를 씁니다. 여기 적은 6곳은 모두 무료입니다.
- 자동 검사는 사진 위에 얹힌 글자와 마우스를 올렸을 때만 바뀌는 색을 놓치므로 눈으로 한 번 더 봐야 합니다.
색 대비는 몇 대 몇이어야 하나요?
본문 글자는 4.5 대 1, 큰 글자는 3 대 1 입니다. W3C 가 정한 WCAG 2.2 의 명도 대비(최소) 항목이 그렇게 규정하고 있고, 여기서 큰 글자는 18pt 이상 또는 굵은 14pt 이상을 말합니다. 버튼 테두리나 아이콘처럼 글자가 아닌 요소도 3 대 1 이 필요하고, 로고와 브랜드 표기, 순수 장식용 요소는 기준에서 빠집니다.
| 대상 | 필요한 대비 | 판단 기준 |
|---|---|---|
| 본문 글자 | 4.5 대 1 이상 | 18pt 미만, 굵은 14pt 미만 |
| 큰 글자 | 3 대 1 이상 | 18pt 이상 또는 굵은 14pt 이상 |
| 버튼·입력칸 테두리·아이콘 | 3 대 1 이상 | 그래픽 및 사용자 인터페이스 요소 |
| 로고·장식용 요소 | 기준 없음 | 브랜드 표기와 순수 장식은 제외 |
확인 기준 : 2026년 9월, W3C WCAG 2.2 명도 대비(최소) 항목
한 가지 주의할 점은 이 수치가 반올림 대상이 아니라는 것입니다. 계산 결과가 4.49 대 1 이면 통과가 아니라 미달입니다. 도구가 소수점까지 보여주는 이유가 여기에 있습니다.
1. WebAIM 대비 검사기
글자색과 배경색을 16진수로 넣거나 색 선택기로 고르면 대비 비율이 바로 나오고, 일반 글자·큰 글자·그래픽 요소로 나누어 통과 여부를 표시합니다. 가입이나 결제 없이 웹에서 바로 씁니다.
어떤 경우에 맞나 : 아직 만들기 전이거나 색을 새로 고르는 단계. 색 조합을 정해 두면 이후 검사에서 걸릴 일이 크게 줄어듭니다.
주의점 : 한 번에 색 조합 하나만 봅니다. 이미 만들어진 페이지 전체를 훑는 용도는 아닙니다.
2. WAVE
주소를 넣어 온라인으로 보거나, 크롬·파이어폭스·엣지 확장으로 설치해 페이지 위에 오류 아이콘을 겹쳐 보여주는 도구입니다. 대비 항목은 4.5 대 1 미만인 글자를 잡아내고, 큰 글자는 3 대 1 미만일 때 잡습니다. 여기서 큰 글자의 기준은 24px 이상, 굵은 글자라면 18.67px 이상입니다. 대비 패널에서 색을 바꿔가며 통과하는 조합을 페이지에 미리 입혀 볼 수도 있습니다.
어떤 경우에 맞나 : 이미 공개된 페이지를 통째로 한 번 훑고 싶을 때.
주의점 : 로그인해야 보이는 화면은 온라인 검사로 볼 수 없습니다. 이럴 때는 브라우저 확장 쪽을 써야 합니다.
3. 크롬 개발자도구의 CSS Overview
따로 설치할 것이 없습니다. 개발자도구를 열고 점 세 개 메뉴에서 More tools 안의 CSS Overview 를 고르면, Colors 항목 아래 대비가 모자란 요소가 목록으로 나옵니다. 목록에서 항목을 누르면 화면의 해당 위치로 이동해 어디가 문제인지 바로 보입니다.
어떤 경우에 맞나 : 확장 프로그램 설치가 막혀 있는 업무용 컴퓨터, 또는 공개 전이라 아직 주소가 없는 화면.
주의점 : 지금 열려 있는 화면만 봅니다. 하위 페이지는 하나씩 열어 가며 반복해야 합니다.
4. 라이트하우스(Lighthouse)
역시 크롬에 들어 있는 검사 기능으로, 접근성 항목을 0에서 100 사이 점수로 매기고 문제 목록을 함께 보여줍니다. 대비뿐 아니라 이미지 대체 텍스트 누락, 제목 단계가 건너뛴 곳 같은 항목도 한 번에 확인됩니다.
어떤 경우에 맞나 : 대비 말고 다른 것까지 한 번에 점검하고 싶을 때.
주의점 : 점수는 자동으로 판별 가능한 항목만 반영합니다. 100점이 나와도 지침을 다 지켰다는 뜻은 아닙니다.
5. OpenWAX
국내에서 만들어진 무료 검사 도구로, 크롬 확장이나 북마클릿 형태로 쓰며 한국형 웹 콘텐츠 접근성 지침 기준에 맞춰 항목을 점검하고 보고서를 냅니다.
어떤 경우에 맞나 : 검사 결과를 국내 지침 용어로 봐야 할 때. 공공기관 납품이나 사내 보고용 문서를 만들 때 항목 이름이 그대로 맞아떨어집니다.
주의점 : 자동 점검이 닿는 범위는 지침 항목 중 일부입니다. 통과했다는 결과가 인증과 같은 의미는 아닙니다.
6. 색각 시뮬레이터(Coblis)
화면을 캡처해 올리면 색각 이상이 있는 경우 그 그림이 어떻게 보이는지 여러 유형으로 바꿔 보여줍니다. 대비 수치 대신 색 구분 자체를 확인하는 도구입니다.
어떤 경우에 맞나 : 빨강과 초록으로만 상태를 나눠 둔 화면. 품절 표시, 필수 입력 표시, 예약 가능 여부 달력이 대표적입니다.
주의점 : 숫자가 나오지 않으므로 대비 검사기와 같이 써야 합니다. 색만 고치지 말고 글자나 아이콘을 함께 넣어 두는 편이 확실합니다.
검사 전에 정할 3가지
페이지를 무작정 열어 보면 오류 목록만 길어지고 무엇부터 고칠지 흐려집니다. 시작하기 전에 세 가지만 정해 두면 검사가 짧아집니다.
- 어느 페이지부터 볼지 : 방문이 많은 순서로 세 개만 고릅니다. 보통 첫 화면, 소개, 문의 순입니다.
- 어떤 상태를 볼지 : 기본 상태, 마우스를 올린 상태, 누를 수 없게 흐려 둔 버튼까지 세 가지를 봅니다.
- 어느 화면 폭에서 볼지 : 휴대폰 폭으로 좁혔을 때 배경 사진 위로 글자가 겹치는 구간을 반드시 포함합니다.
대비가 모자랄 때 고치는 순서 4단계
수치가 모자라다고 나오면 배경부터 손대는 경우가 많은데, 순서를 바꾸면 화면 인상을 덜 건드리면서 기준을 넘길 수 있습니다.
- 글자색을 먼저 어둡게 합니다. 배경은 그대로 두고 회색조만 한두 단계 내려도 수치가 눈에 띄게 올라갑니다.
- 그래도 모자라면 배경을 밝게 합니다. 옅은 회색 배경을 흰색에 가깝게 올리는 식입니다.
- 사진 위에 얹은 글자는 색으로 해결되지 않습니다. 반투명한 어두운 막을 한 겹 깔거나 글자 뒤에 상자를 두는 쪽이 확실합니다.
- 고친 뒤 같은 도구로 다시 잽니다. 실제로 화면에 적용된 색은 의도한 색과 다를 때가 있습니다.
국내 기준도 4.5 대 1 인가요?
같습니다. 한국형 웹 콘텐츠 접근성 지침 2.2 도 텍스트와 배경 사이의 명도 대비를 4.5 대 1 이상으로 요구합니다. 다만 화면 확대가 가능하도록 만든 텍스트는 3 대 1 까지 낮출 수 있다는 예외를 두고 있습니다. 이 지침은 전체 33개 검사항목으로 구성되어 있고 명도 대비는 그중 하나이므로, 대비만 맞췄다고 지침 전체를 지킨 것은 아닙니다.
따라서 국내 기준과 국제 기준 중 무엇을 볼지 고민할 필요는 거의 없습니다. 앞의 도구들로 4.5 대 1 을 맞춰 두면 양쪽 수치를 동시에 충족합니다.
자동 검사에서 오류가 0이면 끝인가요?
아닙니다. 자동 검사는 코드에 적힌 색 값을 계산하는 방식이라 화면에 실제로 보이는 결과와 어긋나는 지점이 있습니다. 다음 세 가지는 결과가 깨끗해도 눈으로 확인해야 합니다.
- 이미지 안에 그려 넣은 글자 : 배너나 상품 사진에 박아 넣은 문구는 코드상 글자가 아니라서 검사 대상에 들어가지 않습니다.
- 마우스를 올렸을 때만 바뀌는 색 : 기본 상태만 통과하고 올린 상태에서 흐려지는 버튼이 흔합니다.
- 반투명 배경 위의 글자 : 뒤에 무엇이 깔리느냐에 따라 합쳐진 색이 달라져 같은 자리에서도 결과가 바뀝니다.
빌더로 만든 사이트는 색을 어디서 고치나요?
템플릿을 골라 쓰는 방식이라면 색은 대부분 편집 화면에서 직접 바꿉니다. 아이비전트 빌더 호스팅은 만든 뒤에도 템플릿을 다른 것으로 갈아 끼울 수 있고, IBIGENT AI 는 화면 전체를 다시 만들지 않고 고를 문구나 이미지만 짚어 부분 수정하는 방식이라 대비가 모자란 영역만 손볼 수 있습니다. 요금은 무료체험 14일을 제공하고 베이직이 월 3,300원이며, 무료 SSL 은 별도 결제 없이 기본으로 들어갑니다.
직접 HTML 을 만들어 올리는 경우에도 순서는 같습니다. 색을 정하는 단계에서 대비 검사기로 조합을 미리 확정해 두면, 공개한 뒤 페이지를 통째로 다시 손보는 일을 피할 수 있습니다.
고칠 곳은 대개 두세 군데입니다
검사 결과가 수십 줄로 나와도 실제로 손댈 곳은 본문 글자색, 버튼 글자색, 사진 위 문구 정도로 좁혀지는 경우가 많습니다. 같은 색 값이 화면 곳곳에 반복해서 쓰이기 때문입니다. 한 곳을 고치면 여러 오류가 한꺼번에 사라지므로, 목록 길이에 놀라기 전에 어떤 색이 몇 번 걸렸는지부터 세어 보는 편이 빠릅니다.
위 도구들은 모두 설치와 가입 없이 오늘 바로 열어 볼 수 있습니다. 홈페이지를 아직 만들기 전이라면 색 조합을 먼저 확정하고 시작하는 쪽이 낫고, 이미 만들어 둔 사이트가 있다면 첫 화면 하나만 검사해 보는 것으로 충분합니다. 코딩 없이 홈페이지를 만들어 볼 생각이라면 아이비전트 빌더 호스팅의 무료체험으로 화면을 세워 두고 같은 순서로 점검해 보면 됩니다.
확인 기준 : 2026년 9월
