Skip to main content

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 illustration
🎨

Comprobador de Relación de Contraste

Verifica las relaciones de contraste WCAG entre colores de primer plano y fondo.

1

Establecer colores

Ingrese los colores de primer plano (texto) y fondo.

2

Comprobar la conformidad

Vea la relación de contraste y los resultados de aprobación/rechazo de WCAG AA/AAA.

3

Ajustar e intercambiar

Modifique los colores hasta alcanzar su nivel objetivo de conformidad.

Loading tool...

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

  • 1
    Apunte 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
  • 2
    El texto grande (18px+ o 14px+ en negrita) tiene un requisito más bajo de 3:1 para AA
  • 3
    La conformidad AAA (7:1) garantiza la legibilidad para los usuarios con discapacidades visuales más graves
  • 4
    Utilice el botón de intercambio para probar si sus colores funcionan bien en ambas orientaciones
  • 5
    Los diseños de modo oscuro necesitan las mismas relaciones de contraste - pruebe ambos modos

Related Tools

Frequently Asked Questions

Q ¿Qué es la relación de contraste WCAG?
Es una medida numérica (1:1 a 21:1) de la diferencia de brillo entre dos colores. WCAG especifica relaciones mínimas para garantizar la legibilidad del texto para las personas con discapacidades visuales.
Q ¿Cuál es la diferencia entre AA y AAA?
AA es el estándar de accesibilidad mínimo (4,5:1 para texto normal). AAA es una accesibilidad mejorada (7:1 para texto normal). La mayoría de las regulaciones requieren AA; AAA es una buena práctica.
Q ¿Qué cuenta como texto grande?
WCAG define el texto grande como 18 puntos (24 píxeles) o más para peso regular, o 14 puntos (18,67 píxeles) o más para peso en negrita. El texto grande tiene requisitos de contraste más bajos.
Q ¿El color solo determina la accesibilidad?
No. La relación de contraste es un factor. También debe asegurarse de que el color no sea el único medio para transmitir información (use iconos, patrones, etiquetas también) y pruebe con simulaciones de daltonismo.

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.