Verifique la relación de contraste entre dos colores para garantizar el cumplimiento de accesibilidad WCAG 2.1. Pruebe para niveles AA y AAA tanto para texto normal como grande con vista previa en tiempo real.
Ingrese o seleccione su color de texto/primer plano usando el selector de color o escribiendo un valor HEX. Este suele ser su color de texto.
Ingrese o seleccione su color de fondo. Use el botón de intercambio para invertir rápidamente el primer plano y el fondo si es necesario.
Compruebe la relación de contraste y las insignias de cumplimiento WCAG. Las insignias verdes indican que pasa, las rojas indican que falla. Apunte al menos al cumplimiento AA para todo el texto.
Use la sección de vista previa para ver cómo se ve su combinación de colores con texto real en diferentes tamaños antes de implementarlo en su diseño.
WCAG (Pautas de Accesibilidad para el Contenido Web) define los requisitos de contraste para asegurar que el contenido sea legible por personas con discapacidades visuales. El nivel AA requiere 4.5:1 para texto normal y 3:1 para texto grande. El nivel AAA requiere 7:1 y 4.5:1 respectivamente.
La luminancia relativa mide el brillo percibido de un color usando la formula: L = 0.2126R + 0.7152G + 0.0722B. Los coeficientes reflejan la sensibilidad del ojo humano, siendo el verde el mas prominente. Los valores se linealizan desde sRGB antes del calculo.
La formula de la relacion de contraste es: (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia del color mas claro y L2 del mas oscuro. El desplazamiento de 0.05 evita la division por cero y tiene en cuenta la luz ambiental.
El texto grande se define como 18pt (24px) en peso normal o 14pt (18.5px) en negrita. El texto grande tiene requisitos de contraste mas bajos porque su mayor tamano lo hace naturalmente mas legible, incluso con menos contraste.
Aproximadamente el 8% de los hombres y el 0.5% de las mujeres tienen deficiencia en la vision del color. El texto con bajo contraste tambien es dificil de leer para usuarios mayores, bajo luz solar intensa o en pantallas de baja calidad. Un buen contraste beneficia a todos.
Una relación de contraste mide la diferencia de luminancia (brillo) entre dos colores. Va de 1:1 (sin contraste, mismo color) a 21:1 (contraste máximo, negro sobre blanco). Las relaciones más altas significan mejor legibilidad y accesibilidad.
Este es texto de párrafo normal. Un buen contraste garantiza la legibilidad para todos los usuarios, incluidos los que tienen discapacidades visuales.
Este es texto pequeño que requiere aún mejor contraste para su legibilidad.
Relación de contraste
Haz clic en cualquier par para usarlo como colores de primer plano/fondo
Saved Presets is a Supporter feature.
Tool History is a Supporter feature.
Tool Notes is a Supporter feature.
