Verificador de Contraste de Color
Verifique ratios de contraste de color según las pautas de accesibilidad WCAG 2.1. Prueba conformidad AA y AAA para texto normal y grande.
Parámetros
Color del texto o elemento.
Color de fondo a probar.
Resultados
La relación de contraste entre los dos colores.
Otros resultados (6)
El texto normal (menos de 18 puntos o 14 puntos en negrita) cumple con los requisitos WCAG AA
El texto grande (18 puntos+ o 14 puntos+ negrita) cumple con los requisitos WCAG AA
El texto normal cumple con los requisitos más estrictos de WCAG AAA
El texto grande cumple con los requisitos más estrictos de WCAG AAA
Relative luminance of #000000
Relative luminance of #FFFFFF
Por qué elegir Verificador de Contraste de Color
El Comprobador de contraste de color prueba la relación de contraste entre el color de primer plano y el de fondo según las pautas WCAG 2.1. Vea instantáneamente si su combinación de colores cumple con los requisitos AA y AAA tanto para texto normal como grande.
- ✓Calcula la relación de contraste utilizando la fórmula de luminancia relativa WCAG 2.1
- ✓Prueba los cuatro niveles de cumplimiento de las WCAG: AA/AAA para texto normal y grande
- ✓Muestra valores de luminancia relativos para ambos colores.
- ✓Utiliza entradas de selector de color para una fácil selección de color
Pasos de uso
- 1Elija su color de primer plano (texto) usando el selector de color
- 2Elija su color de fondo usando el selector de color
- 3Ver la relación de contraste que se muestra inmediatamente
- 4Verifique los resultados de aprobación/rechazo de WCAG AA y AAA para texto normal y grande
- 5Ajusta los colores hasta que tu combinación pase el nivel requerido
Preguntas frecuentes (FAQ)
¿Cuál es una buena relación de contraste para la accesibilidad web?
WCAG 2.1 requiere una relación de contraste mínima de 4,5:1 para texto normal (nivel AA) y 3:1 para texto grande. Para cumplir con AAA, el texto normal necesita 7:1 y el texto grande necesita 4,5:1. Negro sobre blanco (21:1) es el máximo contraste posible.
¿Qué se considera "texto grande" en las WCAG?
WCAG define texto grande como al menos 18 puntos (24 px) o 14 puntos (18,66 px) en negrita. El texto grande tiene un menor requisito de contraste porque es más fácil de leer con relaciones de contraste más bajas.
¿Cómo se calcula la relación de contraste?
The contrast ratio uses relative luminance values: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color luminance and L2 is the darker. Luminance is calculated using the WCAG formula: L = 0.2126 × R + 0.7152 × G + 0.0722 × B, with each channel linearized from sRGB.
¿Esta herramienta comprueba la accesibilidad del daltonismo?
Esta herramienta comprueba el contraste basado en la luminancia, lo que beneficia a todos los usuarios, incluidos aquellos con deficiencias en la visión del color. Sin embargo, no simula tipos específicos de daltonismo. Para las pruebas de daltonismo, utilice un simulador de daltonismo exclusivo.
¿Cuál es la relación de contraste mínima requerida por la ley?
Muchas normas de accesibilidad (ADA, Sección 508, EN 301 549) hacen referencia a WCAG 2.1 Nivel AA como estándar, que requiere 4.5:1 para texto normal. Los sitios web gubernamentales y educativos en muchos países están obligados legalmente a cumplir con este nivel.
Referencias y fuentes autorizadas
WCAG 2.1 Understanding Contrast (Minimum)
Ver fuenteRelative Luminance - WCAG Definition
Ver fuenteWebAIM Contrast Checker
Ver fuenteHerramientas relacionadas
Explore más herramientas prácticas para este tipo de tarea.