사용 방법
- 컬러 피커로 색을 고르거나, 텍스트 칸에 HEX 코드, rgb(), hsl(), oklch(), tomato 같은 이름을 입력합니다.
- 목록에서 필요한 형식(HEX, RGB, HSL, OKLCH)을 복사합니다.
- 대비 표에서 이 색 위에서 흰색 또는 검정 글자가 읽기 쉬운지 확인합니다.
예시
#2563eb
→ rgb(37, 99, 235) hsl(221, 83%, 53%) oklch(54.61% 0.215 262.88)흰색 글자와의 대비는 5.17:1(일반 글자 AA 통과), 검정 글자와는 4.06:1(큰 글자만 통과)입니다.
rebeccapurple
→ #663399
#2563eb80
→ rgba(37, 99, 235, 0.5) #2563eb80끝의 두 자리 16진수는 알파(불투명도)이며 80은 약 50%입니다.
계산 방식
입력한 텍스트는 CSS에서 쓰는 표기를 이해하는 오픈소스 culori 라이브러리가 읽습니다. 색은 RGB, HSL, OKLCH로 변환되어 반올림한 값으로 표시됩니다. RGB와 HSL은 정수, OKLCH는 소수점 두세 자리까지입니다.
대비율은 WCAG의 정의를 따릅니다. 각 색의 상대 휘도를 선형 RGB 값으로 계산하고, 비율은 (밝은 쪽 + 0.05)를 (어두운 쪽 + 0.05)로 나눈 값입니다. 같은 색이면 1:1, 흰색 위의 검정이면 21:1입니다.
RGB와 HSL은 정수로 반올림되므로, 색을 이리저리 변환하면 값이 한 단계씩 달라질 수 있습니다. HEX 값이 정확한 값입니다.
출처
자주 묻는 질문
- HEX, RGB, HSL은 어떻게 다른가요?
- 같은 색을 다른 방식으로 적은 것입니다. HEX와 RGB는 빨강, 초록, 파랑의 양을 16진수나 0에서 255의 숫자로 적습니다. HSL은 색상을 0에서 360의 각도로, 채도와 밝기를 백분율로 적어서 손으로 조정하기 쉽습니다.
- OKLCH란 무엇인가요?
- 사람이 색을 지각하는 방식에 기반한 표기로, 밝기, 채도(선명함), 색상으로 이루어집니다. 밝기를 같은 간격으로 올리면 HSL보다 훨씬 고르게 보여서 팔레트를 만들기에 좋습니다. 최신 브라우저는 CSS에서 oklch()를 지원합니다.
- WCAG 대비 등급은 무엇을 뜻하나요?
- WCAG 2.x는 일반 글자에 AA 등급은 4.5:1 이상, AAA 등급은 7:1 이상의 대비율을 요구합니다. 큰 글자(약 24px, 또는 굵은 19px)는 AA에 3:1, AAA에 4.5:1이 필요합니다. 버튼 테두리 같은 인터페이스 요소는 3:1이 필요합니다.
- 대비 검사에 투명도도 반영되나요?
- 아니요. 색을 완전히 불투명한 것으로 보고 측정합니다. 반투명한 색은 뒤에 무엇이 있느냐에 따라 다른 색으로 보이므로, 실제로 섞인 최종 색으로 확인하세요.
- 서버로 전송되는 것이 있나요?
- 아니요. 모든 변환은 브라우저 안에서 이루어집니다.