색 대비 검사

대비비 · 접근성 기준 판정 · 통과 색 제안

색 대비 검사

글자색과 배경색의 대비비를 재고 접근성 기준 통과 여부를 알려줍니다

글자색
배경색
큰 글씨는 이렇게 보입니다
본문 글씨는 이렇게 보입니다. 읽어 보고 눈이 편한지 확인하세요.
대비비
4.54 : 1
본문 (4.5:1)
통과
큰 글씨 (3:1)
통과
AA 본문통과 — 최소 기준
AA 큰 글씨통과 — 18pt 이상 또는 굵은 14pt
AAA 본문실패 — 더 엄격한 기준
아이콘·테두리통과 — 글자가 아닌 요소 기준
본문에 쓸 수 있습니다.

글자색과 배경색의 대비비를 계산하고 웹 접근성 기준(WCAG) 통과 여부를 알려 줍니다. 실패하면 통과하는 가장 가까운 색을 제안합니다.

이렇게도 부른다 — contrast · a11y · 명도

쓰는 법

  1. 글자색과 배경색 입력
  2. 미리보기에서 눈으로 확인
  3. 기준 통과 여부 확인
  4. 실패하면 제안 색 적용

자주 묻는 질문

대비비 4.5:1 은 무슨 뜻인가요?
글자와 배경의 밝기 차이를 나타내는 값입니다. 웹 접근성 기준에서 본문 글씨의 최소선이 4.5:1, 큰 글씨는 3:1 입니다.
눈으로 보면 잘 보이는데 실패라고 나와요.
화면 밝기와 주변 조명에 따라 체감이 크게 달라집니다. 밝은 야외나 저가 디스플레이에서는 안 보이는 경우가 많아 수치 기준을 두는 것입니다.
큰 글씨 기준은 몇 부터인가요?
18pt 이상, 또는 굵게 쓴 14pt 이상입니다. 화면에서는 대략 24px, 굵은 18.66px 정도입니다.

다른 도구

기기 안에서만 넣은 내용은 브라우저 안에서만 처리되며 어디에도 저장·전송되지 않습니다.

도구 전체 목록 · KarmoLab · 만든 사람 · AI 와 함께 만들었습니다. 소스 보기