- CSS
contrast-color()는 버튼 배경처럼 자주 바뀌는 색에 맞춰 브라우저가 검정 또는 흰색 텍스트 색을 골라, 색상 쌍을 따로 관리하는 부담을 줄임
color: contrast-color(var(--button-color));처럼 기준 색을 넘기면 배경색 변경에 따라 더 큰 대비를 내는 선택지가 다시 계산됨- 현재 Safari Technology Preview는 WCAG 2 대비 알고리듬을 사용해
#317CFF 배경에서 검정 텍스트를 고르지만, 사람의 지각으로는 흰색이 더 자연스럽게 보일 수 있음
- 이 기능은 접근성을 자동 보장하지 않으며, 팔레트·글자 크기·글꼴 굵기·
prefers-contrast 같은 디자인 검증이 여전히 필요함
- CSS Working Group은 WCAG 3 대비 알고리듬 논의가 끝나기 전까지 기능을 검정/흰색 선택으로 좁혀 제공하며, 더 복잡한 색상 선택 도구는 이후 확장될 수 있음
contrast-color()가 줄여주는 색상 관리 부담
- 웹사이트나 웹 앱에서 여러 배경색의 버튼을 만들 때는 배경이 어두우면 흰색 텍스트, 밝으면 검정 텍스트를 맞춰야 함
- 기존에는
--button-color와 --button-text-color를 함께 정의해 색상 쌍을 관리해야 했고, 큰 프로젝트나 여러 팀이 참여하는 환경에서는 조합을 계속 정확히 유지하기 어려움
contrast-color()는 CSS에서 기준 색을 넘기면 브라우저가 검정 또는 흰색 중 더 대비가 큰 색을 선택함
color: contrast-color(purple);
- 버튼에는 배경색 변수와
contrast-color()를 함께 적용할 수 있음
button {
background-color: var(--button-color);
color: contrast-color(var(--button-color));
}
- 이 방식에서는 하나의 배경색만 정의해도 텍스트 색은 브라우저가 따라 정함
상태별 색상까지 한 변수에서 파생하기
:root {
--button-color: purple;
--hover-color: oklch(from var(--button-color) calc(l + .2) c h);
}
button {
background-color: var(--button-color);
color: contrast-color(var(--button-color));
text-box: cap alphabetic; /* vertically centers the text */
}
button:hover {
background-color: var(--hover-color);
color: contrast-color(var(--hover-color));
}
WCAG 2 기반 계산이 만드는 어색한 결과
contrast-color()는 접근성 대비 문제를 자동으로 모두 해결하지 않음- 어떤 배경색은 검정이나 흰색 어느 쪽과도 충분한 대비를 만들지 못할 수 있어, 디자이너·개발자·테스터의 확인이 필요함
- 2025년 5월 기준 Safari Technology Preview 구현은 WCAG 2 알고리듬을 사용함
#317CFF 파란색 배경에서 WCAG 2는 검정 텍스트 대비를 5.45:1로 계산함- 같은 배경에서 흰색 텍스트 대비는 3.84:1로 계산됨
contrast-color()는 더 큰 숫자인 검정을 선택함
- 사람의 지각으로는 이 조합에서 흰색이 더 나아 보일 수 있으며, WCAG 2 색 대비 알고리듬은 오래전부터 비판을 받아왔음
APCA와 WCAG 3에서 이어지는 대비 알고리듬 논의
- Accessible Perceptual Contrast Algorithm(APCA)는 WCAG 3에 포함될 수 있는 후보 중 하나임
- APCA Contrast Calculator는
#317CFF 배경에서 검정 텍스트를 Lc 38.7, 흰색 텍스트를 Lc -70.9로 평가함
- APCA 점수에서 음수는 텍스트가 배경보다 밝다는 뜻임
- 대비 크기는 부호를 제외한 38.7과 70.9로 비교함
- 이 결과에서는 흰색 텍스트의 대비가 더 높음
- APCA는 단순 수학 비율보다 지각 기반 대비를 중시하며, 사람이 색상과 밝기에 따라 대비를 선형적으로 인식하지 않는다는 점을 반영함
- CSS 표준은 아직 기존 알고리듬 사용을 요구하지만, 향후 다른 대비 알고리듬이 추가될 수 있다는 주석을 포함함
- WCAG 3에서 어떤 알고리듬을 사용할지, 후보 알고리듬의 라이선스를 어떻게 다룰지는 계속 논의 중임
실제 디자인에서 함께 확인할 조건
contrast-color()가 더 나은 색을 고르는 것과 충분한 대비를 보장하는 것은 다름- 특히 중간 톤 색상에서는 알고리듬별 결과 차이가 커질 수 있음
- 더 높은 대비를 원하는 사용자를 위해
prefers-contrast 미디어 쿼리를 함께 사용할 수 있음
@media (prefers-contrast: more) {
/* styling with more contrast */
}
- 예시에서는 나무 묘목장 웹사이트의 브랜드 버튼 배경색으로
#2DAD4E를 사용함
- APCA 기준 흰색 텍스트와의 대비는 Lc -60.4임
- 이 값이 충분한지는 텍스트 크기와 글꼴 굵기에 따라 달라짐
- APCA는 WCAG 2의 비율 대신 Lc -108부터 106까지의 단일 점수를 사용함
- APCA Readability Criterion은 Bronze, Silver, Gold 수준의 목표를 제시해 글자 크기와 굵기 선택에 도움을 줌
- 예시 계산에서는 흰색 텍스트와
#2DAD4E 조합이 24px 텍스트에 font-weight 400 이상이면 동작하고, font-weight 300을 쓰려면 최소 41px가 필요함
- 더 높은 대비를 요청한 사용자에게는 라이트 모드와 다크 모드에 별도 색을 지정할 수 있음
- 라이트 모드: 더 어두운 초록과 흰색 텍스트, Lc -76.1
- 다크 모드: 더 밝은 초록과 검정 텍스트, Lc 75.2
--button-color: #2DAD4E; /* brand green background */
@media (prefers-contrast: more) {
@media (prefers-color-scheme: light) {
--button-color: #419543; /* darker green background */
}
@media (prefers-color-scheme: dark) {
--button-color: #77CA8B; /* lighter green background */
}
}
button {
background-color: var(--button-color);
color: contrast-color(var(--button-color));
font-size: 1.5rem; /* 1.5 * 16 = 24px at normal zoom */
font-weight: 500;
}
- 현재 환경에서는 WCAG 2 알고리듬이
contrast-color()를 구동하므로 이 예시 웹사이트에는 사용하기 어려울 수 있음
- 브랜드 색이 더 어두운 초록이고 검정/흰색 선택이 올바르게 나오는 프로젝트에서는 지금도 유용할 수 있음
- enabled/disabled, light/dark mode,
prefers-contrast처럼 여러 상태나 옵션의 색을 정의할 때 contrast-color()가 특히 도움이 됨
검정/흰색 선택으로 먼저 제한된 이유
- 현재
contrast-color()는 Safari Technology Preview 122에 있던 color-contrast()보다 기능이 크게 단순화됨
- CSS Working Group은 WCAG 3 대비 알고리듬 논의가 끝나지 않은 상태에서, 우선 기준 색과 대비되는 검정 또는 흰색만 고르는 도구로 진행함
- 선택지를 검정/흰색으로 고정하면 나중에 WCAG 2 알고리듬이 바뀌어도 웹사이트가 깨질 가능성이 줄어듦
- 향후에는 사용자 정의 색상 목록에서 브라우저가 선택하거나, 원하는 대비 수준을 지정하는 더 강력한 도구가 나올 수 있음
contrast-color()는 텍스트 색뿐 아니라 배경, 테두리 등 색을 지정하는 여러 속성에 사용할 수 있음
