CSS에서 브라우저가 대조되는 색상을 자동으로 선택하는 방법

5 days ago 8

contrast-color() 함수를 사용하면 버튼 등 다양한 배경색에 맞춰 브라우저가 검정 또는 흰색 글꼴색을 자동으로 선택함
대규모 프로젝트에서도 텍스트 가독성 유지가 쉬워지고 유지보수 효율성을 높임
현재 Safari Technology Preview에서는 WCAG 2 공식 알고리듬을 사용하는데, 이는 실제 인간 인지와 어긋날 수 있음
차세대 APCA 알고리듬 도입 논의가 WCAG 3 개발 과정에서 진행 중이며, 더 나은 명도 대비 평가를 약속함
단순한 흑백 대비 이외에도 향후 다양한 색상 옵션과 접근성 개선 기능이 추가될 전망임

개요 및 contrast-color() 도입 배경

여러 버튼이나 인터페이스 구성 요소에 다양한 배경색이 사용되는 디자인에서는 글꼴색(텍스트 색상) 의 가독성이 중요함
이전까지는 개발자가 직접 배경색과 텍스트 색상을 일일이 잘 조합해야 했으나, 대규모 프로젝트에서는 관리의 복잡성과 오류 발생 위험이 높음
contrast-color() CSS 함수를 사용하면 개발자는 배경색만 지정하면 되고, 브라우저가 자동으로 검정 또는 흰색 글꼴색 중 높은 대비를 선택함
이 방식으로 유지보수와 디자인 작업의 효율성이 크게 향상됨
간단히 color: contrast-color(색상);처럼 선언하여 사용할 수 있음

contrast-color() 사용법 예시

버튼의 배경색 변수에 원하는 색상을 지정하고, 텍스트 색상은 contrast-color()를 이용하여 자동으로 대조되는 흑백 중 하나가 선택됨
한 번에 한 색상만 관리하면 되므로, 디자인 정책 변경이나 다크/라이트 모드 지원 시 maintenance가 쉬움

button { background-color: var(--button-color); color: contrast-color(var(--button-color)); }

Relative Color Syntax를 활용하면 hover 상태에 대해서도 배경색과 텍스트 색상을 일관성 있게 관리할 수 있음

접근성 고려사항 및 알고리듬 설명

contrast-color() 사용이 모든 접근성(Accessibility) 문제를 자동으로 해결하지는 않음
특정 중간 밝기의 배경색에서는 검정, 흰색 모두 필요 기준에 못 미치는 경우가 발생함
현재 Safari Technology Preview에서 사용되는 WCAG 2 알고리듬은 공식 웹 접근성 표준임
- 이 알고리듬은 대비 비율 기반으로 선택하지만 실제 눈에 보이는 명도 대비와 불일치하는 결과가 나오기도 함
예시로, #317CFF파란색 배경에는 기계적으로 검정색이 더 높은 대비로 계산되지만, 실제로는 흰색이 더 잘 읽힘
이에 대한 비판과 개선 요구에 따라, 차세대 접근성 표준(WCAG 3) 에서 더 뛰어난 APCA(Accessible Perceptual Contrast Algorithm) 도입 논의가 진행 중임
APCA는 인간의 인지 특성을 반영하여 색상 대비를 계산하므로 실제 가독성을 더 잘 보장함

실제 환경에서 충분한 대비 제공하기

CSS의 @media (prefers-contrast: more) 미디어 쿼리를 활용하면, 사용자 접근성 선호도에 따라 추가적인 고대비 스타일을 적용할 수 있음

@media (prefers-contrast: more) { /* 더 높은 대조 스타일 정의 */ }

예를 들어, 브랜드 핵심색이 #2DAD4E와 같은 밝은 녹색인 경우, contrast-color()가 미래에는 흰색을 선택하더라도 작은 글씨에는 여전히 대비가 충분하지 않을 수 있음
APCA 알고리듬을 적용하면 폰트 크기, 굵기에 따라 필요한 최소 대비 기준을 상세히 참고할 수 있어 실무 디자인 결정에 도움을 줌
- 실제로 24px/400굵기 글자에는 흰색 적용이 적합하지만, 더욱 얇은 FONT나 작은 글씨에는 더 진한 배경색 사용이 권장됨
디자인팀은 light/dark mode, prefers-contrast 선호도 등을 고려해 각 조건에 맞는 색상 팔레트를 쉽게 변수로 관리할 수 있음

--button-color: #2DAD4E; @media (prefers-contrast: more) { @media (prefers-color-scheme: light) { --button-color: #419543; } @media (prefers-color-scheme: dark) { --button-color: #77CA8B; } } button { background-color: var(--button-color); color: contrast-color(var(--button-color)); font-size: 1.5rem; font-weight: 500; }

핵심적으로는 contrast-color() 덕분에 배경색을 중심으로 색상만 관리하면 되고, 텍스트 색상 대비 쌍은 브라우저가 자동 생성함

검정색과 흰색을 넘어

현재의 contrast-color()는 흑백 2가지 중에서만 선택하지만, 초기 버전은 여러 색상 중 선택도 가능했음
CSS Working Group은 향후 알고리듬 변화와 호환성을 위해 단순 버전(흑백만 선택)을 우선 제공하고, 미래에는 사용자 지정 색상 옵션 및 원하는 최소 대비 기준을 지정하는 등 확장도 계획함
단순한 필요에는 이미 충분히 유용함
본 함수는 배경색뿐만 아니라 테두리, 기타 시각 요소에도 다양하게 활용 가능함

결론 및 참고 정보

차세대 접근성 표준 반영 후, contrast-color()는 알고리듬을 교체해 더 좋은 대비 자동 선택을 지원할 것임
그때까지는 핵심 배경색이 명확히 밝거나 어두운 경우에 특히 유용함
텍스트가 아닌 다양한 UI 요소에도 폭넓게 적용 가능함
APCA(Accessible Perceptual Contrast Algorithm) 같은 최신 접근성 알고리듬에도 계속 관심을 가지는 것이 바람직함