색상 대비 검사기

스크린샷

구매하면 이렇게 받습니다

• 다운로드결제 즉시 파일을 받을 수 있습니다. 라이선스 보관함에서 언제든 다시 받을 수 있습니다.

상품 소개

글자색과 배경색을 넣으면 WCAG 대비비를 계산하고 기준을 넘는지 검사합니다. ■ 눈으로 판단하면 안 됩니다 회색 위의 회색이 제일 자주 걸립니다. 보고 있으면 읽히는 것 같은데 재 보면 한참 모자랍니다. 만든 사람은 무슨 글자인지 이미 알고 있어서 더 잘 읽히거든요. 처음 보는 사람 기준으로 판단해야 합니다. `#7a8b9c`를 흰 배경에 올리면 3.5:1입니다. 본문 기준 4.5:1에 못 미칩니다. 화면으로는 멀쩡해 보이는데요. ■ 기준은 이렇습니다 본문 — AA 4.5:1, AAA 7:1 큰 글자 — AA 3:1, AAA 4.5:1 UI 요소·그래픽 — 3:1 "큰 글자"는 18pt(24px) 이상이거나 굵은 14pt(18.66px) 이상입니다. UI 요소는 아이콘, 입력창 테두리, 버튼 경계, 그래프 선처럼 글자가 아닌 것들입니다(WCAG 2.1). 이걸 빠뜨려서 "테두리가 안 보이는 입력창"이 자주 나옵니다. 보통은 AA를 맞추면 충분합니다. AAA는 저시력 사용자를 위한 강화 기준이라 공공기관이나 의료·금융에서 요구하는 경우가 있습니다. ■ 실제로 어떻게 보이는지도 보여줍니다 숫자만 내면 "그래서 뭘 어쩌라고"가 됩니다. 그 색으로 쓴 큰 제목, 굵은 19px, 본문, 작은 글씨, 버튼 테두리를 한 화면에 보여줍니다. 숫자와 눈을 같이 쓰시라고요. ■ 미달이면 통과하는 색을 골라 줍니다 색상은 그대로 두고 밝기만 옮긴 가장 가까운 색을 찾습니다. 브랜드 색이 아예 다른 색이 돼 버리면 안 되니까요. `#7a8b9c`가 미달이면 `#6a7887`을 제안합니다. 4.52:1이라 겨우 통과하는 값입니다. 눌러서 바로 복사하거나 적용할 수 있습니다. ■ 반투명도 실제 색으로 계산합니다 `rgba(43, 74, 128, 0.4)`처럼 반투명한 글자색을 쓰면 화면에 찍히는 건 배경과 섞인 색입니다. 원래 색으로 재면 통과하는데 실제로는 안 보이는 일이 생깁니다. 불투명도 슬라이더를 넣어서 섞인 색으로 계산합니다. ■ 대비비는 어떻게 계산하나 WCAG가 식을 정해 뒀습니다. 감이 아니라 계산입니다. 각 색의 R·G·B를 선형화한 뒤 0.2126R + 0.7152G + 0.0722B로 상대휘도를 구하고, 밝은 쪽과 어두운 쪽에 각각 0.05를 더해 나눕니다. 초록의 계수가 제일 큽니다. 사람 눈이 초록에 제일 민감해서요. 그래서 같은 밝기라도 파란 글씨가 더 안 보입니다. 검정과 흰색이 21:1로 최대이고, 같은 색이 1:1로 최소입니다. ■ 자주 걸리는 자리 · 흰 배경의 브랜드 색 — 노랑, 연두, 하늘색은 대개 떨어집니다. 로고에는 써도 본문에는 못 씁니다. · 다크 모드 — 색을 뒤집으면 대비비가 달라집니다. 라이트에서 통과하던 조합이 다크에서 무너지는 일이 잦아서 따로 재야 합니다. · placeholder와 disabled — "어차피 흐린 글씨"라고 넘어가는데, 읽어야 하는 정보면 기준을 지켜야 합니다. · 이미지 위의 글자 — 배경이 자리마다 달라서 제일 어두운 지점과 제일 밝은 지점을 각각 재야 합니다. ■ 대비비를 맞춰도 끝이 아닙니다 색만으로 정보를 전하면 색맹인 사람에게는 구별이 안 됩니다. "빨간 것이 오류"라면 아이콘이나 글자를 같이 넣으세요. 대비비와는 별개인 WCAG 1.4.1 항목입니다. ■ 공개 전 색도 넣을 수 있습니다 아직 안 내놓은 제품의 색을 웹 도구에 넣기 꺼려지는 경우가 있습니다. 이 파일은 브라우저 안에서만 계산합니다. 전송 코드가 없고 인터넷을 꺼도 씁니다. ■ 색 형식 `#2b4a80`, `#fff`, `2b4a80`, `rgb(43, 74, 128)`, `rgba(43,74,128,0.5)` 를 다 받습니다. 색상 상자로 골라도 되고 값을 쳐 넣어도 됩니다. 둘이 서로 맞춰집니다. ■ 이런 분께 · 디자인 시안의 색이 접근성 기준에 맞는지 확인해야 하는 분 · 브랜드 색을 본문에 써도 되는지 궁금한 분 · 다크 모드를 만들면서 색을 다시 잡아야 하는 분 · 접근성 심사를 준비하는 분 · 회색 톤을 여러 단계로 쓰는데 어디까지 괜찮은지 모르겠는 분 ■ 저작권 편하게 쓰세요. 개인이든 업무든 횟수 제한 없고, 기기 여러 대에 옮겨두셔도 됩니다. 나온 결과는 어디에 쓰시든 됩니다. 저작권만 새몰(saemol.com)에 남겨둡니다. 파일 자체를 다시 배포하거나 파는 것만 피해주시면 됩니다. 주변에 알려주고 싶으시면 상품 주소를 전해주세요. ■ 알아두실 것 WCAG 2.1 기준입니다. 차기 표준(WCAG 3)에서는 APCA라는 다른 계산법이 논의되고 있는데 아직 확정 전이라 넣지 않았습니다. 한국은 「지능정보화 기본법」과 웹 접근성 인증(WA) 심사에서 이 기준을 씁니다.

기술 스택