색상 대비 검사기 이야기
낮은 대비는 웹에서 가장 흔한 접근성 문제 중 하나입니다. 규칙은 마법의 숫자처럼 보이지만 각각 이유가 있으며, 나이가 들면서 눈의 민감도가 떨어지는 방식과 화면이 빛을 내는 방식에 바탕을 둡니다.
4.5와 7의 유래
WCAG 2.0은 2008년 12월 W3C 권고안이 되었습니다. 작성자들은 ISO 9241-3 표준의 최소 3:1에서 출발해, 80세 전후에 흔한 약 20/40 시력에서 생기는 대비 감도 손실을 보완하도록 값을 높였습니다. 그렇게 AA 수준의 4.5:1이 나왔습니다. AAA 수준의 7:1은 약 20/80 시력에 대해 같은 보정을 한 것입니다.
상대 휘도
공식은 먼저 각 sRGB 채널을 선형 빛으로 되돌린 뒤 빨강, 초록, 파랑에 0.2126, 0.7152, 0.0722의 가중치를 줍니다. 이는 텔레비전 표준 ITU-R BT.709와 같은 값으로, 눈이 초록에 가장 민감하기 때문입니다. 대비율은 밝은 쪽 휘도에 0.05를 더한 값을 어두운 쪽 휘도에 0.05를 더한 값으로 나눈 것입니다. 0.05는 화면이 반사하는 빛을 나타내며 범위를 1:1부터 흰 바탕 검은 글자의 21:1까지로 제한합니다.
텍스트를 넘어
큰 텍스트, 즉 24 px 이상이거나 굵게 18.66 px 이상인 글자는 낮은 대비에서도 읽기 쉬워 AA에서 3:1이면 충분합니다. 2018년 6월에 발표된 WCAG 2.1은 성공 기준 1.4.11 비텍스트 대비를 추가했습니다. 입력란 테두리, 포커스 표시, 아이콘, 차트를 이해하는 데 필요한 부분은 인접한 색과 3:1을 이루어야 합니다.
색각 이상과 앞으로
남성의 약 12명 중 1명, 여성의 약 200명 중 1명이 색각 이상이 있으며 대부분 빨강과 초록에 관련됩니다. 대비는 휘도로 측정하므로 통과한 조합은 여전히 읽을 수 있지만, 색조만 다른 색은 비슷해 보일 수 있습니다. 이 시뮬레이션은 Machado, Oliveira, Fernandes의 2009년 모델을 사용합니다. WCAG 3 초안은 글자 크기와 밝은 바탕의 어두운 글자인지 그 반대인지도 고려하는 새로운 방법인 APCA를 검토하고 있습니다.
자주 묻는 질문
대비가 좋으면 접근성은 충분한가요?
아닙니다. 여러 요구 사항 중 하나일 뿐입니다. WCAG는 색만으로 의미를 전달하지 않도록 요구하므로, 예를 들어 링크나 오류에 아이콘이나 밑줄을 더해야 합니다.
시뮬레이션이 그 사람이 보는 것을 정확히 보여 주나요?
완전한 이색형 색각을 잘 근사한 것입니다. 많은 사람이 더 가벼운 형태를 가지며 사람마다 조금씩 다르게 보므로 참고용으로 사용하세요.
WCAG 2 대비율 대신 APCA를 써야 하나요?
현재 적합성을 위해서는 WCAG 2 대비율을 사용하세요. 2023년 10월에 발표된 WCAG 2.2도 같은 공식을 유지하며, EN 301 549 같은 법과 표준이 이를 참조합니다. APCA는 아직 개발 중입니다.
관련 도구
색상 대비 검사기
무료 WCAG 색상 대비 검사기: 텍스트 색과 배경색을 HEX, RGB 또는 HSL로 입력하고 AA 및 AAA 결과와 함께 명암비를 확인하고, 통과하는 가장 가까운 색을 받고, 색각 이상을 시뮬레이션하세요.
색상 팔레트 생성기
브라우저에서 색상 팔레트를 구축하고 잠그고 섞으세요. HEX, CSS 변수 또는 JSON을 복사하고, PNG 또는 SVG를 내보내고, 사진에서 색상을 추출합니다.
컬러 휠
대화형 휠에서 색상을 선택하고, 보색, 유사, 삼중 및 기타 팔레트를 생성하고 HEX, RGB, HSL, HSV 또는 CMYK를 복사합니다.
그라디언트 편집기
브라우저에서 선형 및 방사형 CSS 그래디언트를 구축하세요. 색상 정지점을 드래그하고, 각도를 설정하고, CSS, HEX, RGB, HSL, HSV 또는 CMYK를 복사하세요.
색상에 대한 추가 정보
화면과 인쇄에서 색상이 작동하는 방식: RGB, CMYK, HSL, 16진수, 색상환, 그라디언트, 대비 및 PictorX 도구.
시도해 볼 준비가 되셨나요?
브라우저에서 PictorX를 엽니다. 설치가 필요 없고 시작하는 데 신용 카드가 필요하지 않습니다.
색상 대비 검사기 열기