명도대비 검사

Contrast Checker

전경·배경 색 조합을 WCAG 2와 APCA 기준으로 채점하고 통과하는 가장 가까운 색을 제안합니다.

글자색과 배경색 한 쌍을 WCAG 2.2와 APCA 양쪽으로 검사하고, 세 가지 색각 이상을 모사하고, 팔레트 전체를 표로 채점합니다. 두 기준을 함께 보여 주는 이유는 실제 조합에서 서로 다른 답을 내기 때문이고, 그 불일치가 쓸모 있는 부분입니다.

🔒 브라우저 안에서만 처리contrastaccessibilitywcaga11y

글자 색

배경색

글자 크기 16px굵기

다람쥐 헌 쳇바퀴에 타고파. The quick brown fox jumps over the lazy dog.

WCAG 2.2

4.54:1

통과AA — 1.4.3 명도 대비(최소), 보통 글자필요 4.5:1
탈락AAA — 1.4.6 명도 대비(강화), 보통 글자필요 7:1
통과1.4.11 텍스트 아닌 요소 — 아이콘·테두리·포커스 링필요 3:1

보통 글자로 셉니다. 큰 글자는 24px부터, 굵기 700이면 18.66px부터입니다. 지금 접근성 법령이 참조하는 기준입니다. EN 301 549와 Section 508 모두 WCAG를 가리키므로, 감리에서 쓰는 숫자도 이것입니다.

APCA

Lc 71.6

밝은 배경에 어두운 글자. 부호가 극성입니다. WCAG와 달리 두 색을 바꾸면 답이 달라집니다.

도달 수준: Lc 60 — 읽히는 정도. 크게 쓰면 읽히지만 16px로 오래 읽을 수준은 아닙니다.

이 Lc에서 16px 굵기 400은 부족합니다.

APCA 수준별 최소 글자 크기
수준	굵기 400	굵기 700
Lc 90	14px	12px
Lc 75	18px	14px
Lc 60	24px	18px
Lc 45	36px	24px
Lc 30	48px	36px

두 기준은 원래 서로 다른 답을 냅니다

WCAG 2의 비율은 2008년의 공식입니다. 상대 휘도의 비에 고정된 플레어 항을 더한 것이고, 두 인자에 대해 대칭입니다. APCA는 지각 반응을 모형화합니다. 극성에 따라 값이 달라지는데, 같은 휘도 차이에서도 밝은 배경의 어두운 글자가 실제로 더 잘 읽히기 때문입니다. 그리고 글자 크기와 굵기를 나중에 덧붙인 별도 규칙이 아니라 질문의 일부로 다룹니다.

그래서 실제 조합에서 둘의 판정이 갈리고, 그 불일치는 어느 쪽의 버그도 아닙니다. WCAG 2는 정말 읽기 힘든 흰 배경의 중간 회색을 통과시키기도 하고, 문제없는 어두운 배경의 어두운 글자를 떨어뜨리기도 합니다. 지금 접근성 법령이 참조하는 것은 WCAG 2.2입니다. 그래서 감리에서 돌리는 것도 그쪽입니다. 읽는 사람이 실제로 겪는 것을 더 잘 설명하는 쪽은 APCA입니다. 통과 여부는 WCAG로, 통과한 것들 중 무엇을 고를지는 APCA로 정하세요.

이 조합이 그런 경우입니다. WCAG AA는 통과라고 하고, APCA는 16px/400에서 부족이라고 합니다.

색각

Viénot–Brettel–Mollon 투영을 선형 광량에서 적용해 모사했습니다. 흔히 쓰는 지름길처럼 감마 인코딩된 바이트에 그대로 적용하면 두 색의 구별 가능성을 실제보다 높게 보게 되는데, 접근성 검사가 틀려서는 안 되는 방향입니다.

예시 문장

적색맹 (L추체 없음, 남성의 약 1%) · 4.54:1

예시 문장

녹색맹 (M추체 없음, 남성의 약 1%) · 4.54:1

예시 문장

청색맹 (S추체 없음, 약 0.01%) · 4.54:1

예시 문장

전색맹 (색 없음, 약 0.003%) · 4.54:1

사용 방법

두 색을 넣습니다
글자색과 배경색을 아무 표기법으로나 넣습니다. 판정 위의 예시 문단이 정한 크기와 굵기로 그 색으로 그려집니다.
실제 크기와 굵기를 맞춥니다
WCAG는 24px, 굵기 700이면 18.66px에서 기준이 바뀝니다. APCA는 크기와 굵기를 별도 규칙이 아니라 질문의 일부로 받습니다. 크기가 실제와 다르면 어느 쪽 답도 의미가 적습니다.
두 판정을 함께 읽습니다
감리를 통과하려면 WCAG, 통과한 것들 중에 무엇을 고를지는 APCA입니다. 둘의 판정이 갈리면 페이지가 그 사실을 분명히 말합니다.
팔레트 전체를 한 번에 봅니다
색을 한 줄에 하나씩 붙여넣으면 N×N 표가 나옵니다. 삼각형이 아니라 정사각형인 이유는 APCA가 대칭이 아니기 때문입니다. 같은 두 색이라도 어느 쪽이 글자냐에 따라 점수가 다릅니다.

자주 묻는 질문

어느 기준을 따라야 하나요?

WCAG 2.2입니다. 법령이 참조하는 것이 그쪽이니까요. EN 301 549와 Section 508 모두 WCAG를 가리키고, 감리에서 돌리는 숫자도 그것입니다. 읽는 사람의 경험을 더 잘 설명하는 쪽은 APCA이니, 이미 통과한 조합들 중에서 고를 때 쓰세요.

WCAG와 APCA는 왜 판정이 다른가요?

WCAG 2의 비율은 2008년 공식입니다. 상대 휘도에 고정된 플레어 항을 더한 것이고 두 인자에 대해 대칭입니다. APCA는 지각을 모형화하고, 극성에 따라 값이 달라지며 — 밝은 배경의 어두운 글자가 실제로 더 잘 읽힙니다 — 크기와 굵기를 함께 봅니다. 그래서 WCAG는 읽기 힘든 흰 배경의 중간 회색을 통과시키기도 하고, 문제없는 어두운 배경의 어두운 글자를 떨어뜨리기도 합니다.