Verificador de Contraste de Color

Comprueba el ratio de contraste WCAG AA y AAA entre colores de primer plano y fondo

Prueba un ejemplo

Color de primer plano (texto)

Color de fondo

Muestra de texto grande (18px negrita)

Muestra de texto normal — así aparecerá el cuerpo de texto sobre el color de fondo que hayas elegido.

Ratio de contraste

14.63:1

Conformidad WCAG

Aprobado

Normal AA

Aprobado

Normal AAA

Aprobado

Grande AA

Aprobado

Grande AAA

WCAG AATexto normal: 4.5:1, Texto grande (18px+ o 14px negrita): 3:1

WCAG AAATexto normal: 7:1, Texto grande (18px+ o 14px negrita): 4.5:1

¿Qué es la verificación de contraste de color?

La verificación de contraste de color mide la diferencia de luminancia entre un color de primer plano (habitualmente texto) y un color de fondo, y expresa el resultado como un ratio. Un ratio de 1:1 significa que los colores son idénticos; 21:1 es el máximo, que representa negro sobre blanco o viceversa. Las Pautas de Accesibilidad para el Contenido Web (WCAG), publicadas por el W3C, definen los ratios de contraste mínimos que debe cumplir el texto para que las personas con baja visión o deficiencias en la percepción del color puedan leerlo.

