색상 명암비 검사기 — WCAG 2
전경색과 배경색의 sRGB 상대 휘도로 명암비를 구하고 본문·큰 글씨 기준을 비교합니다. 색 조합을 설계하는 단계에서 숫자 기준을 빠르게 확인하는 용도입니다.
- 브라우저에서 실행
- 업로드되지 않음
- 가입 없음, 기기 성능에 따라 제한될 수 있음
숫자는 기기에만 남습니다. 서버로 전송되지 않습니다.
사용 방법과 입력
불투명한 전경색과 배경색을 HEX 형식으로 넣으세요. 실제 화면에서 투명도나 이미지가 섞인다면 그 위에 합성된 최종 색을 먼저 구해야 올바른 비교가 됩니다.
결과 해설과 예제
#000000과 #ffffff는 21:1입니다. WCAG AA 일반 본문은 4.5:1, 큰 글씨는 3:1을 기준으로 보지만 반올림된 표시값만으로 경계 통과를 판단하지 마세요.
한계와 주의사항
- 글꼴 크기·굵기와 실제 페이지의 합성 색을 자동으로 읽지 않습니다.
- 한 쌍의 색 통과가 페이지 전체 접근성 적합성을 뜻하지 않습니다.
입력 항목
| 항목 | 설명·제약 |
|---|---|
| 전경색(#hex) | 화면의 단위와 입력 형식을 확인하세요. |
| 배경(#hex) | 화면의 단위와 입력 형식을 확인하세요. |
데이터 처리
처리는 현재 브라우저 탭에서 수행되며, 도구 입력을 계산 목적으로 서버에 업로드하지 않습니다.
근거 출처
자주 묻는 질문
검정과 흰색의 명암비는 얼마인가요?
#000000과 #ffffff는 21:1입니다. WCAG AA 일반 본문은 4.5:1, 큰 글씨는 3:1을 기준으로 보지만 반올림된 표시값만으로 경계 통과를 판단하지 마세요.
이 검사만 통과하면 접근성 검토가 끝나나요?
글꼴 크기·굵기와 실제 페이지의 합성 색을 자동으로 읽지 않습니다. 한 쌍의 색 통과가 페이지 전체 접근성 적합성을 뜻하지 않습니다.
관련 도구
처음부터 다시 할 필요는 없습니다. 다음 단계에 맞는 도구로 자연스럽게 이어가세요.
CSS box-shadow 선언 생성기 — 무료
가로·세로 이동, 흐림, 확산과 색을 조합해 box-shadow 선언 하나를 만듭니다. 카드나 버튼의 그림자를 직접 입력해 CSS 파일에 옮기려는 작업에 적합합니다.
CSS 그라데이션 — 코드 복사, 무료 | 사용법·입력·결과 해설
두 색 사이의 선형 또는 원형 그라데이션을 CSS background 선언으로 만듭니다. 색상 정지점을 복잡하게 편집하기 전에 두 색 조합과 방향을 시험할 수 있습니다.
HTML 메타 태그 생성기 — title·OG
제목, 설명, 대표 주소와 이미지 값으로 페이지 머리말에 넣을 메타 태그 초안을 만듭니다. 직접 작성한 HTML 페이지의 기본 정보를 정리할 때 사용할 수 있습니다.
