Diseño

Verificador de Contraste de Color

Relación de contraste WCAG para dos colores.

Casi sin darnos cuenta, habíamos dejado el suelo.
1.00
Relación de contraste
EstándarTexto normalTexto grande
WCAG AA
WCAG AAA
WCAG 1.4.11Componentes no textuales/de UI (≥3:1): —

Alternativa de texto AA más cercanaCalculando una alternativa OKLCH…

Este informe sigue los requisitos de relación de contraste de WCAG 2.2. APCA sigue siendo experimental y no constituye un resultado de conformidad con WCAG 3.

¿Elegir colores? Conversor de color · bios sociales: Generador de texto elegante · escalas: Generador de tonos de color.

Cómo usar

Elige un color de texto y un color de fondo. La relación de contraste y el resultado aprobado/fallido para cada nivel WCAG se actualizan en vivo, con una vista previa.

Preguntas frecuentes

¿Qué es una buena relación de contraste?

WCAG AA exige 4.5:1 para texto normal y 3:1 para texto grande. AAA exige 7:1 y 4.5:1, respectivamente. WCAG 1.4.11 también exige 3:1 para gráficos esenciales no textuales y para los límites o estados de los componentes de UI.

¿Qué se considera texto grande?

El texto grande es de aproximadamente 18pt (24px) o 14pt (18.66px) en negrita y mayor.

¿Cómo se calcula la proporción?

A partir de la luminancia relativa de ambos colores: (más claro + 0.05) ÷ (más oscuro + 0.05), según la fórmula WCAG.

Última actualización: