Comprueba el contraste WCAG 2.2 entre texto y fondo, con resultados AA y AAA para texto normal, texto grande y componentes de interfaz.
Por AdminRedactado con herramientas de redacción con IAActualizado Ejemplos verificados: 5
#1F2937 sobre #FFFFFF tiene una relación de contraste de 14.67:1 y cumple AA para texto normal; AA para texto grande; AAA para texto normal; AAA para texto grande; Componentes de interfaz.
Texto normal, 16 px: El veloz murciélago hindú comía feliz cardillo y kiwi
Texto grande, 24 px (18 pt): El veloz murciélago hindú comía feliz cardillo y kiwi
Texto grande en negrita, 19 px (14 pt): El veloz murciélago hindú comía feliz cardillo y kiwi
WCAG usa 0,04045 como umbral de transferencia sRGB. El valor anterior, 0,03928, se actualizó en mayo de 2021; ningún canal de 8 bits queda entre ambos umbrales.
Se compara sin redondear con los umbrales: 4,5 para texto normal en AA; 3 para texto grande e interfaz; y 7 y 4,5 en AAA.
WCAG mide el contraste como (L1 + 0,05) ÷ (L2 + 0,05), donde L1 y L2 son las luminancias relativas del color más claro y del más oscuro. Cada luminancia se obtiene de canales sRGB linealizados, con pesos de 0,2126 para rojo, 0,7152 para verde y 0,0722 para azul. La relación va de 1:1 para colores idénticos a 21:1 para negro sobre blanco.
Diseñadores y desarrolladores lo comprueban antes de publicar textos, botones e iconos. El ejemplo inicial, texto gris pizarra #1F2937 sobre blanco, mide 14,67:1 y supera las cinco comprobaciones. En cambio, #777777 sobre blanco muestra 4,47:1, justo por debajo del 4,5:1 necesario para texto normal en nivel AA.
La relación se trunca a dos decimales y se compara sin redondear, como exige WCAG: 4,499:1 no alcanza el umbral 4,5:1. Aquí f indica el primer plano y b el fondo. Se ignora el canal alfa; mezcla primero un color semitransparente con su fondo.
El comprobador de contraste WCAG compara un color de texto o primer plano con su fondo. Devuelve la relación de contraste y cinco resultados: AA para texto normal, AA para texto grande, AAA para texto normal, AAA para texto grande y componentes de interfaz. Introduce los colores utilizados por el diseño y lee el resultado correspondiente al elemento que estás revisando.
La pareja inicial es #1F2937 sobre #FFFFFF. La relación calculada es aproximadamente 14,679 y se muestra como 14,67:1. Supera los cinco umbrales. La presentación corta el valor a dos decimales; las decisiones utilizan el resultado completo antes de ese formato.
La herramienta comprueba una pareja de colores. Para evaluar una página completa también hay que revisar los estados, el contenido, los controles y las demás condiciones de accesibilidad que correspondan. Un buen resultado de contraste no informa por sí solo sobre el foco, las etiquetas o el funcionamiento con teclado.
El cálculo toma los canales rojo, verde y azul de cada color sRGB, los normaliza entre cero y uno y los transforma a luz lineal. Después combina los canales con los pesos 0,2126, 0,7152 y 0,0722. Estos pesos dan una contribución diferente a cada canal.
La definición de luminancia relativa de WCAG utiliza el umbral de transferencia 0,04045. Por debajo se divide el canal normalizado entre 12,92; por encima se aplica la expresión no lineal. Los números de canal codificados no se utilizan directamente como si fueran medidas de intensidad luminosa.
La relación final es (luminancia más clara + 0,05) ÷ (luminancia más oscura + 0,05). El color claro ocupa siempre el numerador. Por eso intercambiar el primer plano y el fondo conserva la relación matemática. Negro y blanco producen 21:1; dos colores idénticos producen 1:1.
La luminosidad porcentual HSL es otra cantidad. Un azul y un verde con el mismo porcentaje HSL pueden tener luminancias y contrastes diferentes. Para comprobar la combinación, utiliza sus colores reales y no una posición parecida de los deslizadores del selector.
El criterio de contraste mínimo establece 4,5:1 para texto normal y 3:1 para texto grande. Se considera grande el texto de al menos 18 puntos con peso regular o 14 puntos en negrita. Con 96 píxeles CSS por pulgada, corresponden a 24 píxeles y aproximadamente 18,67 píxeles CSS.
El criterio de contraste mejorado utiliza 7:1 para texto normal y 4,5:1 para texto grande. Una combinación apta para un título grande puede seguir siendo insuficiente para una leyenda pequeña.
El contraste no textual aplica 3:1 a la información visual pertinente de controles y gráficos frente a los colores adyacentes. Para utilizar el resultado de interfaz hay que identificar qué parte del dibujo comunica la información necesaria.
En un botón, compara el texto con su relleno y considera por separado la información visual que permite reconocer el control y su estado. En un icono, revisa la parte significativa frente al fondo inmediato. Un gráfico puede exigir varias comparaciones porque sus series se tocan entre sí y con distintos fondos.
La comparación utiliza el valor sin redondear. Una relación de 4,499:1 no alcanza 4,5:1, aunque redondearla a un decimal produciría 4,5. El corte de la presentación a dos decimales evita algunas apariencias engañosas cerca del límite.
Para #777777 sobre blanco, el cálculo da aproximadamente 4,4781 y la pantalla muestra 4,47:1. No supera AA para texto normal. Para #767676 sobre blanco, el valor es aproximadamente 4,5422 y se muestra 4,54:1: supera AA normal, pero no AAA normal.
Los dos grises son cercanos, aunque quedan a lados distintos del umbral. En el diseño real, comprueba además el tamaño, el peso, la fuente y su representación. Un margen suficiente facilita mantener la combinación cuando cambian los estados o se ajusta una variable de estilo.
| Escenario | Relación mostrada | AA normal | AAA normal |
|---|---|---|---|
| Predeterminado | 14,67 | Supera | Supera |
| Negro sobre blanco | 21,00 | Supera | Supera |
| #777777 sobre blanco | 4,47 | No supera | No supera |
| #767676 sobre blanco | 4,54 | Supera | No supera |
| Blanco idéntico | 1,00 | No supera | No supera |
La relación es adimensional y cada número se lee respecto a uno. Estos ejemplos usan colores sRGB opacos y un fondo blanco. Si cambia el fondo, hay que volver a calcular la pareja correspondiente.
Los campos admiten colores hexadecimales, nombres CSS compatibles y las notaciones admitidas rgb(), hsl() y oklch(). La vista previa muestra los colores que recibe el cálculo. Una sintaxis incorrecta genera un error de entrada que debe corregirse antes de interpretar resultados.
El componente alfa se ignora. Un negro transparente se procesa como negro opaco, de modo que su resultado no describe la apariencia del negro transparente sobre un fondo concreto. Obtén primero el color visible después de la composición utilizada por la interfaz real.
Ciertas entradas de otros espacios pueden quedar fuera de sRGB. La herramienta avisa cuando recorta canales para situarlos dentro de ese intervalo. El contraste del color recortado no describe todas las condiciones de una representación de gama amplia. Los canales rgb() fuera del intervalo numérico admitido se rechazan.
El conversor de colores ayuda a inspeccionar representaciones. El simulador de daltonismo permite explorar cambios de tono bajo otro modelo. Cada comparación aporta información diferente a la revisión del componente.
Una fotografía, un degradado, un estado seleccionado o un cambio al pasar el puntero pueden alterar el color adyacente. Revisa las parejas pertinentes en cada ubicación y estado. Un resultado satisfactorio en una zona de una imagen no garantiza el mismo resultado en las demás.
Registra el primer plano, el fondo, la categoría de texto y el veredicto exacto. Así otra persona podrá reproducir la comprobación y evitará reutilizar una aprobación para texto grande en un contexto de texto pequeño. La vista previa ayuda a interpretar la pareja; los cinco resultados indican los umbrales que alcanza.
Fuente de comprobación: Comprobación del ejemplo: Definición de WCAG 2.2: (1 + 0,05) / (0 + 0,05) = 21
Fuente de comprobación: Cálculo independiente
Fuente de comprobación: Cálculo independiente
Fuente de comprobación: Comprobación del ejemplo: Definición de WCAG 2.2: (L + 0,05) / (L + 0,05) = 1
El nivel AA exige al menos 4,5:1 para texto normal y 3:1 para texto grande (criterio 1.4.3), y 3:1 para componentes de interfaz y gráficos significativos (1.4.11). El nivel AAA eleva el texto normal a 7:1 y el grande a 4,5:1 (1.4.6). Los logotipos, controles desactivados y textos puramente decorativos están exentos.
Texto de al menos 18 puntos, o de 14 puntos si está en negrita. En CSS, donde 1 pt son 1,333 px, equivale a 24 px en peso normal y unos 18,66 px en negrita. La explicación de W3C los sitúa aproximadamente en 1,5 em y 1,2 em respecto al texto normal predeterminado, y advierte de que las fuentes muy finas pueden necesitar más contraste. El texto grande solo necesita 3:1 en AA, en lugar de 4,5:1.
#767676, que da 4,54:1 sobre #FFFFFF. El siguiente tono más claro, #777777, muestra 4,47:1 y no cumple, porque WCAG compara la relación exacta con 4,5 sin redondear hacia arriba. Para texto grande puedes usar tonos más claros: cualquier gris que alcance 3:1, como #949494 con 3,03:1, cumple AA.
No. WCAG 2.2 se convirtió en recomendación W3C el 5 de octubre de 2023 y añadió 9 criterios, principalmente sobre visibilidad del foco, tamaño de objetivos y autenticación. Los criterios de contraste 1.4.3, 1.4.6 y 1.4.11 son los mismos que en WCAG 2.1. Una pareja de colores que cumplía en 2.1 sigue cumpliendo en 2.2, con los mismos umbrales 4,5:1 y 3:1.
No. La fórmula coloca siempre la luminancia del color más claro en el numerador: texto blanco sobre #1F2937 y texto #1F2937 sobre blanco dan 14,67:1. Lo que cambia es la percepción: texto claro sobre fondo oscuro puede parecer más fino o grueso según la fuente y la pantalla. Comprueba también cómo se ve en pantalla, sobre todo con tamaños pequeños.
Esta calculadora incluye 5 ejemplos resueltos con respuestas de fuentes independientes. Forman parte del conjunto de pruebas y también puedes ejecutarlos aquí.