Comprobador de contraste
Introduces dos colores, sale la relación y un veredicto para cada tamaño que WCAG evalúa por separado. Cuando una pareja no pasa, busca el color más cercano que sí pasa sin mover tu tono, para que el arreglo no se salga de la marca. La cifra más reciente, la de APCA, va al lado, señalada con claridad como algo que todavía no es el estándar.
| Dónde se usa | Mínimo | AA | AAA |
|---|
Texto grande, de 24 px en adelante
Texto corrido a tamaño normal, que es el caso que de verdad tiene que aprobar casi cualquier página.
Qué mide realmente la relación
Cada color se convierte en una luminancia relativa: una suma ponderada de sus canales rojo, verde y azul después de deshacer la curva gamma sRGB, con el verde como canal de más peso porque es al que más sensible es el ojo. La relación es la luminancia más clara más una pequeña constante, dividida por la más oscura más esa misma constante. Esa constante es lo que impide que la escala se dispare al infinito contra el negro puro, y es también la razón de que la fórmula sea más benévola con los fondos oscuros de lo que lo es el ojo de la mayoría.
Por qué una sola pareja recibe varios veredictos
WCAG no evalúa una pareja de colores una sola vez. Al texto grande se le permite un listón más bajo que al texto corrido, porque el tamaño hace parte del trabajo que si no tendría que hacer el contraste, y los componentes de interfaz —el borde de una casilla, un anillo de foco— se evalúan aparte otra vez. Una paleta que suspende para el cuerpo de texto puede ser perfectamente correcta para un titular, así que la tabla da todos los casos en lugar de un único aprobado o suspenso.
Conservar el tono al corregirlo
El arreglo habitual para una pareja que no pasa es echar mano de un gris más oscuro, lo que va vaciando de color a una marca sin que nadie lo note. La sugerencia de aquí mueve solo la luminosidad, en el paso más pequeño que supera el umbral, y deja el tono y la saturación donde tú los pusiste. Es el mismo color, solo llevado lo justo para que se lea.
Sobre la cifra de APCA
APCA es el modelo de contraste que se está desarrollando para la próxima versión de las pautas. Tiene en cuenta cosas que la relación de WCAG 2 ignora —la polaridad, el grosor de la letra, cómo decae el contraste percibido sobre fondos oscuros— y suele coincidir con lo que ves cuando la fórmula antigua no lo hace. Se muestra aquí porque informa de verdad, y se etiqueta con claridad porque no es aquello con lo que te miden. Hoy la conformidad es la relación, no el Lc.
Preguntas frecuentes
¿Qué cuenta como texto grande?
18 puntos, unos 24 píxeles, o 14 puntos en negrita, unos 18,66 píxeles en negrita. Por debajo de eso es texto normal y necesita la relación más alta.
Mis grises pasan sobre blanco pero no sobre oscuro. ¿Por qué?
La fórmula de WCAG 2 no es simétrica del modo en que sí lo es la percepción. El texto claro sobre fondo oscuro se ve con menos contraste de lo que sugiere la relación, y ese es justo uno de los huecos que APCA vino a cerrar. Si la pareja pasa por los pelos en oscuro, hazle caso a tus ojos y súbelo un poco más.
¿La relación vale también para iconos y bordes?
Sí, en 3:1, por la regla de contraste de elementos no textuales. Cubre las partes de un control que necesitas ver para usarlo —el contorno de un campo, un interruptor, un indicador de foco—, pero no los gráficos decorativos ni un logotipo.
¿Se envía a algún sitio lo que escribo aquí?
No. Los colores no salen nunca de la página, y no se sube ni se guarda nada.
Hecho por el equipo de GO AI. Conversor OKLCH · Nuestra declaración de accesibilidad · Todas las herramientas gratuitas