웹 접근성(Accessibility)을 지키는 것은 매우 중요하지만, 많은 웹사이트가 여전히 색상 대비 문제로 어려움을 겪고 있습니다. 기존에는 이를 해결하기 위해 JavaScript 라이브러리를 사용해야 했지만, 이제는 CSS의 contrast-color() 함수 하나로 아주 간단하게 해결할 수 있게 되었습니다! 이 함수는 배경색에 따라 텍스트 색상을 자동으로 black 또는 white로 결정해 주며, 별도의 JS 실행 없이 브라우저의 style computation 단계에서 직접 계산하므로 성능과 사용자 경험(UX) 측면에서도 매우 뛰어납니다. 이번 글에서는 contrast-color()의 작동 원리부터 Level 5와 Level 6의 차이점, 그리고 실무에서 주의해야 할 점(예: transition 시의 snap 현상 등)까지 자세히 설명해 드립니다.