Verificar Contraste de Color (WCAG)
Comprueba el contraste de color WCAG entre texto y fondo, con vistas previas en vivo, resultado aprobado o suspenso y sugerencias accesibles.
Resultados WCAG
- AA Texto grandePasa
- AAA Texto grandePasa
- AA Texto normalPasa
- AAA Texto normalPasa
- Componentes de UIPasa
AA pide 4.5:1 para texto normal y 3:1 para texto grande. AAA pide 7:1.
Vista previa en vivo
Diseño que todo el mundo puede leer
Un buen contraste mantiene tu contenido legible para personas con baja visión, a pleno sol o en pantallas baratas.
Sin registro. Funciona en tu navegador.
Daltonismo
Previsualiza cómo ven tus colores las personas con daltonismo. Elige un tipo para redibujar la vista previa con esa deficiencia de la visión del color y detectar pares que dependen solo del tono.
Ejemplos accesibles
Ejemplos que fallan
Exportar
:root {
--tf-contrast-fg: #4c1d95;
--tf-contrast-bg: #f5f3ff;
--tf-contrast-ratio: 9.99:1;
}Qué hace esta herramienta
Verificador de contraste de color que evalúa cualquier par de texto y fondo según las pautas de accesibilidad WCAG. Elige dos colores y verás al instante la relación de contraste, si supera AA y AAA para texto grande y normal, y cómo queda sobre texto y botones reales. Una simulación de daltonismo integrada también redibuja la vista previa con protanopía, deuteranopía, tritanopía y acromatopsia, para que veas cómo se lee tu paleta para personas con deficiencia en la visión del color. La simulación solo cambia la vista previa: la relación de contraste siempre se mide sobre tus colores originales. Todo se ejecuta en tu navegador.
¿Necesitas preparar los colores primero? Convierte cualquier valor con conversor de colores o crea un conjunto con generador de paletas.
Para qué te sirve
- Comprobar que el texto del cuerpo se lee bien sobre su fondo antes de publicar un diseño.
- Encontrar un color de texto accesible cuando un color de marca no supera AA sobre blanco.
- Comparar el texto y el relleno de un botón para cumplir la regla de contraste no textual.
- Previsualizar un par con la simulación de daltonismo para asegurarte de que no depende solo del tono.
- Compartir un par de colores con tu equipo mediante la URL y guardar un historial local de lo que comprobaste.
Cómo se usa
- Introduce un color de texto y uno de fondo en HEX, RGB, HSL o por nombre.
- Lee la relación de contraste y el resultado de aprobado o suspenso para cada nivel WCAG.
- Activa la simulación de daltonismo para previsualizar el par tal como lo ve la protanopía, la deuteranopía, la tritanopía o la acromatopsia. La relación se sigue midiendo sobre tus colores originales.
- Usa una sugerencia para ajustar el color hasta que pase, o invierte el par.
- Copia los valores, las variables CSS o el informe completo con un clic.
Todo el trabajo ocurre dentro de tu navegador, sin subir archivos a ningún servidor. Ver más herramientas del mismo campo.
Combina bien con
Otras herramientas que la gente suele usar en el mismo flujo.
Otras herramientas del mismo campo
DiseñoConversor de Color: HEX, RGB, HSL
Convierte colores entre HEX, RGB y HSL online. Pega cualquier formato y obtén los demás al instante. Gratis, sin subidas y en tu navegador.
Generador de Paletas de Color
Genera paletas de color armónicas a partir de cualquier color base: análogas, complementarias y más. Gratis, en tu navegador, listas para copiar.
Generador de Gradientes CSS
Crea gradientes CSS online con vista previa en vivo: lineal, radial y cónico. Copia el código para tu fondo, gratis y en tu navegador.
Generador de sombras CSS
Crea una sombra box-shadow en CSS con vista previa: ajusta el desplazamiento, el desenfoque, la expansión, el color y la opacidad, y copia el código. Gratis y en tu navegador.
Preguntas frecuentes
¿Qué relación de contraste necesito?
WCAG pide al menos 4,5:1 para texto normal y 3:1 para texto grande (18pt o 24px, o 14pt en negrita) para cumplir AA. AAA sube esas cifras a 7:1 y 4,5:1. Los iconos, los bordes de los formularios y otros elementos no textuales necesitan 3:1.
¿Cómo se calcula la relación de contraste?
Sale de la luminancia relativa de cada color, siguiendo la fórmula de WCAG 2.1. El color más claro va arriba, así que el resultado va de 1:1 para dos colores idénticos a 21:1 para negro sobre blanco. Invertir los dos colores nunca cambia el resultado.
¿Cómo funcionan las sugerencias accesibles?
Cuando un par se queda corto, la herramienta mantiene el tono y la saturación de tu color y solo cambia su luminosidad hasta llegar al objetivo, eligiendo el resultado más cercano. Si el texto no puede llegar por sí solo, sugiere ajustar el fondo.
¿Puedo previsualizar mis colores para el daltonismo?
Sí. La simulación de daltonismo redibuja la vista previa en vivo tal como la ven las deficiencias de la visión del color más comunes: protanopía y deuteranopía (rojo-verde), tritanopía (azul-amarillo) y acromatopsia completa (sin color). Es solo una comprobación visual, así que puedes detectar pares que solo funcionan por su tono. La relación de contraste y los grados WCAG siempre se calculan sobre tus colores originales, nunca sobre los simulados.
¿Se envían mis datos a algún sitio?
No. Todos los cálculos ocurren en tu navegador. Los colores que compruebas, el historial y el enlace para compartir se quedan en tu dispositivo.