Comprueba los colores que realmente se ven juntos
Introduce el color HEX del texto y otro para el fondo. La herramienta convierte los canales sRGB de ambos a luminancia relativa y calcula el contraste entre el color más claro y el más oscuro. La proporción va de 1:1 cuando los colores son iguales a 21:1 para negro frente a blanco. El número es más fiable que juzgar los nombres de los tonos a simple vista, porque dos colores diferentes pueden tener luminancias muy parecidas. El recuadro muestra la pareja elegida como texto sobre un fondo real. Usa los colores efectivos de ese lugar: un degradado, una capa translúcida o una superposición puede cambiar el fondo que queda detrás de las letras. Si hay transparencia, determina primero el color compuesto visible y comprueba ese resultado opaco. Intercambiar fondo y texto no cambia la proporción, aunque sí cambia el aspecto.
Interpretar los umbrales AA y AAA
Para texto normal, WCAG 2.2 exige al menos 4,5:1 en el nivel AA; para texto grande que cumpla las condiciones correspondientes, el mínimo es 3:1. Los objetivos AAA son 7:1 y 4,5:1 respectivamente. La página muestra cuatro resultados separados para que no tengas que inferir uno a partir de otro. Una pareja puede aprobar AA en letras grandes y fallar en el cuerpo del artículo. Elige el criterio según el texto tal como se renderiza, no por el nombre asignado al estilo. Como ejemplo, el azul oscuro #1A365D sobre blanco #FFFFFF alcanza aproximadamente 12,14:1 y supera los cuatro umbrales mostrados. Prueba después un azul más claro y observa cómo la proporción y los indicadores cambian al cruzar un límite.
Integrarlo en una revisión de diseño
Empieza por el texto corriente, que suele necesitar el umbral más exigente para tamaño normal. Comprueba después títulos, etiquetas de formularios, enlaces, navegación y texto de botones en sus estados reales. Anota la pareja exacta de colores utilizada para poder repetir la prueba si cambia el tema. La vista previa permite comparar opciones de paleta rápidamente, mientras que la cifra evita decidir solo por preferencias estéticas. Los componentes sin texto siguen otro criterio de WCAG; aprobar aquí no certifica iconos, bordes, indicadores de foco ni una página completa. El tamaño y peso finales de la fuente determinan si puede aplicarse la excepción del texto grande. Una revisión de accesibilidad también exige comprobar teclado, zoom y otras necesidades.
Evitar errores de medición
No compares el texto con blanco solo porque el lienzo general sea blanco si la frase está dentro de una tarjeta de otro color. Comprueba la superficie situada exactamente detrás de esas letras. Tampoco redondees hacia arriba antes de evaluar el umbral: la herramienta usa el valor sin redondear y presenta después una cifra más corta. Si aparece 4,50:1 muy cerca del límite, revisa los colores exactos y la implementación final. El cálculo de WCAG se basa en los valores sRGB especificados, aunque una pantalla o captura pueda parecer diferente. Revisa en el sitio las capas superpuestas y los cambios de estado. Si una combinación falla, ajusta el primer plano, el fondo o ambos y vuelve a medir; agrandar la letra sin verificar las condiciones de texto grande puede llevar a una conclusión falsa.