컬러 접근성 검사기

글자색과 배경색의 명도 대비를 WCAG 기준(AA·AAA·UI 3:1)으로 검사하고, 기준에 못 미치면 색감은 그대로 두고 밝기만 바꾼 가장 가까운 통과 색을 추천합니다. 팔레트 대비표와 색각 이상 시뮬레이션도 함께 볼 수 있어요.

1. 색 대비 검사

글자색 (전경)

배경색

#rgb, #rrggbb, rgb(119, 119, 119) 형식을 쓸 수 있어요.

명도 대비
– : 1

12px · 일반작은 글씨: 개인정보 처리방침 및 이용약관에 동의합니다. Terms & privacy.

14px · 일반본문 글씨: 다람쥐 헌 쳇바퀴에 타고파. The quick brown fox jumps over the lazy dog.

16px · 일반본문 글씨: 반복 업무는 공장에 맡기고, 오늘은 칼퇴하세요.

18.67px(14pt) · 굵게 = 큰 글자굵은 큰 글자: 지금 신청하기 · Apply now

24px(18pt) · 일반 = 큰 글자큰 제목: Leave work on time

입력창 테두리← UI 구성요소·아이콘은 3:1 이상

색상(Hue)과 채도는 그대로 두고 밝기(HSL 명도)만 조정했습니다. 눌러서 바로 적용하세요. 비율은 반올림 전 값으로 판정합니다.

브랜드·디자인 시스템 색을 한 줄에 하나씩(또는 쉼표로) 붙여넣으세요. 이름을 앞에 붙여도 됩니다. 예) Primary #ea580c

사용자 지정 배경

팔레트와 현재 글자·배경 조합이 색각 이상이 있는 사람에게 어떻게 보이는지 근사합니다(Machado·Oliveira·Fernandes 2009, 심한 정도 100%). 색만으로 정보를 구분하지 않도록 아이콘·글자·무늬를 함께 쓰세요.

WCAG 2.1 SC 1.4.3 대비(최소), AA — 일반 글자 4.5:1, 큰 글자 3:1 이상. w3.org/TR/WCAG21/#contrast-minimum
WCAG 2.1 SC 1.4.6 대비(향상), AAA — 일반 글자 7:1, 큰 글자 4.5:1 이상. w3.org/TR/WCAG21/#contrast-enhanced
WCAG 2.1 SC 1.4.11 비텍스트 대비, AA — 버튼·입력창 테두리, 초점 표시, 아이콘·그래프 요소 3:1 이상. w3.org/TR/WCAG21/#non-text-contrast
큰 글자 — 18pt(약 24px) 이상, 또는 14pt(약 18.67px) 이상 굵은 글자. 한글은 획이 복잡해 같은 크기라도 더 높은 대비를 권장합니다.
계산식 — 대비 = (L1 + 0.05) / (L2 + 0.05), L은 sRGB 상대 휘도(0.2126 R + 0.7152 G + 0.0722 B, 선형화 기준값 0.04045). 결과는 1:1 ~ 21:1이며 반올림하지 않고 판정합니다.
국내 기준 — 한국형 웹 콘텐츠 접근성 지침(KWCAG 2.2)도 텍스트 명도 대비 4.5:1 이상을 요구합니다. 공공기관 인증 심사 시 최신 지침 원문을 확인하세요.
색각 이상 시뮬레이션 — Machado, Oliveira & Fernandes (2009), “A Physiologically-based Model for Simulation of Color Vision Deficiency”, IEEE TVCG 15(6). 선형 RGB에 행렬을 적용한 근사치입니다.

이 도구의 결과는 참고용입니다. 실제 접근성 인증·심사는 전문가 검토와 실제 사용자 테스트로 확인하세요.