Automatic contrasting colour
type: TechArticle
description: Let the browser pick a legible black or white foreground for a dynamic background with the CSS contrast-color() function, instead of hard-coding colour pairs or computing luminance in JavaScript.
language: en
is part of: Web Specification Studio
author: Web Specification Studio
publisher: Web Specification Studio
license: https://creativecommons.org/licenses/by/4.0/
date modified: 2026-07-04T00:00:00.000Z
citation: CSS Color Module Level 5 — contrast-color()
  type: CreativeWork
  publisher: W3C CSS Working Group
citation: WCAG 1.4.3 — Contrast (Minimum) (Level AA)
  type: CreativeWork
  publisher: W3C
citation: MDN — contrast-color()
  type: CreativeWork
  publisher: MDN
citation: How to have the browser pick a contrasting color in CSS
  type: CreativeWork
  publisher: WebKit

Web Specification Studio
type: WebSite

Web Specification Studio
type: Organization

breadcrumb
type: BreadcrumbList
item list element: Home
  type: ListItem
  position: 1
  item: https://webspecification.com/
item list element: Spec
  type: ListItem
  position: 2
  item: https://webspecification.com/spec/
item list element: Accessibility
  type: ListItem
  position: 3
  item: https://webspecification.com/spec/accessibility/
item list element: Automatic contrasting colour
  type: ListItem
  position: 4
  item: https://webspecification.com/spec/accessibility/contrast-color/