Comprobador de Relación de Contraste WCAG Verifica las relaciones de contraste WCAG entre colores de primer plano y fondo.
Comprobador de Relación de Contraste
Verifica las relaciones de contraste WCAG entre colores de primer plano y fondo.
Establecer colores
Ingrese los colores de primer plano (texto) y fondo.
Comprobar la conformidad
Vea la relación de contraste y los resultados de aprobación/rechazo de WCAG AA/AAA.
Ajustar e intercambiar
Modifique los colores hasta alcanzar su nivel objetivo de conformidad.
What Is Comprobador de Relación de Contraste?
Un verificador de relación de contraste WCAG evalúa la accesibilidad de las combinaciones de colores calculando la relación de contraste entre los colores del primer plano (texto) y fondo según las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1. La herramienta computa la relación de contraste basada en la luminancia y la prueba contra cuatro umbrales WCAG: AA para texto normal (≥4,5:1), AA para texto grande (≥3,0:1), AAA para texto normal (≥7,0:1) y AAA para texto grande (≥4,5:1). Superar estos umbrales garantiza que el texto sea legible para los usuarios con diferentes niveles de discapacidad visual, incluida la visión reducida y la ceguera al color. La herramienta proporciona una vista previa en vivo del texto que muestra cómo se ve realmente la combinación de colores en diferentes tamaños, junto con indicadores claros de aprobado/rechazado para cada nivel WCAG. Esta es una herramienta esencial para cualquier desarrollador web o diseñador comprometido con la creación de experiencias digitales accesibles e inclusivas.
Why Use Comprobador de Relación de Contraste?
-
Comprobación instantánea de la conformidad WCAG AA y AAA
-
Vista previa visual del texto en varios tamaños muestra la legibilidad en el mundo real
-
Indicadores claros de aprobación/rechazo con umbrales de relación requeridos
-
Botón de intercambio para probar rápidamente combinaciones de colores invertidas
-
Prueba cuatro niveles de conformidad: AA/AAA para texto normal y grande
Common Use Cases
Accesibilidad web
Verifique que las combinaciones de texto/fondo cumplan con los requisitos de WCAG 2.1 para la conformidad ADA y AODA.
Auditoría del sistema de diseño
Pruebe todas las combinaciones de colores en un sistema de diseño para la conformidad de accesibilidad.
Evaluación de colores de marca
Verifique si los colores de la marca se pueden utilizar para combinaciones de texto/fondo que cumplan con los estándares de accesibilidad.
Conformidad legal
Asegúrese de que el contenido digital cumpla con las leyes de accesibilidad que hacen referencia a los criterios de WCAG.
Technical Guide
La relación de contraste se calcula utilizando la fórmula de luminancia relativa WCAG 2.1. Primero, cada canal de color se linealiza: si sRGB ≤ 0,03928, lineal = sRGB/12,92; de lo contrario, lineal = ((sRGB + 0,055)/1,055)^2,4. La luminancia relativa L = 0,2126×R + 0,7152×G + 0,0722×B. La relación de contraste = (L_más_claro + 0,05) / (L_más_oscuro + 0,05). La proporción va desde 1:1 (sin contraste, mismo color) hasta 21:1 (negro sobre blanco). WCAG 2.1 define cuatro umbrales: el nivel AA requiere ≥4,5:1 para texto normal (<18pt o <14pt en negrita) y ≥3:1 para texto grande (≥18pt o ≥14pt en negrita). El nivel AAA requiere ≥7:1 para texto normal y ≥4,5:1 para texto grande. Estos umbrales se basan en investigaciones sobre la agudeza visual y garantizan la legibilidad para los usuarios con visión 20/40 o discapacidad visual moderada.
Tips & Best Practices
-
1Apunte a una relación de contraste mínima de 4,5:1 para el texto del cuerpo - este es el mínimo para WCAG AA
-
2El texto grande (18px+ o 14px+ en negrita) tiene un requisito más bajo de 3:1 para AA
-
3La conformidad AAA (7:1) garantiza la legibilidad para los usuarios con discapacidades visuales más graves
-
4Utilice el botón de intercambio para probar si sus colores funcionan bien en ambas orientaciones
-
5Los diseños de modo oscuro necesitan las mismas relaciones de contraste - pruebe ambos modos
Related Tools
Convertidor de HEX a RGB
Convierta códigos de color HEX a valores RGB al instante con una vista previa en vivo.
🎨 Color Tools
Selector de colores
Selector de colores interactivo con salidas HEX, RGB, HSL y CMYK.
🎨 Color Tools
Generador de tonos de color
Genera tonos más oscuros de cualquier color con un recuento de pasos ajustable.
🎨 Color Tools
Generador de paletas de colores accesibles
Generar paletas de colores que cumplen con los requisitos de contraste de WCAG.
🎨 Color Tools
Simulador de Daltonismo
Simula cómo se ven los colores para personas con diferentes tipos de deficiencia de visión del color.
🎨 Color ToolsFrequently Asked Questions
Q ¿Qué es la relación de contraste WCAG?
Q ¿Cuál es la diferencia entre AA y AAA?
Q ¿Qué cuenta como texto grande?
Q ¿El color solo determina la accesibilidad?
About This Tool
Comprobador de Relación de Contraste is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.