contrast-color() | CSS-Methods

The CSS contrast-color() perform takes a  worth (in addition to a variable) and returns both black or white, whichever is essentially the most contrasting coloration for that worth.

In different phrases, contrast-color() is form of an accessibility device for conforming to WCAG distinction necessities.

.card {
  background-color: var(--swatch);
  coloration: contrast-color(var(--swatch));
}

For instance, on the subsequent demo replace the background coloration to see the textual content coloration change routinely.

The contrast-color() perform is outlined within the CSS Coloration Module Degree 5 specification.

Syntax

The CSS contrast-color() perform syntax is is formatted like this:

contrast-color() = contrast-color(  )

Let’s break that down with examples.

Arguments

/* Utilizing a customized variable */
contrast-color(var(--base-background));

/* Passing a coloration straight */
contrast-color(#34cdf2);
contrast-color(inexperienced);

contrast-color() takes a  as its solely argument and resolves to white or black, relying on which has the very best distinction. If each white and black have the identical distinction stage, the perform defaults to white.

Fundamental utilization

The contrast-color() give us a easy various to defining a number of background and textual content colours, whereas additionally making certain they’re contrasting sufficient. Think about we had the next state of affairs:

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

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

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

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

We outlined a textual content coloration for every background coloration in our variables, and if we had greater than three potential backgrounds, we’d have needed to outline all of them. As a substitute, utilizing contrast-color(), we might outline solely the background coloration for every theme and let the perform return the suitable contrasting coloration for the texts.

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

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

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

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

It is very important observe that contrast-color() continues to be a piece in progress (on the time of this writing), and in some circumstances won’t be acceptable from a design standpoint because it solely returns black or white. Due to this fact, I like to recommend utilizing it solely in easy situations the place both black or white make sense.

In truth, it has some shortcomings which are value noting.

contrast-color() shortcomings

Whereas contrast-color() seems to enhance internet accessibility, it has buts we should always pay attention to earlier than utilizing it.

• It resolves to solely black or white texts. Though the draft guarantees extra management sooner or later, now we have to stay to these two colours for now.
• We’re caught with white when utilizing colours the place neither black nor white is a enough distinction, or they each have the identical distinction.
• contrast-color() solely works with colours for now. So, in circumstances the place you’re working with textual content on background pictures or utilizing font weights to extend distinction, you’ll must discover a completely different method to meet distinction necessities. And even when it may be technically used with gradients, these can also solely go between black to white which could not present sufficient distinction between the gradient colours.
• contrast-color() doesn’t account for the font-size, which is a defining criterion, in selecting a distinction coloration. Hopefully, this can be accounted for sooner or later.

So, on the time of writing, it appears it’s higher to manually outline colours which are contrasting sufficient in our themes as contrast-color() isn’t actually possible proper now.

Older syntax

Based mostly on earlier articles, the contrast-color() perform used to take a number of coloration arguments–the bottom coloration versus a number of contrasting coloration choices to select from:

contrast-color(var(--bg) vs pink, lightgreen, blue)

This syntax now not exists within the draft. It’s one coloration and one coloration solely.

Specification

The contrast-color() perform is outlined within the CSS Coloration Module Degree 5 specification.

Browser assist

Whereas browser assist is restricted on the time of this writing, it’s a good suggestion to incorporate a fallback in case you’re planning to apply it to a mission. We are able to use the @helps at-rule to detect if the browser understands the perform:

.card {
  --bg-color: #2d5a27;
  background-color: var(--bg-color);

  /* Default Fallback */
  coloration: ghostwhite;
}

/* Use the perform if supported */
@helps (coloration: contrast-color(pink)) {
  .card {
    coloration: contrast-color(var(--bg-color));
  }
}

Additional studying:

Associated