CSS의 contrast-color() 함수는 주어진 색상과 가장 대비가 높은 색을 자동으로 선택하는 기능입니다. 현재는 검정색 또는 흰색만 반환하며, Safari Technology Preview에서만 지원됩니다.
주요 특징:
- background-color와 함께 사용하여 텍스트 색상을 자동 결정
- CSS 변수와 함께 사용 가능
- @supports로 지원 여부 확인 가능
한계점:
- 검정/흰색만 반환하여 디자인 제약이 큼
- 때로는 두 색 모두 충분한 대비를 제공하지 못함
- 이미지나 그라데이션에는 제한적
- 폰트 크기를 고려하지 않음
향후 개선사항으로는 더 넓은 색상 범위 지원, APCA(새로운 색상 대비 알고리즘) 적용, 폰트 크기와 굵기 고려 등이 예정되어 있습니다.
저자는 웹 접근성이 법적 요구사항인 만큼, 브라우저가 자동으로 색상 대비를 보장하거나 개발자가 접근성 기준을 충족하도록 하는 방안을 제안합니다.