Comprobador de Contraste de Color
Color Contrast Checker es una herramienta gratuita en línea que evalúa la relación de contraste entre dos colores para garantizar que cumplan con los estándares de accesibilidad WCAG (Pautas de accesibilidad al contenido web). Ingrese o elija dos colores, primer plano (texto) y fondo—y la herramienta calcula instantáneamente la relación de contraste, mostrando si la combinación cumple con los requisitos de nivel AA o AAA de WCAG 2.1 para texto normal y grande. Esencial para diseñadores web, desarrolladores y creadores de contenido que necesitan asegurarse de que su texto sea legible para usuarios con discapacidad visual o en condiciones de iluminación difíciles.
Qué es
El contraste de color es la diferencia de luminancia (brillo percibido) entre el texto en primer plano y su fondo. Las Pautas de Accesibilidad al Contenido Web (WCAG) 2.1 definen relaciones de contraste mínimas para garantizar que el texto sea legible para las personas con discapacidad visual. Requisitos de Contraste WCAG: - Nivel AA (mínimo): 4.5: 1 para texto normal (menos de 18 puntos/24 píxeles), 3:1 para texto grande (18 puntos+ negrita o 24 puntos+ normal) - Nivel AAA (mejorado): 7: 1 para texto normal, 4.5: 1 para texto grande -Elementos que no son de texto (iconos, componentes de la interfaz de usuario): 3: 1 contra colores adyacentes Cómo se calcula la relación de contraste: La fórmula es: (L1 + 0.05) /(L2 + 0.05) Donde L1 es la luminancia relativa del color más claro, y L2 es la luminancia relativa del color más oscuro. La luminancia relativa se calcula convirtiendo los valores sRGB en luz lineal utilizando corrección gamma. La relación de contraste varía de 1: 1 (sin contraste, mismo color) a 21: 1 (contraste máximo, negro sobre blanco). Por qué es importante el contraste: - 1 de cada 12 hombres tiene deficiencia de la visión del color . - El envejecimiento reduce la sensibilidad al contraste - La visualización de la pantalla al aire libre requiere un mayor contraste - Los usuarios con baja visión dependen de un alto contraste - Requisitos legales: ADA, Sección 508, EN 301 549 La herramienta acepta cualquier entrada de formato de color y proporciona retroalimentación en tiempo real sobre los niveles de cumplimiento con indicadores visuales claros para el estado aprobado/reprobado.
Cómo usar
- Elija el color de primer plano (el color del texto) utilizando el selector de color, la entrada hexadecimal o pegando cualquier formato de color compatible. Las opciones comunes incluyen grises oscuros (#333333) o el color de su marca.
- Elige el color de fondo usando los mismos métodos. Puede ser blanco (#FFFFFF), gris claro o cualquier color de fondo utilizado en su diseño.
- Vea la relación de contraste calculada que se muestra de manera destacada. La herramienta muestra tanto la relación numérica (por ejemplo, 7.23:1) como los indicadores visuales de aprobación/reprobación para cada nivel WCAG.
- Verifique los resultados de cumplimiento de WCAG: la herramienta muestra si su combinación de colores supera AA y AAA tanto para texto normal como para texto grande. Los indicadores verdes significan aprobado, los rojos significan fracaso.
- Use los controles deslizantes ajustar claridad/oscuridad para impulsar sus colores hacia el cumplimiento mientras mantiene la intención de su diseño. Las vistas previas visuales muestran cómo se ve su texto en el fondo elegido.
- Pruebe múltiples variaciones de color rápidamente intercambiando colores de primer plano y de fondo con el botón intercambiar. Copie los valores finales de pares de colores compatibles para usarlos en su CSS.
Ejemplos
Entrada: Foreground: #000000, Background: #FFFFFF
Proceso: L1=1.0, L2=0.0 → (L1+0.05)/(L2+0.05)
Resultado: Contrast ratio: 21:1 (AAA pass for all sizes)
Entrada: Foreground: #767676, Background: #FFFFFF
Proceso: Relative luminance calc → Ratio formula
Resultado: Contrast ratio: 4.54:1 (AA pass, AAA fail normal text)
Búsquedas Relacionadas
La gente también busca: comprobador de contraste de color, contraste wcag, contraste de accesibilidad, relación de contraste.
comprobador de contraste de colorcontraste wcagcontraste de accesibilidadrelación de contraste
Preguntas Frecuentes
¿Cuál es una relación de contraste aceptable para texto normal?
Para texto normal (menos de 18 puntos en negrita o 24 píxeles normal), el nivel AA de las WCAG 2.1 requiere una relación de contraste mínima de 4.5: 1. El nivel AAA requiere 7: 1. Si su proporción es inferior a 4,5: 1, debe oscurecer el texto o aclarar el fondo. Una proporción de 7:1 o superior satisface tanto AA como AAA para texto normal, proporcionando la mejor accesibilidad.
¿Cambia la relación de contraste para texto grande?
Sí. El texto grande (18 puntos en negrita o más, o 24 puntos normal o más) tiene requisitos mínimos de contraste más bajos: 3:1 para AA y 4,5: 1 para AAA. Esto se debe a que el texto más grande es más fácil de leer incluso con un contraste más bajo. Sin embargo, si su texto puede pasar a 4.5: 1, es más seguro porque es posible que los usuarios no siempre vean en los tamaños esperados debido al zoom del navegador o las diferencias en el dispositivo.
¿Hay alguna excepción a los requisitos de contraste de las WCAG?
Yes. WCAG exempts: 1) Logos and brand names (no contrast requirement). 2) Decorative text that conveys no information. 3) Inactive/disabled UI elements. 4) Text in photographs or images (though alt text should be provided). However, if text conveys information, it must meet contrast requirements regardless of context.
¿Puedo usar un fondo semitransparente para mejorar el contraste?
Sí, pero el cálculo se vuelve más complejo. Si el fondo es semitransparente y se coloca sobre otro color, el color de fondo efectivo es la mezcla. La herramienta le permite tener en cuenta la transparencia alfa al mostrar el resultado combinado. El color final percibido (después de la composición alfa) es lo que importa para los cálculos de contraste.
¿Cómo elijo colores accesibles de la paleta de mi marca?
Comience con los colores de su marca como primer plano o fondo, luego ajuste el otro color para lograr el cumplimiento. Usa el control deslizante luminosidad: si el color de tu marca es oscuro, combínalo con un fondo claro; si es claro, combínalo con un texto oscuro / gris. Alternativamente, use tonos ligeramente más oscuros o claros del color de su marca que mantengan la identidad de la marca y cumplan con los requisitos de contraste.