¿Qué relación de contraste se recomienda para texto web según las normas?

Las pautas internacionales (WCAG) exigen una relación mínima de 4.5:1 para el texto normal y continuo. Para textos grandes (títulos o encabezados grandes), la exigencia se reduce a un mínimo de 3:1.

¿Esta herramienta simula cómo ven los colores las personas con daltonismo?

No, esta herramienta es una calculadora matemática que comprueba la relación de contraste según las fórmulas de WCAG. Para simular daltonismo, se recomienda usar software o extensiones de navegador especializadas.

¿Cómo se calcula matemáticamente la relación de contraste?

Se utiliza la fórmula oficial de WCAG basada en la luminancia relativa: (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia del color más claro y L2 es la luminancia del color más oscuro.

¿Es obligatorio alcanzar siempre el nivel AAA?

No es obligatorio para la mayoría de los sitios web comerciales. El nivel AA suele ser el estándar legal en muchos países y es suficiente para garantizar una buena accesibilidad. El nivel AAA es mucho más restrictivo y puede limitar las opciones de diseño.

¿Mis colores o diseños corporativos se envían a algún servidor externo?

No. Todo el procesamiento y cálculo de las relaciones de contraste se realiza localmente en tu navegador. Ningún color, dato o diseño se transmite por internet.

¿Puedo ingresar colores usando formatos diferentes al código HEX?

Sí, puede usar el selector visual ajustando el color, o ingresar manualmente los valores numéricos RGB (Rojo, Verde y Azul) en las cajas correspondientes, y el código HEX se actualizará automáticamente.

¿El certificado generado tiene validez legal?

El certificado es una prueba técnica basada en la fórmula matemática oficial de W3C, que puede servir como documento de referencia o registro interno. Sin embargo, para un cumplimiento legal absoluto en juicios, normalmente se requiere una auditoría completa realizada por un profesional de la accesibilidad.

♿

contrast checker,

Verificador de Contraste (WCAG 2.1)

Verifica el contraste de texto/fondo según WCAG.
Sugiere colores válidos y emite certificados de cumplimiento.

♿

WCAG 2.1 AA/AAA

Cumplimiento internacional completo

🎯

Sugerencia Automática

Propone el color válido más cercano

🏆

Emitir Certificado

Guardar comprobante válido

🔤 Color del Texto (Text)

HEX

🎨 Color de Fondo (Background)

HEX

Esto es texto normal (16px) — vista previa

Esto es texto en negrita (16px bold)

Esto es texto grande (24px)

Esto es texto grande en negrita (18px bold)

Relación de contraste

12.63 : 1

AA Válido

AA
4.5

AAA
7.0

✅

AA Texto normal

≥ 4.5:1

✅

AA Texto grande

≥ 3:1

✅

AAA Texto normal

≥ 7:1

✅

AAA Texto grande

≥ 4.5:1

📋 Código CSS

about,

Acerca de

Herramienta gratuita para verificar si las combinaciones de colores cumplen con los estándares de contraste WCAG 2.1. El bajo contraste dificulta la lectura para personas con discapacidades visuales.

Cuando los colores no cumplen, la herramienta sugiere automáticamente el color más cercano que sí cumple, permitiéndote mejorar la accesibilidad sin cambiar drásticamente el diseño.

Una vez que superes el estándar AA, podrás guardar un Certificado de Cumplimiento WCAG AA oficial para compartirlo a nivel internacional.

how to,

Cómo usar

PASO 1

Ingresa los colores

Haz clic en el selector de color o escribe un código HEX / RGB directamente para el texto y el fondo.

PASO 2

Revisa los resultados

La relación de contraste y el estado WCAG AA/AAA se actualizan en tiempo real con vista previa.

PASO 3

Emitir Certificado

Si supera el objetivo AA, se puede guardar y compartir un certificado de validación digital sin costo adicional.

glossary,

Glosario

Relación de contraste (Contrast Ratio): Un indicador numérico que representa la diferencia de luminosidad entre dos colores. Va desde 1:1 (colores idénticos) hasta 21:1 (contraste máximo: blanco puro sobre negro puro).
WCAG (Pautas de Accesibilidad): Web Content Accessibility Guidelines. Conjunto de normas internacionales publicadas por el W3C para hacer el contenido web más accesible para personas con discapacidades.
Nivel de cumplimiento AA: El estándar de accesibilidad aceptado a nivel mundial. Exige una relación de contraste mínima de 4.5:1 para el cuerpo de texto normal y 3:1 para textos grandes (ej. encabezados).
Nivel de cumplimiento AAA: El nivel de accesibilidad más exigente de WCAG. Requiere mayores contrastes visuales: 7:1 para el texto normal y 4.5:1 para los textos grandes.
Luminancia Relativa: La iluminación relativa de cualquier punto en el espacio de color. Permite calcular matemáticamente el contraste según cómo percibe la luz el ojo humano, desde el negro (0) al blanco (1).
Accesibilidad Web (a11y): Prácticas de diseño y desarrollo web que aseguran que el sitio pueda ser utilizado por la mayor cantidad de personas posible, independientemente de sus capacidades físicas, visuales o cognitivas.

faq,

FAQ

Q.¿Qué relación de contraste se recomienda para texto web según las normas?: Las pautas internacionales (WCAG) exigen una relación mínima de 4.5:1 para el texto normal y continuo. Para textos grandes (títulos o encabezados grandes), la exigencia se reduce a un mínimo de 3:1.
Q.¿Esta herramienta simula cómo ven los colores las personas con daltonismo?: No, esta herramienta es una calculadora matemática que comprueba la relación de contraste según las fórmulas de WCAG. Para simular daltonismo, se recomienda usar software o extensiones de navegador especializadas.
Q.¿Cómo se calcula matemáticamente la relación de contraste?: Se utiliza la fórmula oficial de WCAG basada en la luminancia relativa: (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia del color más claro y L2 es la luminancia del color más oscuro.
Q.¿Es obligatorio alcanzar siempre el nivel AAA?: No es obligatorio para la mayoría de los sitios web comerciales. El nivel AA suele ser el estándar legal en muchos países y es suficiente para garantizar una buena accesibilidad. El nivel AAA es mucho más restrictivo y puede limitar las opciones de diseño.
Q.¿Mis colores o diseños corporativos se envían a algún servidor externo?: No. Todo el procesamiento y cálculo de las relaciones de contraste se realiza localmente en tu navegador. Ningún color, dato o diseño se transmite por internet.
Q.¿Puedo ingresar colores usando formatos diferentes al código HEX?: Sí, puede usar el selector visual ajustando el color, o ingresar manualmente los valores numéricos RGB (Rojo, Verde y Azul) en las cajas correspondientes, y el código HEX se actualizará automáticamente.
Q.¿El certificado generado tiene validez legal?: El certificado es una prueba técnica basada en la fórmula matemática oficial de W3C, que puede servir como documento de referencia o registro interno. Sin embargo, para un cumplimiento legal absoluto en juicios, normalmente se requiere una auditoría completa realizada por un profesional de la accesibilidad.

use cases,

Casos de uso

🎨

Validación de diseño web

Verifica el contraste durante el diseño para garantizar el cumplimiento de WCAG en portales y landing pages.

📱

Revisión de UI móvil

Asegura una perfecta nitidez visual en textos y botones de interfaces móviles, ayudando a usuarios en entornos de iluminación desfavorable o con deficiencias visuales.

🏢