Verificador de Contraste de Color
Ingresa los colores de primer plano y fondo y el verificador devuelve la relación de contraste WCAG (1:1 a 21:1) más los veredictos de aprobación/reprobación contra los umbrales WCAG 2.1 AA y AAA para texto normal, texto grande y elementos no textuales. Bajo el capó utiliza la fórmula de luminancia WCAG, matemáticas simples, pero críticas para la accesibilidad. Corrige los fallos ajustando la claridad hasta que la relación supere el umbral que necesitas.
Cómo se calcula la relación de contraste
-
1
Ingresa dos colores
Hex, de 3 o 6 dígitos, para ambos colores. Hay selectores de color disponibles para cada uno.
-
2
Luminancia relativa calculada para cada uno
L = 0.2126·R + 0.7152·G + 0.0722·B donde cada canal se linealiza desde sRGB.
-
3
Relación de contraste
(L_más_claro + 0.05) / (L_más_oscuro + 0.05). Relaciones entre 1:1 y 21:1.
-
4
Insignias de aprobación/reprobación
AA (4.5:1 para normal, 3:1 para grande/UI), AAA (7:1 para normal, 4.5:1 para grande). Texto grande = ≥18pt regular o ≥14pt negrita.
Umbrales de contraste WCAG
| Tipo de contenido | Umbral AA | Umbral AAA |
|---|---|---|
| Texto normal | 4.5:1 | 7:1 |
| Texto grande (≥18pt regular o ≥14pt negrita) | 3:1 | 4.5:1 |
| No textual (componentes de UI, anillos de enfoque) | 3:1 | - |
| Texto incidental (decorativo, deshabilitado, logotipos) | exento | exento |
“Texto grande” significa peso regular de 18pt+ (~24px en CSS) o 14pt+ negrita (~19px negrita).
Ejemplos de contrastes
| Par | Relación | AA normal | AA grande | AAA normal |
|---|---|---|---|---|
| Negro sobre blanco | 21:1 | Aprobado | Aprobado | Aprobado |
| #333 sobre blanco | 12.6:1 | Aprobado | Aprobado | Aprobado |
| #666 sobre blanco | 5.7:1 | Aprobado | Aprobado | Reprobado |
| #888 sobre blanco | 3.5:1 | Reprobado | Aprobado | Reprobado |
| #AAA sobre blanco | 2.3:1 | Reprobado | Reprobado | Reprobado |
| Blanco sobre #1976D2 (Material azul 700) | 4.6:1 | Reprobado | Aprobado | Reprobado |
| Blanco sobre #2196F3 (Material azul 500) | 3.1:1 | Reprobado (normal) | Aprobado | Reprobado |
Errores comunes de accesibilidad
- Texto del cuerpo gris sobre blanco en #999 o más claro, no pasa AA. Usa #767676 o más oscuro para el texto del cuerpo sobre blanco.
- Enlace azul sobre gris: a menudo reprobará porque ambos colores son de luminancia media.
- Texto blanco sobre color de marca: aprobado en tonos más oscuros (≥ 4.5:1), reprobado en colores de marca de tono medio. Usa texto más grande o una marca más oscura.
- Texto de marcador de posición a menudo tiene bajo contraste para “sugerir”, WCAG sigue aplicándose si los usuarios necesitan leer el marcador de posición.
- Estado deshabilitado: WCAG 2.2 requiere 3:1 para texto deshabilitado contra el fondo del control a menos que el estado en sí se comunique por otro medio.
Lo que WCAG no te dice
- WCAG 2.x utiliza una fórmula de 1988. El APCA moderno (algoritmo de contraste perceptual avanzado) refleja mejor la legibilidad percibida, pero aún no es la base legal. Aumenta ligeramente los números más allá de los mínimos de WCAG para manejar APCA y casos límite.
- El contraste no es la única dimensión de accesibilidad. Una relación de 21:1 no significa nada si la fuente es de 9px, la altura de línea es ajustada, o el color de significado es rojo-verde.
Mejorando un par que falla
- Primer plano más claro sobre fondo oscuro, o primer plano más oscuro sobre claro.
- Aumentar el tamaño o peso de la fuente, el umbral de texto grande es más bajo.
- Agregar un fondo detrás del texto sobre imágenes (superposición, degradado).
- Nunca arregles el contraste desvaneciendo a un gris que aún falla, empuja hasta que llegues a AA.
Vuelve a comprobar tras cada ajuste, la herramienta recalcula la relación en vivo y un pequeño cambio de claridad puede alterar el veredicto rápidamente.
Preguntas frecuentes
AA es la base legal en la mayoría de las jurisdicciones (Sección 508 EE. UU., EN 301 549 UE) y lo que la mayoría de las herramientas de auditoría señalan. AAA es aspiracional, requerido solo para contextos de accesibilidad específicos (contenido educativo para usuarios con baja visión). Apunta a AA y considera AAA como un bono.
No, solo acepta colores hex opacos, de 3 o 6 dígitos. Convierte RGB o HSL a hex primero, o usa el selector de color, que siempre devuelve hex.
WCAG 2.1 SC 1.4.11 requiere un contraste de 3:1 para componentes de UI no textuales y objetos gráficos. Esto se aplica a indicadores de enfoque, bordes de entrada, botones solo de íconos y estados (hover, activo). Verifica tanto los estados predeterminados como los de enfoque.
Prueba cada modo por separado, las relaciones de contraste en temas claros y oscuros son independientes. Muchas paletas que pasan en modo claro fallan en modo oscuro a la misma claridad relativa.
Herramientas relacionadas
Referencia de la tabla ASCII
Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.
Generador de letras aleatorias
Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.
Referencia de caracteres HTML
Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.
Formateador de JSON
Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.
Referencia de atajos de teclado
Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.
Simplificador de Álgebra Booleana
Evalúa una expresión booleana para cada combinación de entradas y muestra la tabla de verdad completa. Admite hasta cinco variables y los operadores &, |, ! y ^.