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.
Higher ratios are more readable. 21:1 is pure black on white.
See your color pair on both body and heading sizes.
Normal body text at 16 pixels. WCAG 2.2 measures contrast between the foreground text and its immediate background — this preview shows the combination you entered above exactly as a user would see it.
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