June Kim's Web Apps
색상 변환, 대비 검사
HEX, RGB, HSL, OKLCH를 서로 바꾸고, 글자색과 배경색의 WCAG 2.x 대비 비율과 AA, AAA 통과 여부를 알려 줍니다. 기준에 못 미치면 가장 가까운 색을 제안합니다.
색 변환
예시
대비 검사 (WCAG 2.x)
큰 글자 24px 굵게
본문 16px. 다람쥐 헌 쳇바퀴에 타고파. The quick brown fox jumps over the lazy dog.
작은 글자 13px, 각주나 도움말에 흔히 쓰는 크기입니다.
입력한 색은 이 브라우저 안에서만 계산하고 어디에도 보내지 않습니다. 주소의 # 뒤에 남아 링크로 공유할 수 있습니다.
알아 둘 것
- AA, AAA 기준 본문 글자는 4.5:1(AA), 7:1(AAA) 이상. 큰 글자(24px 이상, 또는 굵게 18.66px 이상)는 3:1, 4.5:1. 아이콘과 입력칸 테두리 같은 UI 요소는 3:1 (WCAG 2.1, 1.4.11)
- 반올림하지 않습니다 WCAG는 4.499:1을 4.5:1로 올려 주지 않습니다. 그래서 비율은 소수 둘째 자리 아래를 버려 보여 줍니다
- 투명도 글자색이 투명하면 배경 위에 겹친 색으로, 배경이 투명하면 흰 바탕 위에 겹친 색으로 계산합니다
- OKLCH 사람 눈에 고르게 보이도록 만든 색 공간입니다. sRGB 밖의 색은 CSS Color 4 방식으로 채도를 줄여 화면에 낼 수 있는 가장 가까운 색으로 바꿉니다
- 읽는 형식
#fa0, f59e0bcc, rgb(245 158 11 / 50%), 245, 158, 11, hsl(0.1turn 92% 50%), oklch(0.77 0.17 70), tomato 같은 CSS 색 이름
- 제안 색 글자색의 OKLCH 명도만 조금씩 바꿔 기준을 넘는 가장 가까운 색을 찾습니다. 색상(hue)과 채도는 그대로 둡니다