AnyTools
🌓
Calculadora de contraste de Couleur
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.
Entradas de Couleur
Primer plano
Fondo
Vista previa
Texto de muestra
Encabezado de vista previaLas interfaces accesibles combinan colores de marca vibrantes con suficiente contraste para mantener la copia legible.
Resultados de contraste
Relación de contraste
19.79:1
Luminancia relativa
Primer plano0.003
Fondo1.000
| Criterio | Requerido | Estado | Notas |
|---|---|---|---|
| AA – texto normal | 4.5:1 | Aprobado | Cuerpo del texto ≥ 4.5:1 |
| AAA – texto normal | 7.0:1 | Aprobado | Copia de alta importancia ≥ 7:1 |
| AA – texto grande | 3.0:1 | Aprobado | Texto ≥ 18pt regular o 14pt en negrita ≥ 3:1 |
| AAA – texto grande | 4.5:1 | Aprobado | Texto grande ≥ 4.5:1 |
| Gráficos/iconos de interfaz | 3.0:1 | Aprobado | Iconos esenciales y estados visuales ≥ 3:1 |
Orientación de diseño
Use la tabla de relaciones como barrera y itera hasta que cada estado alcance el nivel objetivo.
- Agregue transparencia o superposiciones al colocar texto en fotografías para preservar el contraste.
- Reserve AAA para copia de misión crítica; AA es un excelente predeterminado para la mayoría de los paneles.
- Documente los pares de colores aprobados en su sistema de diseño para que los desarrolladores reutilicen paletas conformes.
❓Qué es la prueba de contraste de Couleur
La prueba de contraste de Couleur garantiza que el texto o los iconos sigan siendo legibles midiendo la diferencia entre la luminancia de primer plano y fondo, un requisito clave en WCAG y la mayoría de las guías de marca.
✨Características principales
🎨
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.
📚Introducción técnica
🔢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.
❓
Frequently Asked Questions
❓
¿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.
💡How To & Tips
🧭
Comenzar con paleta de marca
Intercambie colores rápidamente para probar temas claros y oscuros desde la misma paleta base.
🪄
Iterar en pequeños pasos
Ajuste los valores HEX o use el control deslizante del selector de Couleur para ver cómo los pequeños ajustes afectan el cumplimiento.
📝
Vista previa de contenido
Pegue copia de interfaz de usuario real en el bloque de vista previa para evaluar jerarquía y énfasis.
🔗Related Documents
📖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.
🧭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.
📝Registro de actualizaciones
📌v1.0.251117v1.0.0Lanzamiento inicial con tabla WCAG, lectura de luminancia y tarjeta de vista previa en vivo.(17 de noviembre de 2025)
📦Componentes recomendados
User Comments
Loading...