La fórmula del ratio de contraste proviene de WCAG 2.x y se basa en la luminancia relativa, una medida del brillo aparente de un color para el ojo humano. La luminancia relativa se calcula linealizando cada canal sRGB (eliminando la gamma) y ponderando los canales según los coeficientes ITU-R BT.709: 0,2126 para el rojo, 0,7152 para el verde y 0,0722 para el azul. El verde contribuye más porque el ojo humano es más sensible a la luz verde. El ratio resultante es (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia del color más claro.

WCAG define dos niveles de conformidad. El nivel AA exige un ratio de contraste de al menos 4,5:1 para texto de tamaño normal y 3:1 para texto grande (18px o superior, o 14px en negrita). El nivel AAA eleva el listón a 7:1 y 4,5:1 respectivamente. WCAG 2.1 también introdujo el Criterio de Éxito 1.4.11, que requiere un ratio de 3:1 para componentes de interfaz no textuales como bordes, iconos e indicadores de foco.

¿Por qué usar este verificador de contraste?

Evaluar el contraste a simple vista no es fiable. Los colores que parecen diferenciados en tu monitor calibrado pueden confundirse en una pantalla de baja calidad, bajo la luz solar directa o para alguien con deuteranopía. Un ratio numérico elimina las conjeturas y te da un veredicto de aprobado o reprobado frente al estándar WCAG.

Cálculo de ratio instantáneo
Elige o escribe dos colores y observa cómo el ratio de contraste se actualiza en tiempo real. Sin formularios que enviar, sin recargar la página.
🔒
Procesamiento con privacidad primero
El cálculo de luminancia se ejecuta completamente en tu navegador. Ningún valor de color sale de tu equipo, y ninguna cookie ni herramienta de análisis registra tus elecciones.
🎯
Veredictos AA y AAA
Los resultados muestran el estado de aprobado/reprobado para WCAG AA y AAA, tanto para texto normal como para texto grande, de modo que sepas exactamente qué umbrales cumples.
📋
Sin cuenta requerida
Abre la página y empieza a probar. Sin registro, sin límites de uso. La herramienta funciona sin conexión una vez que la página se ha cargado.

Casos de uso del verificador de contraste

Desarrollo frontend
Antes de publicar un cambio en la interfaz, pega el color de texto y el fondo de tu CSS en el verificador para confirmar que el par cumple WCAG AA. Esto detecta fallos de contraste antes de que lleguen a la revisión de código o a las auditorías automatizadas.
Entrega de diseño
Los diseñadores pueden verificar que cada par de colores en un archivo de Figma supera el nivel WCAG requerido antes de entregar las especificaciones a los ingenieros. Corregir el contraste en la fase de diseño es mucho más barato que corregirlo tras la implementación.
Auditoría de accesibilidad
Los ingenieros de QA que realizan una auditoría WCAG pueden revisar combinaciones de colores específicas marcadas por herramientas automatizadas como Lighthouse o axe. El verificador confirma el ratio exacto y qué niveles superan o no la prueba.
Tokens de sistema de diseño
Al definir tokens de color para un sistema de diseño, prueba cada par de primer plano y fondo para garantizar que la paleta de tokens cumple AA como mínimo. Documenta los ratios junto a los tokens para que los equipos que los utilicen confíen en las elecciones realizadas.
Pruebas de plantillas de correo
Los clientes de correo eliminan funciones CSS como la opacidad y los modos de fusión, por lo que los colores renderizados pueden diferir de los del código fuente. Prueba los valores finales de primer plano y fondo que llegan a la bandeja de entrada para verificar su legibilidad.
Estudio de estándares de accesibilidad
Los estudiantes que aprenden WCAG pueden experimentar con distintos pares de colores y ver al instante cómo cambia el ratio. Ajustar un canal a la vez genera una comprensión práctica de cómo se relaciona la luminancia con el contraste percibido.

Requisitos de ratio de contraste WCAG

La tabla siguiente resume los ratios de contraste mínimos exigidos por WCAG 2.1 para distintos tipos de contenido y niveles de conformidad. El texto grande se define como 18px (24 píxeles CSS) o superior con peso normal, o 14px (18,66 píxeles CSS) o superior con peso negrita.

NivelRatio mínimoAplica aNota
AA Normal text4.5 : 1Body text, paragraphs, labelsMinimum for most UI text
AA Large text3.0 : 1Text >= 18px, or >= 14px boldMinimum for headings
AA UI components3.0 : 1Borders, icons, focus indicatorsNon-text contrast (WCAG 1.4.11)
AAA Normal text7.0 : 1Body text at highest standardEnhanced readability
AAA Large text4.5 : 1Large text at highest standardEnhanced for headings

Luminancia, AA y AAA explicados

El cálculo del ratio de contraste tiene tres etapas: calcular la luminancia de cada color, derivar el ratio y compararlo con los umbrales WCAG.

Luminancia relativa
Un número único de 0 (negro) a 1 (blanco) que representa el brillo aparente de un color. Tiene en cuenta la curva gamma no lineal de sRGB y la sensibilidad desigual del ojo humano al rojo, verde y azul. El verde puro (#00FF00) tiene una luminancia de 0,7152, mientras que el azul puro (#0000FF) tiene solo 0,0722.
WCAG AA
El nivel de accesibilidad base exigido por la mayoría de los marcos legales, incluida la Ley Europea de Accesibilidad (EAA) y la Sección 508 en Estados Unidos. AA exige un ratio de 4,5:1 para texto normal y 3:1 para texto grande. La mayoría de los sistemas de diseño establecen AA como el mínimo para todos los elementos de texto.
WCAG AAA
El nivel mejorado destinado a contenidos que deben ser legibles para el mayor número posible de usuarios, incluidas personas con discapacidad visual significativa. AAA exige 7:1 para texto normal y 4,5:1 para texto grande. Pocos sitios completos alcanzan AAA en todas las páginas, pero contenidos críticos como avisos legales e información médica suelen apuntar a este nivel.

Ejemplos de código

Calcula ratios de contraste WCAG de forma programática. Cada ejemplo implementa la fórmula de luminancia relativa de WCAG 2.x y el cálculo del ratio de contraste. Se prueban los mismos pares negro sobre blanco e índigo sobre blanco para facilitar la comparación.

JavaScript
// Calculate relative luminance per WCAG 2.x (sRGB)
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255
    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

// Contrast ratio between two RGB colors
function contrastRatio(fg, bg) {
  const l1 = luminance(...fg)
  const l2 = luminance(...bg)
  const lighter = Math.max(l1, l2)
  const darker  = Math.min(l1, l2)
  return (lighter + 0.05) / (darker + 0.05)
}

contrastRatio([0, 0, 0], [255, 255, 255])  // -> 21.0
contrastRatio([99, 102, 241], [255, 255, 255]) // -> 3.95
contrastRatio([29, 78, 216], [255, 255, 255])  // -> 6.06 (AA pass)
Python
def luminance(r: int, g: int, b: int) -> float:
    """Relative luminance per WCAG 2.x, ITU-R BT.709 coefficients."""
    channels = []
    for c in (r, g, b):
        c /= 255
        channels.append(c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4)
    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]

def contrast_ratio(fg: tuple, bg: tuple) -> float:
    l1 = luminance(*fg)
    l2 = luminance(*bg)
    lighter, darker = max(l1, l2), min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

print(f"{contrast_ratio((0, 0, 0), (255, 255, 255)):.2f}")  # -> 21.00
print(f"{contrast_ratio((99, 102, 241), (255, 255, 255)):.2f}")  # -> 3.95

# Check WCAG AA for normal text
ratio = contrast_ratio((29, 78, 216), (255, 255, 255))
print(f"{ratio:.2f} — {'AA pass' if ratio >= 4.5 else 'AA fail'}")  # -> 6.06 — AA pass
Go
package main

import (
	"fmt"
	"math"
)

func linearize(c float64) float64 {
	c /= 255
	if c <= 0.04045 {
		return c / 12.92
	}
	return math.Pow((c+0.055)/1.055, 2.4)
}

func luminance(r, g, b int) float64 {
	return 0.2126*linearize(float64(r)) +
		0.7152*linearize(float64(g)) +
		0.0722*linearize(float64(b))
}

func contrastRatio(fgR, fgG, fgB, bgR, bgG, bgB int) float64 {
	l1 := luminance(fgR, fgG, fgB)
	l2 := luminance(bgR, bgG, bgB)
	lighter := math.Max(l1, l2)
	darker := math.Min(l1, l2)
	return (lighter + 0.05) / (darker + 0.05)
}

func main() {
	ratio := contrastRatio(0, 0, 0, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 21.00

	ratio = contrastRatio(29, 78, 216, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 6.06 (AA pass for normal text)
}
CSS
/* WCAG-safe color pairs — tested contrast ratios */

/* 12.63:1 — passes AAA normal text */
.high-contrast {
  color: #1e293b;          /* slate-800 */
  background: #f8fafc;     /* slate-50  */
}

/* 7.07:1 — passes AAA normal text */
.dark-theme-text {
  color: #e2e8f0;          /* slate-200 */
  background: #0f172a;     /* slate-900 */
}

/* 4.57:1 — passes AA normal, fails AAA */
.accent-on-white {
  color: #1d4ed8;          /* blue-700  */
  background: #ffffff;
}

/* 2.14:1 — fails AA for text, but passes 3:1 for large text */
.muted-heading {
  color: #94a3b8;          /* slate-400 */
  background: #ffffff;
}

Preguntas frecuentes

¿Cuál es un buen ratio de contraste para texto?
Para texto de cuerpo en la web, apunta a al menos 4,5:1 (WCAG AA). Los ratios superiores a 7:1 cumplen WCAG AAA y son más cómodos para lectura prolongada. Negro sobre blanco produce el ratio máximo de 21:1, pero un gris muy oscuro (#1e293b) sobre blanco sigue dando alrededor de 12,6:1, muy por encima de AAA.
¿Qué cuenta como texto grande en WCAG?
WCAG define el texto grande como 18px (24 píxeles CSS) con peso normal, o 14px (18,66 píxeles CSS) con peso negrita. El texto grande tiene un umbral de contraste menor porque las letras más grandes son más fáciles de percibir. En CSS, 1px equivale a 0,75pt, por lo que 18pt equivale a 24px.
¿Es legalmente obligatorio WCAG AA?
En muchas jurisdicciones, sí. La Ley Europea de Accesibilidad (EAA), que entra en vigor en junio de 2025, hace referencia a WCAG 2.1 AA. La Sección 508 de la Ley de Rehabilitación de EE. UU. exige a las agencias federales que cumplan WCAG 2.0 AA. La Ley de Estadounidenses con Discapacidades (ADA) ha sido interpretada por los tribunales para requerir sitios web accesibles, con WCAG AA como estándar. Canadá, Australia y el Reino Unido tienen mandatos similares.
¿Cómo se calcula la luminancia relativa?
Cada valor de canal sRGB (0-255) se divide por 255 y luego se linealiza: los valores iguales o inferiores a 0,04045 se dividen por 12,92, y los superiores se transforman mediante ((c + 0,055) / 1,055) ^ 2,4. Los tres canales linealizados se ponderan con los coeficientes ITU-R BT.709 (0,2126 R, 0,7152 G, 0,0722 B) y se suman. El resultado es un número entre 0 y 1.
¿Por qué WCAG usa un desplazamiento de 0,05 en la fórmula de contraste?
El desplazamiento de 0,05 evita la división por cero cuando uno de los colores es negro puro (luminancia = 0). También tiene en cuenta la luz ambiental y los reflejos de pantalla que elevan ligeramente la luminancia percibida incluso de los píxeles más oscuros. Sin este desplazamiento, el negro sobre cualquier color oscuro produciría un ratio infinito o engañosamente alto.
¿Pueden dos colores superar AA y seguir siendo difíciles de leer?
Sí. Los ratios de contraste WCAG miden la diferencia de luminancia, no la diferencia de tono. Un rojo saturado sobre verde saturado puede técnicamente superar el umbral del ratio y al mismo tiempo resultar incómodo para algunos usuarios, especialmente quienes tienen deficiencia de visión cromática rojo-verde. Combinar colores que difieren tanto en luminancia como en tono tiende a producir resultados más cómodos.
¿Cuál es la diferencia entre el contraste WCAG 2.x y APCA?
WCAG 2.x usa un ratio de luminancia simple que trata el primer plano y el fondo de forma simétrica. APCA (Advanced Perceptual Contrast Algorithm), propuesto para WCAG 3.0, utiliza un modelo de claridad perceptual que tiene en cuenta la polaridad: el texto oscuro sobre fondo claro tiene un contraste percibido diferente al texto claro sobre fondo oscuro con la misma diferencia de luminancia. APCA sigue siendo un borrador de trabajo y no ha reemplazado el método WCAG 2.x en ninguna regulación.