jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis Generador de funcion CSS contrast-color()

Genere expresiones contrast-color() CSS que seleccionan automaticamente el color de texto mas legible de una lista.

Cargando herramienta...

Qué es Generador de funcion CSS contrast-color()?

La funcion CSS contrast-color() (Baseline 2026) selecciona el color con la relacion de contraste mas alta de una lista de candidatos contra un fondo especificado. Con contrast-color(background vs color1, color2, ...), proporciona el color de fondo y una lista de colores candidatos. La funcion evalua la relacion de contraste WCAG de cada candidato contra el fondo y devuelve el candidato con la mejor relacion. La palabra clave opcional to max indica a la funcion que siempre devuelva el candidato de maximo contraste. Es una alternativa CSS nativa al cambio de color de texto basado en JavaScript.

Respuesta rápida

Use CSS contrast-color(background vs candidates...) para seleccionar automaticamente el color mas legible de una lista. Funciona en Chrome 132+, Edge 132+, Safari 19+ y Firefox 136+. Admitte el modo to max para maximo contraste o el orden de lista de prioridad para preferencia de color de marca.

Last updated: 2026-05-30

Limitaciones

  • contrast-color() no es compatible con navegadores anteriores a Chrome 132, Safari 19 o Firefox 136. Proporcione siempre un color de fallback antes de la declaracion contrast-color().
  • La funcion evalua el contraste basandose en la luminancia relativa, que es una aproximacion matematica de la percepcion humana del color. Dos colores con relaciones de contraste identicas pueden leerse de manera diferente segun el tono, la saturacion y el contexto circundante.
  • contrast-color() selecciona un solo color de la lista de candidatos. No puede generar colores intermedios, combinar candidatos ni ajustar la opacidad.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Ingrese el color de fondo contra el cual se medira el contraste. Puede ser un valor de color hex, rgb, hsl o con nombre.
  2. Agregue colores candidatos: la funcion evalua cada uno contra el fondo y selecciona la mejor coincidencia. Puede reordenar los candidatos para el modo to max.
  3. Elija el modo de contraste: to max siempre selecciona el candidato de mayor contraste, u omitelo para usar prioridad ordenada (el primer candidato por encima del umbral minimo gana).
  4. Copie la expresion contrast-color() generada en su hoja de estilos y reemplace los colores candidatos con referencias a sus tokens de diseno.

Para qué puedes usarla

  • Estilizar superposiciones de texto en imagenes hero y banners donde el texto debe permanecer legible independientemente del color de fondo o la imagen.
  • Construir componentes de etiquetas que ajusten automaticamente el color del texto de la etiqueta segun el color de fondo de la etiqueta.
  • Crear un sistema de botones dinamico donde el color del texto del boton se adapte al fondo del boton principal sin escribir multiples variantes de color.

Casos de uso

Ejemplos prácticos

Ejemplo

Superposicion de texto en seccion hero

Un banner hero tiene un gradiente de fondo que alterna entre secciones oscuras y claras. Use contrast-color(var(--hero-bg) vs white, black, var(--accent)) como color del encabezado. El encabezado usa automaticamente blanco en secciones oscuras y negro en secciones claras sin media queries ni JavaScript.

Ejemplo

Componente de etiqueta con colores dinamicos

Un componente de etiqueta recibe su color de fondo como una propiedad personalizada CSS. Use contrast-color(var(--tag-bg) to max vs white, var(--tag-text)) para el color de la etiqueta. El modo to max asegura la maxima legibilidad.

Errores comunes

  • Usar el modo to max cuando se pretende una prioridad de color especifica: to max siempre devuelve el candidato de mayor contraste, ignorando el orden de los candidatos.
  • Asumir que contrast-color() se recalcula cuando el fondo cambia: como cualquier funcion CSS, se evalua una vez por renderizacion del elemento. Si el fondo cambia dinamicamente, contrast-color() se reevalua naturalmente.
  • Usar demasiados colores candidatos: cada candidato adicional aumenta el computo de contraste. Dos o tres candidatos bien elegidos (claro, oscuro, acento) cubren la mayoria de los sistemas de diseno.

Verificación

  1. Pruebe la expresion contrast-color() con multiples colores de fondo cambiando el valor de fondo en el panel Styles de DevTools y observando que el valor de color se resuelva al candidato esperado.
  2. Inspeccione el valor de color calculado en Chrome DevTools para confirmar que contrast-color() se resuelve correctamente, luego pruebe con el verificador de contraste de color de DevTools.

FAQ

Preguntas sobre Generador de funcion CSS contrast-color()

Como calcula contrast-color() la relacion de contraste?

La funcion usa el algoritmo de luminancia relativa WCAG 2.2 para calcular la relacion de contraste entre cada color candidato y el color de fondo. La luminancia relativa considera la percepcion humana de diferentes canales de color. La relacion varía de 1:1 (luminancia identica) a 21:1 (negro sobre blanco).

Que navegadores admiten contrast-color() en 2026?

contrast-color() es Baseline 2026, compatible con Chrome 132+, Edge 132+, Safari 19+ y Firefox 136+. Safari 18 y anteriores, asi como versiones antiguas de Chromium, no reconocen la funcion. Para compatibilidad multiplataforma, use la funcion como mejora progresiva con un color de fallback manual declarado primero.

Puedo usar propiedades personalizadas CSS dentro de contrast-color()?

Si. Todos los argumentos de color para contrast-color() aceptan propiedades personalizadas CSS, incluyendo referencias var() para el color de fondo y cada candidato. Esta es la forma mas practica de usar la funcion en un sistema de diseno.

Que sucede si ninguno de los candidatos alcanza el contraste WCAG AA?

La funcion aun devuelve el candidato con la relacion de contraste mas alta, independientemente de si algun candidato cumple con un umbral WCAG especifico. Con el modo to max, siempre devuelve el mejor candidato posible. Para cumplimiento WCAG AA/AAA real, combine contrast-color() con verificaciones de color-contrast() explicitas.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también