CSS contrast-color() 완벽 가이드 배경색만 정하면 텍스트 색상이 자동으로?

왜 contrast-color()가 필요할까?

웹 개발을 하다 보면 배경색에 따라 텍스트 색상을 자동으로 바꿔야 하는 상황이 자주 발생합니다. 예를 들어 사용자가 테마 색상을 커스터마이징할 수 있는 설정 페이지나, 다크 모드/라이트 모드를 지원하는 대시보드를 만들 때가 대표적이죠. 이때마다 우리는 다음과 같은 고민을 하게 됩니다.

• 배경이 어두우면 텍스트는 밝게, 배경이 밝으면 텍스트는 어둡게.
• WCAG(Web Content Accessibility Guidelines) 대비율을 충족해야 함.
• 다양한 색상 변수를 일일이 정의하는 건 비효율적.

이런 문제를 해결하기 위해 CSS Color Module Level 5에는 contrast-color()라는 함수가 제안되었습니다. 이 함수는 배경색을 인자로 받아서 자동으로 대비가 가장 높은 검정(#000) 또는 흰색(#fff)을 반환합니다. 즉, 우리는 배경색만 정의하면 텍스트 색상은 브라우저가 알아서 선택해 주는 것이죠.

이 글에서는 contrast-color()의 기본 문법과 활용 예제, 그리고 실무에서 주의해야 할 점까지 자세히 알아보겠습니다. 특히 접근성(웹 표준)에 관심이 많은 프론트엔드 개발자라면 이 함수가 앞으로 어떻게 발전할지 주목할 필요가 있습니다.

참고로, CSS 접근성과 관련된 더 많은 팁은 CSS Color-Contrast()로 접근성 테마 디자인 관리하기 글에서도 확인할 수 있습니다.

contrast-color() 기본 문법과 사용법

contrast-color() 함수의 문법은 다음과 같습니다.

/* 사용자 정의 변수 사용 */
contrast-color(var(--base-background));

/* 색상 값 직접 전달 */
contrast-color(#34cdf2);
contrast-color(green);

함수는 단 하나의 인자(색상)만 받으며, 그 색상과 가장 대비가 높은 색상을 반환합니다. 만약 검정과 흰색의 대비가 동일하다면 기본값으로 흰색을 반환합니다.

실전 예제: 여러 테마 색상 관리하기

기존에는 각 테마별로 텍스트 색상을 일일이 지정해야 했습니다.

:root {
  --primary-text: #f1f8e9;
  --primary-bg: #2d5a27;
  --secondary-text: #311b92;
  --secondary-bg: #d1c4e9;
  --tertiary-text: #002b36;
  --tertiary-bg: #ff5722;
}

.primary {
  color: var(--primary-text);
  background-color: var(--primary-bg);
}

.secondary {
  color: var(--secondary-text);
  background-color: var(--secondary-bg);
}

.tertiary {
  color: var(--tertiary-text);
  background-color: var(--tertiary-bg);
}

하지만 contrast-color()를 사용하면 배경색만 정의하고 텍스트는 자동으로 대비되는 색을 사용할 수 있습니다.

:root {
  --primary: #2d5a27;
  --secondary: #d1c4e9;
  --tertiary: #ff5722;
}

.primary {
  color: contrast-color(var(--primary));
  background-color: var(--primary);
}

.secondary {
  color: contrast-color(var(--secondary));
  background-color: var(--secondary);
}

.tertiary {
  color: contrast-color(var(--tertiary));
  background-color: var(--tertiary);
}

이렇게 하면 코드가 훨씬 간결해지고, 나중에 테마 색상을 변경해도 텍스트 색상을 따로 수정할 필요가 없어집니다. 특히 커스텀 테마 기능을 제공하는 서비스에서 유용하게 활용할 수 있습니다.

브라우저 지원이 아직 부족할 때: 폴백(fallback) 전략

현재(2025년 기준) contrast-color()는 아직 초안 단계이고 브라우저 지원이 제한적입니다. 따라서 실제 프로젝트에 적용하려면 @supports 규칙을 활용해 폴백을 마련하는 것이 안전합니다.

.card {
  --bg-color: #2d5a27;
  background-color: var(--bg-color);
  /* 기본 폴백 */
  color: ghostwhite;
}

/* 함수가 지원되는 경우에만 적용 */
@supports (color: contrast-color(red)) {
  .card {
    color: contrast-color(var(--bg-color));
  }
}

이렇게 하면 지원하지 않는 브라우저에서는 기본 색상이 적용되고, 지원하는 환경에서는 자동 대비 색상이 적용되어 점진적인 향상(Progressive Enhancement)을 이룰 수 있습니다.

contrast-color()의 한계와 주의사항

contrast-color()는 편리하지만, 현재 스펙 기준으로 몇 가지 아쉬운 점이 있습니다.

1. 오직 검정 또는 흰색만 반환

함수는 검정과 흰색 중 하나만 반환합니다. 디자인적으로 더 다양한 색상이 필요하거나, 검정과 흰색으로는 충분한 대비를 확보하기 어려운 경우에는 직접 색상을 지정하는 것이 좋습니다.

2. 대비가 동일하면 무조건 흰색

검정과 흰색의 대비가 동일한 색상(예: 중간 회색)에서는 항상 흰색을 반환합니다. 이는 의도와 다를 수 있습니다.

3. 이미지나 그라데이션에는 사용 불가

이 함수는 색상 값만 지원하므로, 배경 이미지나 그라데이션 위의 텍스트에는 적용할 수 없습니다. 그라데이션을 사용할 때는 중간 색상에 대한 대비를 보장할 수 없기 때문에 주의해야 합니다.

4. 폰트 크기와 굵기를 고려하지 않음

WCAG 기준은 대비율뿐만 아니라 폰트 크기와 굵기에 따라 기준이 달라집니다. 하지만 현재 contrast-color()는 이러한 요소를 전혀 고려하지 않습니다. 예를 들어 작은 텍스트는 더 높은 대비가 필요한데, 함수는 항상 동일한 기준으로 색상을 선택합니다.

5. 브라우저 지원 부족

실제로 사용 가능한 브라우저가 아직 많지 않습니다. 특히 한국 웹 환경에서는 여전히 구형 브라우저 사용자가 있기 때문에, 이 함수에만 의존하는 것은 위험할 수 있습니다.

이러한 한계를 고려할 때, 현재는 단순한 UI 컴포넌트(예: 배지, 버튼)에 한정해 사용하거나, 폴백을 항상 포함하는 전략이 필요합니다.

한국 개발 생태계에서의 적용 맥락

한국에서는 카카오, 네이버, 토스 등 대형 플랫폼에서 웹 접근성 관련 인증(예: 과학기술정보통신부 웹 접근성 품질인증)을 중요하게 여기고 있습니다. contrast-color()가 브라우저에 널리 지원된다면, 공공기관이나 대기업 사이트에서 일관된 접근성 유지에 큰 도움이 될 것입니다.

특히 다크 모드를 지원하는 서비스에서 유용합니다. 시스템 설정에 따라 배경색이 바뀌는 경우, 텍스트 색상을 자동으로 조정해 주기 때문에 개발자의 수동 작업이 줄어듭니다. 하지만 아직 브라우저 지원이 제한적이므로, 실제 서비스에 적용하기 전에 Azure Red Hat OpenShift가 그리는 AI 프로덕션의 미래와 같은 최신 기술 트렌드를 참고해 신중하게 도입 시점을 결정하는 것이 좋습니다.

결론: 지금 바로 쓸 수는 없지만, 미리 알아두면 좋은 함수

contrast-color()는 CSS Color Module Level 5에서 제안된 유용한 함수로, 배경색만으로 텍스트 색상을 자동으로 선택할 수 있게 해줍니다. 코드가 간결해지고 접근성도 향상되지만, 현재 스펙과 브라우저 지원의 한계로 인해 실무에서 바로 사용하기에는 이릅니다.

다음 단계로 추천하는 학습 방향은 다음과 같습니다.

• CSS Color Module Level 5 스펙의 다른 기능들(예: color-mix(), relative color 등)을 살펴보세요.
• 웹 접근성에 대한 전반적인 이해를 높이기 위해 WCAG 2.2 가이드라인을 학습해 보세요.
• 실제 프로젝트에서 @supports를 활용한 폴백 전략을 연습해 보세요.

앞으로 이 함수가 발전하여 다양한 색상 선택과 폰트 크기 반영이 가능해진다면, 프론트엔드 개발자의 삶이 한층 편리해질 것입니다. 그때까지는 비슷한 기능을 하는 CSS 함수나 라이브러리를 활용해 접근성을 유지하는 것이 좋습니다.

함께 보면 좋은 글:

• 메타 레이밴 디스플레이 제작기: 차세대 AI 안경의 도전과 해결 과정
• CSS Color-Contrast()로 접근성 테마 디자인 관리하기