Umbrales AA y AAA
El texto normal necesita 4,5:1 para AA y 7:1 para AAA. Para texto grande, los umbrales son 3:1 y 4,5:1, respectivamente.
Comprobador de contraste de colores
Compara los colores del texto y del fondo con los umbrales WCAG AA y AAA. Prueba un ajuste o guarda la pareja.
Elegir modo
Texto
Fondo
Título de ejemplo
Compara aquí los colores elegidos para el texto y el fondo. Comprueba los umbrales según el tamaño y el grosor reales de la letra.
Texto pequeño: comprueba la legibilidad de tus colores a distintos tamaños.
Más acciones
Herramientas relacionadas
Tus estadísticas
0
Colores elegidos
0
Paletas exportadas
0
Degradados creados
0
Contrastes comprobados
Selector de color
Modo más usado
0%
Puntuación de actividad
Cómo comprobar el contraste de colores
No se ha podido cargar el vídeo. Puedes seguir las instrucciones que aparecen debajo.
El vídeo muestra la interfaz en inglés.
Introduce valores HEX con el signo # o usa las muestras de color. Comprueba que ambos campos sean válidos. La vista previa y la relación se actualizan al cambiar los colores.
Comprueba una pareja de texto y fondo
Relación y vista previa en directo
Al cambiar cualquier color se actualizan la relación y el texto de ejemplo. El control de tamaño modifica la vista previa, mientras los cuatro resultados siguen visibles.
Prueba un ajuste
Las opciones Ajustar a AA y Ajustar a AAA intentan modificar el color del texto. Puede que no funcione con el fondo elegido, así que comprueba la relación obtenida.
Mostrar 3 másMostrar menos
Filtros de color aproximados
Las opciones Protanopía, Deuteranopía y Tritanopía aplican filtros visuales sencillos. No demuestran la legibilidad para personas con alteraciones de la visión del color.
Guarda una pareja de colores
Pon nombre a un ajuste predefinido para guardar los colores del texto y del fondo en este navegador. Puedes cargarlos de nuevo desde Ajustes predefinidos.
Otras herramientas de color
Los enlaces de modo abren páginas específicas para el selector, las paletas, los degradados o la extracción de colores de imágenes.
Preguntas frecuentes
¿Cómo compruebo el contraste de colores?
Elige los colores del texto y del fondo o introduce valores HEX de seis dígitos. Consulta la relación y los cuatro resultados AA y AAA. Un resultado favorable se aplica a esa pareja y al umbral de texto correspondiente, no a todo el sitio web.
¿Qué relación de contraste exige WCAG?
Para texto normal, AA exige al menos 4,5:1 y AAA, 7:1. El texto grande necesita 3:1 para AA y 4,5:1 para AAA. Hay excepciones, por ejemplo, para logotipos y controles inactivos.
¿Se puede ajustar el contraste automáticamente?
Ajustar a AA y Ajustar a AAA intentan aclarar u oscurecer el texto modificando sus canales RGB. El tono puede cambiar y el ajuste puede fallar con ciertos fondos. Comprueba la relación después de cada intento.
¿Las vistas previas simulan con precisión las alteraciones de la visión del color?
Usan filtros sencillos de sepia, saturación y tono. Considéralos vistas previas aproximadas. No son modelos validados de visión del color y no confirman que un diseño sea accesible.
Mostrar 4 másMostrar menos
¿Qué se considera texto grande?
WCAG considera grande el texto de al menos 18 pt con peso normal o 14 pt en negrita, equivalentes a unos 24 px y 18,67 px en CSS. El tamaño de la vista previa no determina qué umbral se aplica a tu diseño real.
¿El comprobador de contraste es gratis?
Sí. MORELESS ofrece la herramienta gratis y sin cuenta. Los cálculos de color se realizan en este navegador.
¿Puedo comprobar los colores de mi marca?
Sí. Introduce directamente los colores HEX del texto y del fondo. Puedes guardar la pareja como un ajuste predefinido con nombre en este navegador. Prueba por separado cada combinación que utilices realmente.
¿Cómo abro las otras herramientas de color?
Usa los enlaces de modo situados encima del comprobador. Abren páginas específicas para el selector, la extracción desde imágenes, las paletas y los degradados.
Detalles técnicos
Luminancia relativa
La relación se calcula a partir de la luminancia relativa de los dos colores sRGB. Va de 1:1 para colores iguales a 21:1 para blanco y negro. Se comparan dos colores uniformes, no una captura de página.
Umbrales de contraste del texto
Los cuatro resultados se calculan con la relación sin redondear. AA exige 4,5:1 para texto normal y 3:1 para texto grande. AAA exige 7:1 y 4,5:1. Superar estas comprobaciones no demuestra por sí solo la conformidad con WCAG.
Mostrar 2 másMostrar menos
Filtros de vista previa aproximados
Las tres vistas previas de visión del color aplican filtros CSS de sepia, saturación y rotación del tono al área de ejemplo. No modifican la relación de contraste indicada ni implementan un modelo validado de visión del color.
Ajuste y almacenamiento
El ajuste modifica por pasos los tres canales RGB del texto hasta alcanzar el objetivo o terminar el intento. No garantiza superar el umbral ni conservar el tono. Las parejas con nombre se guardan localmente en IndexedDB.