MultiKit
사용 방법
- 글자색과 배경색을 hex, rgb(), hsl(), 이름으로 입력하거나 색 상자로 고릅니다. 프리셋을 누르면 예시 조합을 볼 수 있습니다.
- 비율과 표를 확인합니다. 각 줄에 등급의 기준과 통과 여부가 나옵니다. 미리보기는 내 색으로 보통 글자, 큰 글자, 버튼을 보여 줍니다.
- 통과하지 못하면 표 아래에 통과하는 가장 가까운 색이 나옵니다. 누르면 그 색을 씁니다. 페이지 주소에 색이 담겨서 링크로 공유할 수 있습니다.
예시
글자 #767676, 배경 #ffffff
→ 4.54 : 1, 보통 글자 AA 통과흰 바탕에서 AA를 통과하는 가장 밝은 회색입니다.
글자 #777777, 배경 #ffffff
→ 4.47 : 1, 보통 글자 AA 실패, 큰 글자는 통과한 단계만 더 밝아도 4.5 기준 아래로 내려갑니다.
글자 #999999, 배경 #ffffff
→ 2.84 : 1, 실패. 통과하는 가장 가까운 색은 #767676(AA)과 #595959(AAA)제안은 회색을 유지한 채 더 어둡게만 만듭니다.
계산 방식
색은 hex, rgb(), hsl(), oklch(), 색 이름을 이해하는 오픈소스 culori 라이브러리가 읽습니다. 대비는 WCAG 2 공식으로 계산합니다. 각 색의 선형화한 sRGB 채널에서 상대 휘도를 구하고, 밝은 쪽 L1과 어두운 쪽 L2로 (L1 + 0.05) / (L2 + 0.05)를 구합니다.
제안하는 색은 OKLCH 색 공간에서 글자색의 색상과 채도를 유지하고 밝기만 움직이며, 밝은 배경에서는 검정 쪽으로, 어두운 배경에서는 흰색 쪽으로 목표에 닿는 데 필요한 만큼만 옮깁니다. 한 방향으로 목표에 닿지 못하면 반대 방향을 시도합니다.
알려진 값으로 테스트합니다. 흰 바탕의 검정 21 : 1, 흰 바탕의 #767676 4.54와 #777777 4.47, 모든 등급의 정확한 기준(버림 규칙 포함), 투명한 색의 합성, 밝은 배경·어두운 배경·중간 배경에서의 제안이 포함됩니다.
출처
자주 묻는 질문
- 대비 비율이 얼마나 필요한가요?
- WCAG AA는 보통 글자 4.5 : 1, 큰 글자 3 : 1을 요구합니다. AAA는 7 : 1과 4.5 : 1입니다. 아이콘이나 입력창 테두리 같은 인터페이스 요소는 3 : 1이 필요합니다. 큰 글자는 24px 이상이거나 굵은 글자 18.66px 이상입니다.
- 어느 등급을 목표로 하나요?
- AA가 일반적인 목표이고 대부분의 법과 지침이 가리키는 기준입니다. AAA는 더 엄격해서 사이트 전체에 요구되지는 않지만 저시력자에게 도움이 되니 본문에는 가능하면 쓰세요.
- 비율은 어떻게 계산하나요?
- 각 색을 눈에 얼마나 밝게 보이는지를 나타내는 상대 휘도로 바꾸고, (밝은 쪽 + 0.05) / (어두운 쪽 + 0.05)로 계산합니다. 같은 색이면 1 : 1, 흰 바탕의 검은 글자는 21 : 1입니다.
- 4.499는 4.5로 올려서 통과하나요?
- 아니요. 비율은 반올림이 아니라 소수 둘째 자리에서 버립니다. 기준 바로 아래의 색이 통과한 것처럼 보이지 않게 하려는 것으로, 4.4999는 4.49로 표시되고 실패입니다.
- 투명한 색은 어떻게 하나요?
- 투명도가 있는 글자색은 먼저 배경 위에 겹치고, 투명한 배경은 흰색 위에 겹쳐서 계산합니다. 눈에 보이는 모습이 그렇기 때문입니다. 그렇게 했을 때는 페이지가 알려 줍니다.
- 입력한 색이 전송되나요?
- 아니요. 모두 브라우저에서 계산합니다. 색은 공유할 수 있도록 페이지 주소에만 담깁니다.
관련 도구
버전 기록
- 1.0.1 — 검색 제목에서 도구의 핵심 작업과 무료·온라인 사용 여부를 더 분명하게 안내합니다.
- 1.0.0 — 첫 공개.