T

Text Machine

Potentes herramientas de texto, en tu navegador

Verificador de Accesibilidad de Colores

Ingresa un color de texto y de fondo (códigos hex) para verificar su ratio de contraste y cumplimiento con WCAG.

Entrada de Colores
Vista Previa de Texto

Este es texto grande y en negrita.

Este es texto de tamaño normal.

Ratio de Contraste

21.00:1

Ratio de Contraste

Texto Normal (AA)

AAA

Texto Grande (AA)

18pt+ or 14pt+ bold

AAA

Componentes UI (AA)

Buttons, form controls, etc.

AA
WCAG Accessibility Guidelines

Level AA (minimum required for accessibility compliance):
• Normal Text: Contrast ratio of at least 4.5:1
• Large Text: Contrast ratio of at least 3:1
• UI Components: Contrast ratio of at least 3:1

Level AAA (enhanced accessibility):
• Normal Text: Contrast ratio of at least 7:1
• Large Text: Contrast ratio of at least 4.5:1

Notes:
• "Large Text" is defined as 18pt or 14pt bold and above
• Logos and decorative elements have no minimum contrast requirement
• Text over images or gradients should be evaluated throughout the image

Cómo usar Verificador de Accesibilidad de Colores

  1. 1

    Introduce dos colores

    Indica un color de primer plano (texto) y un color de fondo como códigos hex, por ejemplo #1a1a1a y #ffffff.

  2. 2

    Comprueba el contraste

    Haz clic en Comprobar accesibilidad para calcular la relación de contraste entre los dos colores.

  3. 3

    Revisa los resultados WCAG

    Consulta las insignias de aprobado o suspenso para AA y AAA en texto normal, texto grande y componentes de interfaz, y observa la vista previa en vivo.

  4. 4

    Ajusta según sea necesario

    Intercambia los colores o modifica un valor hex hasta que la combinación cumpla el nivel WCAG que requiere tu proyecto.

Preguntas frecuentes

¿Qué es una relación de contraste y qué se considera bueno?
La relación de contraste mide la diferencia de luminancia entre el texto y su fondo, de 1:1 a 21:1. WCAG exige al menos 4,5:1 para texto normal y 3:1 para texto grande en el nivel AA, y 7:1 y 4,5:1 en el nivel más estricto AAA.
¿Cuál es la diferencia entre AA y AAA?
AA es el nivel que persiguen la mayoría de los sitios web y los requisitos legales, mientras que AAA es un nivel mejorado para una legibilidad máxima. El verificador muestra aprobado o suspenso en ambos para que elijas el listón que se ajuste a tus necesidades.
¿Por qué el texto grande aprueba cuando el texto normal suspende?
El texto grande, definido como aproximadamente 18pt o 14pt en negrita en adelante, es más fácil de leer, por lo que WCAG permite un umbral de contraste más bajo para él. Por eso el mismo par de colores puede cumplir las reglas de texto grande y, a la vez, suspender el requisito de texto normal.
¿Qué formato de color debo introducir?
Introduce los colores como códigos hex en formato #RRGGBB o en su forma abreviada #RGB. La herramienta valida tu entrada y muestra una vista previa en vivo del texto normal y grande para que veas el resultado real.
¿El verificador es gratuito y envía mis colores a algún sitio?
Es totalmente gratuito y sin registro, y el cálculo de contraste se ejecuta íntegramente en tu navegador, por lo que los colores que pruebas nunca se suben a un servidor.

Herramientas relacionadas

Sigue trabajando con estas prácticas herramientas

Generador de Meta Tags

Generador de Robots.txt

Open Graph Previewer

Codificador/Decodificador de Entidades HTML

Visor de Cabeceras HTTP

Verificador de Cadenas de Redirección URL