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 probably the most contrasting colour 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);
  colour: contrast-color(var(--swatch));
}

For instance, on the following demo replace the background colour to see the textual content colour change routinely.

The contrast-color() perform is outlined within the CSS Shade 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 colour instantly */
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 different 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;
}

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

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

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

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

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

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

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

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

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

The truth is, it has some shortcomings which might be price noting.

contrast-color() shortcomings

Whereas contrast-color() seems to enhance net accessibility, it has buts we should always concentrate on earlier than utilizing it.

• It resolves to solely black or white texts. Though the draft guarantees extra management sooner or later, we now 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 ample 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 photographs or utilizing font weights to extend distinction, you’ll should discover a completely different strategy 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 colour. Hopefully, this shall be accounted for sooner or later.

So, on the time of writing, it appears it’s higher to manually outline colours which might be 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 colour arguments–the bottom colour versus a number of contrasting colour choices to select from:

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

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

Specification

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

Browser help

Whereas browser help 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 will use the @helps at-rule to detect if the browser understands the perform:

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

  /* Default Fallback */
  colour: ghostwhite;
}

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

Additional studying:

Associated