AA · texto normal
Requiere 4,5:1
Volver al catálogo
Laboratorio de contraste WCAG 2.2
Comprueba cualquier par de colores de texto y fondo.
Introduce dos colores sRGB opacos para calcular su relación de contraste, comprobar los umbrales WCAG AA y AAA para texto, revisar la combinación y copiar el CSS exacto.
01 / Relación de contraste
Una relación, cuatro umbrales para texto.
Los valores WCAG son umbrales: un resultado insuficiente no debe redondearse al alza. El texto grande mide al menos 24 píxeles CSS con peso normal o unos 18,7 píxeles CSS en negrita.
AA · texto grande
Requiere 3:1
AAA · texto normal
Requiere 7:1
AAA · texto grande
Requiere 4,5:1
Implementación
Lleva el par comprobado a tu CSS.
Las propiedades personalizadas conservan los valores opacos exactos empleados en el cálculo. Comprueba cada estado y superficie real donde aparezca la combinación.
--text-color: #000000;
--background-color: #2F80ED;
color: var(--text-color);
background-color: var(--background-color);Criterios publicados
Qué demuestra esta comprobación y qué queda fuera.
El cálculo aplica las reglas de luminancia relativa y relación de contraste de WCAG 2.2 para colores sRGB. Un resultado numérico sirve como prueba para este par, pero no certifica por sí solo una página o un producto.
Contraste mínimo del texto
En el nivel AA, el texto normal necesita al menos 4,5:1 y el texto grande, 3:1.
Leer la guía del W3CContraste mejorado del texto
En el nivel AAA, el texto normal necesita al menos 7:1 y el texto grande, 4,5:1.
Leer la guía del W3CContraste no textual
Los controles, estados y objetos gráficos esenciales suelen necesitar 3:1 frente a los colores adyacentes, pero sus límites reales deben comprobarse en contexto.
Leer la guía del W3C