Comprobador de contraste de colores

Compara los colores del texto y del fondo. Consulta su relación de contraste y comprueba los umbrales numéricos WCAG para texto normal, texto grande y detalles esenciales de la interfaz.

Colores

HEX del primer plano

Tres o seis dígitos HEX, con # opcional.

HEX del fondo

Tres o seis dígitos HEX, con # opcional.

Opacidad del primer plano (%)

0–100 %, con hasta dos decimales. El fondo es opaco.

Al intercambiar los colores, la opacidad permanece en el primer plano.

Resultado del contraste

Introduce ambos colores y una opacidad válida para ver el contraste.

La comparación se realiza en el navegador sin cargas añadidas por la herramienta ni historial de colores guardado. El informe solo se escribe en el portapapeles cuando solicitas copiarlo. Los servicios habituales del sitio y las opciones de consentimiento son independientes.

Comprueba un par de colores

Introduce cada color como HEX de tres o seis dígitos o usa su selector. El fondo debe ser sólido y opaco.
Deja la opacidad del primer plano al 100 % para texto opaco o introduce un porcentaje menor. Los resultados se actualizan cuando los tres valores son válidos.
Consulta la relación y los resultados separados para texto normal, texto grande y elementos no textuales. Revisa el contexto real del diseño y copia el informe con sus aclaraciones si necesitas compartirlo.

Cómo interpretar los resultados

Para texto normal, los umbrales numéricos son 4,5:1 en AA y 7:1 en AAA. El cálculo compara la luminancia relativa, no la diferencia entre los nombres de los colores.

Para texto grande, los umbrales son 3:1 en AA y 4,5:1 en AAA. Se considera grande al menos 18 pt normal o 14 pt en negrita, o un tamaño equivalente en otras escrituras: aproximadamente 24 y 18,67 píxeles CSS. Aun así, hay que revisar la tipografía real.

La opacidad del primer plano cambia el color efectivo sobre el fondo indicado. Al 100 % es opaco; al 0 % desaparece en el fondo y la relación es 1:1. La transparencia del fondo queda fuera del alcance.

La fila no textual de 3:1 compara este par para detalles visuales esenciales frente al color adyacente. Las decisiones usan la relación sin redondear; las dos cifras decimales solo facilitan la lectura.

Ejemplos que puedes comprobar

Negro #000000 sobre blanco #FFFFFF con opacidad del 100 % da 21:1 y alcanza los cinco umbrales numéricos mostrados. Intercambiar los colores opacos no cambia la relación.

Gris #777777 sobre blanco da aproximadamente 4,48:1. No alcanza 4,5:1 para texto normal en AA, aunque supera 3:1 para texto grande en AA.

Negro al 50 % de opacidad sobre blanco da aproximadamente 3,98:1 en este cálculo sRGB. Reducir la opacidad puede disminuir el contraste incluso si el par opaco original tiene mucho contraste.

Comprobar el par es solo parte de la accesibilidad

La herramienta evalúa colores sRGB sólidos, con fondo opaco y opacidad opcional del primer plano. No inspecciona páginas ni fuentes, no toma muestras de imágenes o degradados, no simula la visión del color ni evalúa todos los requisitos y excepciones WCAG.

Alcanzar un umbral numérico no certifica la accesibilidad de una página o producto. Revisa el tamaño y peso reales del texto, los colores adyacentes, las formas y estados significativos y otros requisitos. La representación y el suavizado también afectan a la legibilidad.

Cálculo en el navegador

La comparación se realiza en el navegador sin cargas añadidas por la herramienta ni historial de colores guardado. El informe actual solo se escribe en el portapapeles cuando solicitas copiarlo. Los servicios habituales del sitio y las opciones de consentimiento son independientes.

Preguntas sobre el contraste de colores

No. Solo significa que el par alcanza el umbral numérico mostrado. Hay que evaluar el uso real, la tipografía, las excepciones y los demás requisitos pertinentes.

Al menos 18 pt normal o 14 pt en negrita, o un tamaño equivalente en otras escrituras. Comprueba el tamaño y peso reales sin suponer que todo encabezado es grande.

Un valor como 4,499 se muestra como 4,50 al redondearlo, pero sigue por debajo de 4,5. La comparación usa el valor sin redondear.

Esta versión acepta RGB HEX de tres o seis dígitos. Ajusta la opacidad del primer plano en el campo separado. No se aceptan funciones CSS, HEX con alfa ni fondos transparentes.

Los valores de color se intercambian y la opacidad permanece en el primer plano. Los pares opacos conservan la relación; un par semitransparente puede dar otro resultado.

Fuentes y método

Los resultados solo evalúan el contraste numérico del par introducido; no acreditan el cumplimiento de WCAG.

SVG a PNG

Convierte un archivo SVG local o código pegado en PNG, con dimensiones definidas, transparencia y fuentes incluidas.

Abrir herramienta — SVG a PNG

Generador de filtros CSS

Ordena y repite efectos CSS, compara una muestra y copia la declaración exacta.

Abrir herramienta — Generador de filtros CSS

Calculadora de tamaño de fuente fluido

Define el tamaño de fuente para dos anchos de ventana gráfica. Copia el CSS relativo a la raíz y consulta el modelo calculado con los mismos coeficientes exportados.

Abrir herramienta — Calculadora de tamaño de fuente fluido

Generador de botones CSS

Diseña los estados de un botón nativo, comprueba el foco y copia HTML y CSS.

Abrir herramienta — Generador de botones CSS

Generador CSS de border-radius

Edita ocho radios, previsualiza una caja y copia el CSS en píxeles o porcentajes.

Abrir herramienta — Generador CSS de border-radius

Generador CSS Grid

Crea un ejemplo de CSS Grid con pistas, ubicación y áreas con nombre. Previsualiza, copia CSS o HTML y descarga el ejemplo completo.

Abrir herramienta — Generador CSS Grid

Generador CSS Flexbox

Cree un ejemplo de Flexbox con controles de elementos y contenedores, ejes de diseño explícitos, CSS y HTML coincidentes y una descarga local completa del ejemplo.

Abrir herramienta — Generador CSS Flexbox

Generador CSS de sombras de texto

Crea sombras de texto ordenadas, previsualiza texto plano y copia el CSS exacto.

Abrir herramienta — Generador CSS de sombras de texto

Generador de transformación CSS

Redacte transformaciones CSS 2D repetibles, edite px o porcentaje de traducción y origen, inspeccione un cuadro de referencia y copie las declaraciones actuales exactas.

Abrir herramienta — Generador de transformación CSS