색상 선택기와 명도 대비 검사

사용 방법

1. 색상 선택기로 색을 고르거나 "색 값"에 #1e88e5, rgb(30, 136, 229), hsl(208, 79%, 51%)처럼 입력합니다.
2. HEX, RGB, HSL 옆의 "복사" 버튼으로 코드를 복사합니다.
3. "팔레트"에 밝기 단계와 보색 등이 표시됩니다. 색 칸을 누르면 현재 색이 되고, "복사"로 코드를 복사할 수 있습니다.
4. "팔레트 내보내기"에서 형식(CSS 변수, SCSS 변수, JSON)과 이름 접두어를 고른 뒤 한 번에 복사합니다.
5. "명도 대비 검사"에 글자색과 배경색을 넣으면 대비 비율과 AA, AAA 판정이 표시됩니다.

주의 사항

• 브라우저의 색상 선택기로는 투명도를 고를 수 없습니다. 투명도는 #rrggbbaa나 rgba()로 입력해 주세요.
• 색 이름(red 등), hwb(), lab(), oklch() 형식은 읽지 못합니다.
• 팔레트는 투명도 없이 만듭니다. 보색 등은 HSL에서 색상을 회전해 구하므로 눈으로 보는 인상과 다를 수 있습니다.
• 명도 대비 검사에서 배경색은 불투명한 색으로 보고 투명도는 무시합니다.
• 판정은 WCAG 수치 기준과 비교한 결과일 뿐 접근성 전체의 준수를 뜻하지 않습니다. 최근 색은 저장되지 않으며 페이지를 닫으면 사라집니다.

계산·변환 방식

틴트는 흰색을, 셰이드는 검은색을 각각 20%, 40%, 60%, 80% 비율로 sRGB에서 섞은 색입니다.

보색은 색상을 180°, 유사색은 ±30°, 분할 보색은 150°와 210°, 삼각 배색은 120°와 240° 회전한 색입니다(채도와 명도는 그대로).

명도 대비는 WCAG 2.2의 상대 휘도로 (밝은 쪽 + 0.05) ÷ (어두운 쪽 + 0.05)를 계산합니다. 반투명한 글자색은 배경색 위에 겹친 색으로 계산합니다.

기준은 성공 기준 1.4.3(AA: 일반 글자 4.5:1, 큰 글자 3:1)과 1.4.6(AAA: 일반 글자 7:1, 큰 글자 4.5:1)입니다.