Verificador de Contraste de Colores
El veloz murciélago hindú comía feliz cardillo y kiwi
El veloz murciélago hindú comía feliz cardillo y kiwi
Qué es Verificador de Contraste de Colores
Esta herramienta mide la relación de contraste entre un color de texto y un color de fondo, y la compara con las pautas de accesibilidad WCAG 2.1. Muestra una vista previa en vivo de ambos colores juntos e indica si el par aprueba AA o AAA para texto normal y texto grande, para que detectes problemas de legibilidad antes de que lleguen a producción.
Cómo usar
- Elige o escribe el color del texto en el primer campo, como código HEX.
- Elige o escribe el color de fondo en el segundo campo.
- Revisa la relación de contraste y los sellos de aprobado/no aprobado para AA y AAA.
- Haz clic en el botón de intercambio para probar los colores al revés.
- Copia la URL para compartir el par exacto con tu equipo.
Cuándo usarla
¿Estás eligiendo el color del texto para un nuevo diseño y no estás seguro de que se lea bien? Escribe el color del texto y del fondo, por ejemplo #767676 sobre #FFFFFF, y obtienes una relación de 4.54:1: aprobado en AA para texto normal, no aprobado en AAA. Esa es la distancia entre un producto accesible y una observación de auditoría, ya sea que estés revisando el sitio de un cliente o publicando tu propia app.
Preguntas frecuentes
¿Cuál es una buena relación de contraste para texto?
WCAG AA exige al menos 4.5:1 para texto normal y 3:1 para texto grande (18pt o 14pt en negrita o mayor). WCAG AAA es más estricto: 7:1 para texto normal y 4.5:1 para texto grande.
¿Cuál es la relación de contraste máxima posible?
21:1, la relación entre negro puro (#000000) y blanco puro (#FFFFFF). Ningún par de colores supera ese valor.
¿Por qué mis colores no pasaron AA pero el diseño se ve bien para mí?
La relación de contraste mide accesibilidad, no gusto personal. Una persona con baja visión, o cualquiera que vea la pantalla bajo luz intensa, necesita más contraste que un par que parece aceptable para una visión típica.
¿Esta herramienta también revisa el daltonismo?
No. La herramienta comprueba el contraste de luminancia según la fórmula WCAG, lo cual beneficia a todos los usuarios, incluidas muchas formas de daltonismo, pero no simula deficiencias específicas de visión del color.
¿Puedo compartir esta herramienta con mis datos precargados?
Sí. La URL se actualiza automáticamente mientras eliges los colores. Copia el enlace desde la barra de direcciones o usa el botón Compartir, quien lo abra verá tus colores exactos ya cargados.
Herramientas relacionadas
Calculadora de Relación de Aspecto
Calcula la relación de aspecto, encuentra el ancho o alto que falta y redimensiona imágenes y vídeos manteniendo las proporciones. Gratis.
Decodificador Base64
Decodifica cadenas Base64 a texto plano al instante. Soporta salida Unicode completa con emojis. Decodificador Base64 gratuito.
Codificador Base64
Convierte texto a Base64 instantáneamente en el navegador. Soporta Unicode, emojis y caracteres especiales. Codificador Base64 gratuito.