Loading...
Loading...
Prueba cualquier par de color de texto y fondo contra los requisitos de contraste WCAG 2.2 AA y AAA, con retroalimentación instantánea de aprobado/reprobado y una vista previa en vivo.
Relaciones más altas son más legibles. 21:1 es negro puro sobre blanco.
Vea su par de colores en tamaños de cuerpo y encabezado.
Texto normal del cuerpo a 16 píxeles. WCAG 2.2 mide el contraste entre el texto en primer plano y su fondo inmediato; esta vista previa muestra la combinación que ingresó arriba exactamente como un usuario la vería.
Un verificador de contraste mide la diferencia de luminancia entre dos colores y la informa como una relación entre 1:1 (idéntico) y 21:1 (negro puro sobre blanco puro). Las pautas de accesibilidad utilizan esa relación para decidir si el texto es legible para usuarios con baja visión, daltonismo o pantallas vistas a la luz brillante del sol. Esta herramienta sigue WCAG 2.2, el mismo estándar mencionado por la ADA en EE. UU., la Ley de Accesibilidad Europea y la mayoría de los sistemas de diseño corporativos. Ingrese cualquier par de colores y obtendrá un pase/fallo instantáneo en los cinco umbrales de WCAG, además de una vista previa en tamaños de cuerpo y encabezado. Todo se ejecuta en su navegador: sin carga, sin seguimiento, sin cuenta.
Pegue un código hexadecimal o use el selector de color para el color del primer plano (texto). La herramienta también acepta abreviaturas de 3 dígitos como #03A.
Haga lo mismo para el fondo. Si solo conoce el color del texto, deje el fondo en blanco (#FFFFFF) para la prueba predeterminada.
El gran número de relación se actualiza a medida que escribe. Una relación inferior a 3.0 fallará incluso el umbral más laxo de WCAG para texto normal.
Las cinco insignias muestran pase/fallo para los umbrales AA normal, AA grande, AAA normal, AAA grande y componentes de UI. AA es el mínimo legal habitual; AAA es el objetivo mejorado para contenido clave.
Verifique que la vista previa se vea bien en tamaño de encabezado y cuerpo, luego use Copiar CSS para obtener las declaraciones `color:` y `background-color:` para su hoja de estilos.
Para cada canal (R, G, B escalado de 0 a 1): c_linear = (c ≤ 0.03928) ? c / 12.92 : ((c + 0.055) / 1.055)^2.4 Luminancia relativa: L = 0.2126·R_linear + 0.7152·G_linear + 0.0722·B_linear Relación de contraste: ratio = (L_light + 0.05) / (L_dark + 0.05) donde L_light = max(L1, L2) y L_dark = min(L1, L2)
La fórmula proviene de WCAG 2.x y aplica una curva de corrección gamma a cada canal sRGB antes de calcular la luminancia. Los pesos (0.2126, 0.7152, 0.0722) reflejan la sensibilidad del cono humano a la luz roja, verde y azul. Agregar 0.05 a ambos términos evita la división por cero cuando un color es negro perfecto. Las relaciones varían de 1:1 (colores idénticos) a 21:1 (negro puro sobre blanco puro).
Referencia: WCAG 2.2 — Contraste (Mínimo) 1.4.3
| Par | Relación y veredicto |
|---|---|
#000000 sobre #FFFFFF | 21:1 — pasa todos los umbrales El contraste máximo canónico. Usado para interfaces de lectura de formato largo. |
#1A73E8 sobre #FFFFFF | 4.63:1 — pasa AA normal, falla AAA normal Azul de Google sobre blanco. Legal para texto del cuerpo, no del todo AAA. |
#808080 sobre #FFFFFF | 3.95:1 — falla AA normal, pasa AA grande Gris medio sobre blanco — bien para encabezados, demasiado claro para párrafos. |
Convierte entre HEX, RGB y HSL con muestras en vivo, deslizadores y copia instantánea.
Calcula tu edad exacta en años, meses y días a partir de cualquier fecha de nacimiento.
Verifica el índice de masa corporal a partir de la altura y el peso utilizando unidades métricas o imperiales.
Calcula porcentajes, cambio porcentual y porcentaje de un total en segundos.
Última actualización