프론트엔드 및 모바일
색상·접근성 도구
웹 색상 작업은 어울리는 색을 고르는 일과 모두에게 통하게 만드는 일로 나뉩니다. 형식을 바꾸고 팔레트를 만들고 텍스트가 읽히는지 확인하는 일은 거의 모든 UI에서 등장하며, 하나만 잘못돼도 바로 드러납니다.
색상 변환기는 HEX, RGB, HSL, HSV, CMYK, Lab, OKLCH 일곱 형식을 한 번에 보여줍니다. 색상 대비 검사기는 WCAG 기준을, APCA 대비 검사기는 더 새로운 모델을 적용하며, 색맹 시뮬레이터는 여러 모델로 팔레트를 비교합니다.
도구 5개
Color & Accessibility 도구 FAQ
WCAG 대비와 APCA는 무엇이 다른가요?
WCAG 대비 비율은 단순한 휘도 공식이라 지각과 잘 안 맞고, APCA는 지각적 대비를 더 가깝게 모델링합니다. 색상 대비 검사기와 APCA 대비 검사기가 같은 색 쌍을 각 기준으로 보여줍니다.
내 색상 팔레트가 색맹 사용자에게도 통하는지 어떻게 확인하나요?
원본만 봐서는 드러나지 않으므로 시각 결핍을 시뮬레이션하는 것이 유일하게 믿을 만한 방법입니다. 색맹 시뮬레이터가 여러 색각 모델로 색상과 이미지를 비교해 줍니다.
HSL 대신 OKLCH를 언제 쓰는 게 좋을까요?
OKLCH는 지각적으로 균일해 명도를 바꿔도 HSL처럼 채도가 함께 흔들리지 않습니다. 색상 변환기가 같은 색을 OKLCH와 다른 여섯 형식으로 함께 보여줍니다.