색상 대비 검사기 (WCAG)

18pt, 굵은 글씨라면 14pt입니다. 대략 24px과 18.66px입니다. 그 아래면 AA 기준이 4.5, 그 위면 3.0입니다.

브라우저 개발자 도구와 접근성 검사기가 쓰는 것과 같은 WCAG 2.1 상대 휘도 공식입니다.

네. 글자색에 알파(#1f2937cc 같은 8자리 hex, rgba() 또는 hsla())가 있으면 배경 위에 먼저 합성한 뒤 그 색으로 대비를 계산하므로 실제로 보이는 값이 나옵니다. 배경이 반투명하면 흰 페이지 위에 먼저 합성하고, 대비 계산과 미리보기 모두 그렇게 칠해진 색을 씁니다. 실제 뒤 바탕이 흰색이 아닐 수도 있으므로, 어떤 바탕 위에서든 대비 비율이 가질 수 있는 범위와 검정 위에서의 값도 함께 보여 줍니다.

대비 감도 모형에서 나온 값입니다. 시력 20/40인 사람이 일반 텍스트를 읽는 데 필요한 정도가, 20/20인 사람이 3:1에서 읽는 것과 대략 맞먹습니다. 큰 텍스트 기준이 낮은 이유는 크기가 같은 일을 일부 해 주기 때문입니다.

평균이 아니라 최악의 경우를 재세요. 밝은 글자 아래에서 가장 밝은 부분, 어두운 글자 아래에서 가장 어두운 부분을 찾아 확인합니다. 더 나은 방법은 글자 뒤에 불투명하거나 반투명한 층을 깔아 확인할 비율을 하나로 만드는 것입니다.

네. 다섯째 배지인 비텍스트 — UI 요소·그래픽은 입력칸·버튼 테두리, 아이콘, 차트 선에 대한 WCAG의 3:1 기준을 판정합니다. APCA 명도 대비는 이 비율을 대체하려고 초안이 나온 모델의 Lc 값을 보여 주며, 밝은 바탕의 어두운 글자는 양수, 어두운 바탕의 밝은 글자는 음수입니다. 색마다 있는 명도 슬라이더는 색조를 그대로 두고 명도만 옮기며 비율이 따라 바뀝니다. 또 같은 색 조합을 적색·녹색·청색 색약과 색맹, 그리고 전색맹의 두 형태로 시뮬레이션해 각각의 대비 비율과 AA 판정을 보여 줍니다.

네. 배지 아래 “내 글자”에 크기(px)와 굵게 여부를 넣으면 일반 텍스트인지 큰 텍스트인지와 그 AA·AAA 결과를 하나로 알려 줍니다. 글자색 제안 아래 “글자색은 그대로 두고 배경을 바꾼다면 (같은 색조)”는 AA를 통과하는 가장 가까운 배경을 “배경에 적용” 버튼, 복사 버튼과 함께 제안합니다. “링크 색 (선택)”을 넣으면 링크를 배경과, 그리고 본문 글자와 견주고, 밑줄이 있는 링크는 배경 대비만 보면 된다고 알려 줍니다. “팔레트 전체 검사”는 한 줄에 색 하나씩 받아 모든 쌍의 대비 비율을 표로 그리고 AA를 통과한 칸은 굵게 표시합니다. “미리보기를 흑백으로 보기”는 미리보기에서 명도만 남기고, 브라우저가 화면에서 색을 고를 수 있으면 “화면에서 색 고르기”로 화면 어디서든 색을 가져옵니다.

네. “기록에 추가”를 누르면 지금 조합이 “이번 방문에서 검사한 조합”에 최신순으로 들어가며, 조합마다 미리보기와 두 색, 대비 비율, AA·AAA 판정, 열기와 삭제 버튼이 붙습니다. “기록 복사”는 목록을 글로 복사하고 “기록 지우기”는 목록을 비웁니다. 목록은 페이지를 떠나기 전까지 남습니다. “내 글꼴과 문구로 미리보기”에서는 이 기기에 설치된 글꼴을 CSS 이름으로 적고 문구를 직접 넣어 미리보기에 입힐 수 있습니다.