Color contrastante() | Consejos CSS

CSS contrast-color() La función requiere un <color> valor (y una variable) y devuelve blanco o negro, el color que tenga el mayor contraste para ese valor.

en otras palabras, contrast-color() Es una herramienta auxiliar que cumple con los siguientes requisitos Requisitos de comparación de las WCAG.

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

Por ejemplo, actualice el color de fondo en la siguiente demostración para ver cómo el color del texto cambia automáticamente.

este contrast-color() La función está definida en Módulo de color CSS Nivel 5 Especificación.

sintaxis

CSS contrast-color() El formato de la sintaxis de la función es el siguiente:

contrast-color() = contrast-color( <color> )

Expliquemoslo con un ejemplo.

argumento

/* Using a custom variable */
contrast-color(var(--base-background));

/* Passing a color directly */
contrast-color(#34cdf2);
contrast-color(green);

contrast-color() necesito uno <color> como único argumento y se resuelve en blanco o negro, dependiendo de cuál tenga mayor contraste. Si el blanco y el negro tienen la misma relación de contraste, la función está preestablecida en blanco.

Uso básico

este contrast-color() Brindándonos una alternativa simple para definir múltiples colores de fondo y texto y al mismo tiempo garantizar que tengan suficiente contraste. Imaginemos que tenemos el siguiente escenario:

: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);
}

Definimos el color del texto para cada color de fondo en la variable, si tenemos más de tres fondos posibles, debemos definirlos todos. En su lugar, utilice contrast-color()podríamos simplemente definir un color de fondo para cada tema y hacer que la función devuelva el color de contraste de texto apropiado.

: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-bg));
  background-color: var(--tertiary-bg);
}

Es importante tener en cuenta contrast-color() todavía en progreso (En el momento de escribir este artículo), puede que no sea apropiado desde una perspectiva de diseño en algunos casos, ya que solo devolverá blanco o negro. Por lo tanto, recomiendo usarlo sólo en escenas simples donde tanto el blanco como el negro tengan sentido.

De hecho, tiene algunos inconvenientes notables.

contrast-color() defecto

a pesar de contrast-color() Parece mejorar la accesibilidad web, tiene pero Debemos entenderlo antes de usarlo.

• Solo resuelve texto en blanco o negro. Si bien el borrador promete más control en el futuro, por ahora tenemos que ceñirnos a estos dos colores.
• Cuando ni el blanco ni el negro son suficientes para crear suficiente contraste, sólo podemos elegir el blancoo todos tienen el mismo contraste.
• contrast-color() Por el momento solo disponible para colores. Entonces, si está trabajando con texto sobre una imagen de fondo o usando el peso de la fuente para aumentar el contraste, tendrá que encontrar una manera diferente de cumplir con sus requisitos de contraste. Aunque técnicamente funciona con degradados, estos sólo varían del negro al blanco, lo que puede no proporcionar suficiente contraste entre los colores degradados.
• contrast-color() no consideres font-sizeque es un criterio definitorio para elegir colores contrastantes. Esperemos que esto se tenga en cuenta en el futuro.

Entonces, al momento de escribir esto, parece mejor definir manualmente los colores que tengan suficiente contraste en nuestro tema, como se muestra a continuación. contrast-color() Aún no es muy factible.

sintaxis anterior

Basado en anterior artículoeste contrast-color() La función se utiliza para tomar múltiples color Parámetros: color base y múltiples opciones de colores contrastantes para elegir:

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

Esta sintaxis ya no existe en el borrador. Viene en un solo color y en un solo color.

Especificación

este contrast-color() La función está definida en Módulo de color CSS Nivel 5 Especificación.

Soporte del navegador

Si bien la compatibilidad con el navegador es limitada al momento de escribir este artículo, es una buena idea incluir una versión alternativa si planea usarla en su proyecto. podemos usar @supports regla-at para detectar si el navegador comprende la función:

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

  /* Default Fallback */
  color: ghostwhite;
}

/* Use the function if supported */
@supports (color: contrast-color(red)) {
  .card {
    color: contrast-color(var(--bg-color));
  }
}

Lectura adicional:

Importante