RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/contrast-color below:

contrast-color() - CSS | MDN

contrast-color(red)
contrast-color(var(--backgroundColor))

Parameters

color: Any valid <color> value.

Return value

A <named-color> of either white or black.

Description

The contrast-color() function returns a value of white or black, depending on which value has the greatest contrast with the input color. If both white and black have the same contrast with the input color, white is returned.

Warning: WCAG AA (4.5:1) contrast is not capable of producing clearly readable text in all cases. Mid-tone background colors generally don't provide enough contrast with either black or white foreground. For example, contrast-color() on a royal bluish (#2277d3) background produces black text, which is not readable for small text. It is recommended, therefore, to use light or dark colors with the contrast-color() function.

Examples Contrasting text for a button

In the following example, the browser automatically applies a contrasting color to the submit <button> text when you change its background color.

<label>
  Select background color of the button:
  <input type="color" id="colorPicker" value="#660066" />
</label>
<br />
<button>Submit</button>

:root {
  --button-color: lightblue;
}

button {
  background-color: var(--button-color);

  /* Set contrasting text color automatically */
  color: contrast-color(var(--button-color));
}

body {
  padding: 1rem;
}

button {
  margin: 3rem;
  padding: 1rem;
  width: 150px;
  font-size: 2rem;
  border-radius: 1rem;
}

@supports not (color: contrast-color(red)) {
  body::before {
    content: "Your browser doesn't support the contrast-color() function.";
    background-color: wheat;
    display: block;
    width: 100%;
    text-align: center;
  }

  body > * {
    display: none;
  }
}

const colorPicker = document.getElementById("colorPicker");
const root = document.documentElement;

function updateColor(color) {
  root.style.setProperty("--button-color", colorPicker.value);
}

colorPicker.addEventListener("change", updateColor);
updateColor();

Light and dark mode usage

In the following example, the prefers-color-scheme media query is used to set a background color based on operating system or browser color scheme settings. The contrast-color() function is used to set the text color automatically.

Try changing the browser or OS dark mode setting to see the effect.

<pre>
    Q: How does CSS transform light into energy?
  Ans: Using <a href="/en-US/docs/Web/CSS/font-synthesis">font-synthesis</a>.
</pre>

:root {
  --background-color: navy;
}

@media (prefers-color-scheme: light) {
  :root {
    --background-color: wheat;
  }
}

body,
a {
  background-color: var(--background-color);
  color: contrast-color(var(--background-color));
}

body {
  padding: 2rem;
  font-size: 1.2rem;
}

pre {
  margin-top: 3rem;
}

@supports not (color: contrast-color(red)) {
  body::before {
    content: "Your browser doesn't support the contrast-color() function.";
    background-color: wheat;
    display: block;
    width: 100%;
    text-align: center;
  }

  body {
    background-color: white;
  }

  body > * {
    display: none;
  }
}

Specifications Browser compatibility

Loadingâ¦