Paso 1
Ingrese texto y colores de fondo
Seleccione o escriba valores HEX opacos. Un valor no válido o incompleto muestra un error mientras el último color válido permanece activo.
Gratis WCAG Comprobador de contraste de color: AA y AAA
Pruebe el texto y los colores de fondo con WCAG 2.2 AA y AAA. Vea la relación de contraste exacta, obtenga una vista previa del tamaño y peso de fuente seleccionados e identifique si el par pasa.
Comprueba un par de colores exacto
Los resultados utilizan la luminancia relativa WCAG 2.2. Pasa o falla utiliza el valor completo aunque la proporción grande esté redondeada para su visualización.
Opaco #RGB o #RRGGBB. Presione Enter o abandone el campo para aplicar.
Opaco #RGB o #RRGGBB. Presione Enter o abandone el campo para aplicar.
Ejemplos de pares
Vista previa de texto en vivo
El texto legible ayuda a todos a completar la tarea con menos esfuerzo.
Relación de contraste17.46:1Completo: 17.457:1
Muestra activa
AA pasa para texto texto normal
Necesita 4.5:1 para AA y 7:1 para AAA con este tamaño y peso.
Comprobación WCAGMínimoResultado
AA texto normal4.5:1Pase
AA texto grande3:1Pase
Texto normal AAA7:1Pase
AAA texto grande4.5:1Pase
UI y gráficos AA3:1Pase
La muestra activa pasa AA. Mantenga el tamaño y el peso seleccionados, luego repita la verificación para cada estado que use un par de colores diferente.
La fila de UI y gráficos se aplica solo cuando estos colores representan el elemento visual esencial y su color adyacente real. El resultado de un par no es una auditoría de accesibilidad de todo el sitio.
Cómo comprobar el contraste de color en línea
Paso 2
Establecer el tamaño y el peso del texto de muestra
Coincide con el contexto CSS previsto para que el veredicto activo utilice el umbral WCAG correcto para texto normal o grande.
Paso 3
Revisar, corregir y copiar el resultado
Lea la proporción y la matriz de aprobado o reprobado, pruebe la sugerencia AA cuando sea necesario y luego copie un resultado conciso para la transferencia.
Comprender los resultados de contraste de WCAG AA y AAA
Una relación calculada se compara con diferentes umbrales WCAG 2.2 según el tamaño del texto, el peso y el nivel de conformidad.
El texto normal utiliza un umbral AA de 4,5:1
El texto del cuerpo, las etiquetas, los subtítulos y otro texto debajo de la definición de texto grande necesitan al menos 4,5:1 para AA. La herramienta compara el valor completo, por lo que un resultado redondeado mostrado nunca actualiza una falla.
El texto grande puede usar un umbral AA 3:1
El texto se considera grande, 24 px con un peso normal, o alrededor de 18,67 px en negrita. Un elemento de encabezado o una etiqueta visualmente destacada no es automáticamente texto grande.
AAA utiliza umbrales 7:1 y 4,5:1
El contraste mejorado requiere 7:1 para texto normal y 4,5:1 para texto grande. Trátelos como resultados para el par seleccionado, no como una afirmación de que toda la página se ajusta al nivel AAA.
Corregir un par de colores que falla
Un resultado fallido debería conducir a un siguiente paso concreto y dejar espacio para la revisión de la marca y del sistema de diseño.
Pruebe el color de texto AA sugerido
La sugerencia mueve el primer plano hacia el blanco o negro hasta que alcanza el objetivo AA de la muestra activa. Es una corrección práctica, no una pretensión de ser el color de marca perceptualmente más cercano.
Comparar texto en blanco y negro
Probar extremos simples ayuda a revelar qué dirección mejora el par. Utilice esa dirección para ajustar deliberadamente el tono de una marca en lugar de cambiar varias variables a la vez.
Vuelva a verificar cada estado interactivo
Los estados de desplazamiento, foco, seleccionado, deshabilitado, marcador de posición, visitado y error pueden introducir nuevos pares. Repita la verificación cada vez que cambien los colores del primer plano, los límites, los iconos o la superficie.
Comprobar componentes, iconos y estados de diseño de la interfaz de usuario
Los elementos visuales esenciales que no son texto tienen un requisito separado de 3:1 respecto de su color adyacente relevante, y el color no debe tener significado por sí solo.
Límites de prueba y gráficos esenciales
Utilice los campos de primer plano y de fondo para el borde de entrada real, el contorno del botón, el icono, el segmento del gráfico o el indicador de enfoque y la superficie directamente al lado.
Verificar estados de enfoque, seleccionado y error
Un componente puede pasar en reposo y fallar después de la interacción. Pruebe cada estado significativo utilizando los colores que realmente se representan en ese estado.
No utilizar el color como única señal
Agregue texto, íconos, patrones, formas u otra señal visible de estado y significado. Una proporción fuerte no hace que una instrucción basada únicamente en colores sea comprensible para todos.
Sepa lo que una prueba de contraste de color sólido no puede demostrar
El resultado es determinista para dos colores sRGB opacos especificados, pero las interfaces reales aún requieren una evaluación contextual y manual.
Las imágenes, los degradados y la transparencia necesitan contexto
El fondo efectivo puede variar según un elemento. Evalúe el diseño compuesto final y verifique las áreas de menor contraste en lugar de tratar un par sólido como representativo.
Las fuentes delgadas y el renderizado aún afectan la legibilidad
El suavizado y los glifos finos pueden aparecer más claros que el color CSS especificado. Es necesario pasar el par calculado, pero la revisión visual del tamaño previsto sigue siendo importante.
Aprobar un par no es una auditoría de accesibilidad completa
El contraste es un requisito entre muchos. Una revisión completa también cubre cada componente y estado, estructura, operación del teclado, zoom y reflujo, y comportamiento de la tecnología de asistencia.
Privacidad y límites
El cálculo se ejecuta en esta pestaña del navegador. Este verificador admite colores opacos sRGB #RGB y #RRGGBB; no inspecciona degradados, imágenes, transparencias ni un sitio web completo.
- • Solo se admiten los colores opacos sRGB #RGB y #RRGGBB.
- • El resultado verifica un par de colores y no es una certificación de accesibilidad legal ni para todo el sitio.
- • Los degradados, las imágenes de fondo, la transparencia, la representación de fuentes finas y los estados cambiantes requieren una revisión contextual.
Preguntas frecuentes
¿Este comprobador de contraste de color es de uso gratuito?
Sí. El verificador de contraste de color se puede usar en línea de forma gratuita sin registrarse ni iniciar sesión, y el resultado no está oculto detrás de una puerta de cuenta.
¿Qué relación de contraste pasa WCAG AA?
WCAG 2.2 AA requiere al menos 4,5:1 para texto normal y 3:1 para texto grande. La información visual esencial en los componentes de la interfaz de usuario y los objetos gráficos también necesita al menos 3:1 frente al color adyacente relevante.
¿Qué relación de contraste pasa WCAG AAA?
WCAG 2.2 AAA requiere al menos 7:1 para texto normal y 4.5:1 para texto grande. Un resultado AAA de nivel de par no significa que una página o sitio web completo se ajuste al nivel AAA.
¿Qué se considera texto grande en WCAG?
El texto grande tiene al menos 24 CSS píxeles con un peso normal, o aproximadamente 18,67 CSS píxeles cuando está en negrita. Esta herramienta trata el peso 700 como negrita y utiliza el tamaño y el peso seleccionados para clasificar la vista previa activa.
¿Un formato 4.50:1 mostrado siempre pasa AA de texto normal?
No. La proporción visible se redondea a dos decimales para facilitar la lectura, pero aprobar o reprobar utiliza el valor calculado completo. Un valor como 4,499:1 no se redondea hacia arriba para cumplir el requisito de 4,5:1.
¿Puede esta herramienta sugerir un color que pase?
Cuando la muestra de texto activo falla AA, la herramienta puede sugerir un ajuste práctico de primer plano hacia el blanco o negro que alcance el umbral activo. Revise la sugerencia con respecto a su marca, sistema de diseño y cada estado interactivo antes de usarla.
¿Puedo marcar botones, íconos y bordes de formularios?
Sí, cuando los dos colores seleccionados representan el límite, icono o gráfico del componente esencial y su color adyacente real. Utilice la fila AA de gráficos y UI, que verifica el umbral 3:1, y pruebe cada estado distinto por separado.
¿Puedo comprobar degradados, imágenes o colores transparentes?
No con este corrector de color sólido. Acepta colores sRGB HEX opacos porque los degradados, las imágenes y la transparencia pueden crear diferentes fondos efectivos en el mismo elemento y necesitan una evaluación contextual.
¿Un resultado aprobado hace que mi sitio web sea compatible con WCAG?
No. Este resultado cubre un par de colores especificado. Una revisión completa de la accesibilidad también debe verificar todos los estados y componentes, el uso del teclado, la semántica, el zoom y el reflujo, la estructura del contenido y el comportamiento de la tecnología de asistencia.
¿La herramienta carga o guarda mis colores?
No se utiliza ningún servicio externo para el cálculo. Sus colores, texto de muestra y configuraciones permanecen en la pestaña actual del navegador y vuelven a los valores iniciales cuando se recarga la página.
Herramientas relacionadas
Continúa con otra herramienta basada en navegador.
Sd Herramientas de diseño gratuitas
Elige y convierte un color
Selector de color
Elija un color visualmente o ingrese un valor HEX, luego ajuste RGB, HSL y opacidad. Obtenga una vista previa del resultado, compare tonos cercanos y copie el código de color exacto sin iniciar sesión.
Gd Herramientas de diseño gratuitas
Construir un gradiente CSS
Generador de degradados CSS
Crea degradados lineales, radiales o cónicos con dos a seis paradas de color. Obtenga una vista previa del resultado en vivo, ajuste la dirección u origen relevante y copie CSS listo para usar sin iniciar sesión.
Gd Herramientas de diseño gratuitas
Crear una sombra de cuadro CSS
Generador de sombras CSS
Crea sombras en capas CSS con hasta cuatro capas editables. Ajuste los desplazamientos, el desenfoque, la extensión, el color, la opacidad y el modo de inserción, obtenga una vista previa del resultado y copie el CSS sin iniciar sesión.
Od Herramientas de diseño gratuitas
Optimizar un icono SVG
Optimizador de SVG
Cargue o pegue el marcado SVG, optimícelo localmente con SVGO y compare el código, el tamaño del archivo y el resultado visual antes de descargarlo. No es necesario iniciar sesión ni cargar el servidor.