색상 명암비 검사기
글자색과 배경색의 명암비와 가독성 기준(WCAG AA)의 합격·불합격을 즉시 판정
특징
명암비를 즉시 판정
글자색과 배경색을 입력하기만 하면 WCAG AA 합격·불합격을 표시
피커와 코드 모두 대응
HEX·단축형·rgb()의 붙여넣기와 색 선택으로 지정
2가지 크기의 샘플 표시
일반 글자와 제목의 실제 보이는 방식을 즉시 확인
합격하는 색을 한 클릭으로
색감을 유지하면서 밝기를 변경한 제안색을 바로 적용
사용 방법
글자색을 지정
컬러 피커로 선택하거나 #333333·#333·rgb(51, 51, 51) 중 하나의 형식으로 컬러 코드 입력
배경색을 지정
같은 방식으로 배경색을 지정. 버튼을 누르지 않아도 입력과 동시에 결과가 업데이트됨
비율·합격·샘플을 확인
명암비, 일반 글자와 큰 글자의 합격·불합격, 한 줄 평가, 샘플 글자의 보이는 방식을 확인
제안색을 적용하여 재확인
불합격이면 '글자색을 …으로 변경' 등의 제안 버튼으로 합격하는 색을 적용. 교환 버튼으로 글자색과 배경색의 교체도 가능
사용 사례
슬라이드·자료의 배색 확인
사내 자료나 슬라이드의 글자색과 배경색이 읽을 수 있는지 작성 전에 확인
웹사이트의 배색 확인
사이트나 배너의 배색이 접근성 기준(WCAG AA)을 충족하는지 확인
브랜드 컬러의 본문 사용 판단
브랜드 컬러를 글자색으로 사용할 때, 얼마나 진해야 본문에 사용할 수 있는지 결정
불합격 배색의 수정
지적된 배색을 색감을 유지하면서 합격하는 색으로 수정
기초 지식
명암비란
명암비는 글자색과 배경색의 밝기 차이를 1:1부터 21:1까지의 수치로 나타낸 지표입니다. 검은색과 흰색의 조합이 최대 21:1이고, 같은 색끼리는 최소 1:1이 됩니다.
- 계산의 원리：명암비는 2색을 sRGB의 상대 휘도로 변환한 후, 밝은 쪽의 휘도와 어두운 쪽의 휘도에 각각 0.05를 더해서 나눈 값입니다.
- 수치의 목안：흰색 배경(#FFFFFF)에 대해 회색 #777777은 4.47:1, #999999는 2.84:1, 검은색(#000000)은 21:1의 명암비가 됩니다.
WCAG의 AA와 AAA의 차이
WCAG는 웹 콘텐츠의 접근성에 관한 국제적 가이드라인으로, 명암비의 합격선을 AA와 AAA 2단계로 정하고 있습니다.
- AA(표준 수준)：AA는 일반 글자에서 4.5:1 이상, 큰 글자에서 3.0:1 이상을 요구하는 기준으로, 일반적인 웹사이트가 목표로 하는 수준입니다.
- AAA(더 엄격한 수준)：AAA는 일반 글자에서 7:1 이상, 큰 글자에서 4.5:1 이상을 요구하는 기준으로, 시력이 낮은 사람도 읽기 쉬운 것을 목표로 하는 수준입니다.
큰 글자의 정의
WCAG의 큰 글자란, 대략 18포인트(24px) 이상이거나 굵은글씨로 14포인트(약 18.7px) 이상의 글자를 말합니다.
- 일반 글자：일반 글자는 큰 글자에 해당하지 않는 크기의 글자로, 본문이나 주석 등 읽을 거리가 해당하며, 4.5:1 이상의 명암비가 필요합니다.
- 제목과의 관계：제목이라도 24px 미만이고 굵은글씨가 아니면 일반 글자로 취급되므로, 크기뿐만 아니라 굵기도 확인이 필요합니다.
안전성과 개인정보 보호
브라우저 내 처리
입력 데이터는 사용 중인 브라우저 내에서만 처리되며 외부로 전송되지 않습니다.
브라우저 내에서만 처리
명암비의 계산과 색 제안는 모두 사용 중인 브라우저 내에서 처리되며, 입력 데이터는 서버로 전송되지 않습니다.
통신은 HTTPS로 암호화
페이지 로드도 TLS로 암호화되어 제3자가 내용을 읽을 수 없습니다.
제3자로의 전송 없음
광고 네트워크나 트래커 등 외부 서비스로 입력 내용을 전송하지 않습니다.
결과 자동 저장 없음
입력한 글자색이나 배경색나 입력 제안을 서버에 저장하지 않습니다.
Google 검색에서 RAKKOTOOLS 팔로우하기
194개의 편리한 도구를 Google 검색·AI 검색에서 더 쉽게 찾을 수 있습니다!
- 검색에서 발견
- AI 검색에서도 표시
- 새 도구도 발견
업데이트 정보
- update #337
색상 명도 대비 검사기 추가, 글자색과 배경색의 가독성 판정