Verifique las relaciones de contraste WCAG 2.1 entre cualquier Couleur de primer plano y fondo, previsualice texto de muestra y vea los resultados de aprobación AA/AAA al instante.
Características
- Selección de Couleur en vivo: Ajuste los colores de primer plano y fondo con el selector de Ant Design o escriba valores HEX precisos.
- Matriz WCAG: Vea los requisitos AA/AAA para texto normal, texto grande y gráficos de interfaz de usuario en una sola tabla.
- Luminancia precisa: Las relaciones de contraste siguen WCAG 2.1 utilizando canales RGB linealizados e incluyen lecturas de luminancia por Couleur.
- Bloque de vista previa: Pruebe encabezados y párrafos dentro de una tarjeta de muestra en vivo con su paleta elegida.
Guía de uso
- Elegir colores: Seleccione o pegue valores HEX para primer plano y fondo.
- Revisar relación: Verifique la relación de contraste calculada y la tabla AA/AAA para conocer los resultados de aprobación/fallo.
- Ajustar copia: Edite el texto de muestra para previsualizar etiquetas, botones o copia de marketing reales.
Detalles técnicos
Luminancia relativa
Cada canal RGB se convierte en un valor lineal utilizando la curva gamma WCAG antes de calcular la luminancia con coeficientes 0.2126, 0.7152 y 0.0722.
Relación de contraste
La fórmula de relación (L1 + 0.05) / (L2 + 0.05) compara los colores más claros y más oscuros para garantizar una legibilidad consistente en todos los dispositivos.
Umbrales
El texto normal AA requiere ≥ 4.5:1, el texto grande ≥ 3:1, el normal AAA necesita 7:1, el grande AAA 4.5:1, y los objetos gráficos deben cumplir con 3:1.
Preguntas frecuentes
- ¿El texto grande utiliza umbrales diferentes?
- Sí. El texto ≥ 18px regular o 14px en negrita califica como grande y solo necesita 3:1 para AA o 4.5:1 para AAA.
- ¿Cómo pruebo los degradados?
- Verifique las paradas más claras y más oscuras del degradado. Cada par de paradas debe cumplir con la relación deseada.
- ¿Los iconos cuentan como texto?
- Los iconos sólidos y los gráficos de interfaz de usuario esenciales deben cumplir con al menos 3:1 de contraste en relación con su fondo.
Documentación relacionada
- WCAG 2.1 Contraste (Criterio de éxito 1.4.3) - Orientación oficial sobre niveles de contraste mínimos para texto e imágenes de texto.
- WCAG 2.1 Contraste (1.4.6) - Requisitos de contraste mejorados para conformidad AAA.
- MDN - Cálculo de luminancia - Antecedentes sobre la fórmula RGB lineal utilizada en herramientas de accesibilidad.
- W3C - Matemáticas de relación de contraste - Detalles sobre la fórmula de relación, redondeo y justificación.
- Tarjetas de diseño inclusivo - Consejos sobre cómo combinar colores y tipografía para audiencias diversas.