Qué hace
El comprobador de contraste te dice si un color de texto es legible sobre un color de fondo según las Pautas de Accesibilidad para el Contenido Web (WCAG 2.x). Escribe cualquier color CSS para el texto y el fondo —HEX, rgb(), hsl(), un nombre de color o un color transparente— y verás la relación de contraste, si cumple o no cada criterio AA y AAA, y una vista previa en vivo. Si la pareja no cumple, sugiere los colores de texto y de fondo aprobados más cercanos, con el mismo tono. Todo se ejecuta en tu navegador.
Cómo usarlo
- Escribe o elige el Color del texto y el Color de fondo. Intercambiar los cambia de lugar.
- Lee la Relación de contraste y la lista de resultados para texto normal, texto grande y componentes de interfaz.
- Si un nivel no cumple, mira Colores aprobados más cercanos: cada sugerencia muestra el nuevo color, su relación, un botón de copiar y Usar para aplicarlo.
- Activa APCA para ver también el contraste de luminosidad (Lc) del borrador WCAG 3.
Los colores semitransparentes se mezclan antes de comprobar: el texto sobre el fondo y el fondo sobre blanco.
Ejemplo
#767676 on #ffffff → 4.54:1 passes AA normal text
#777777 on #ffffff → 4.47:1 fails AA normal text, passes AA large text
#000000 on #ffffff → 21:1 the maximumCómo se calcula la relación
La luminancia relativa de cada color se calcula a partir de sus canales sRGB (linealizados y ponderados 21 % rojo, 72 % verde y 7 % azul). La relación es (más clara + 0,05) / (más oscura + 0,05), y va de 1:1 para colores idénticos a 21:1 para negro sobre blanco. Solo importa la luminosidad, no el tono: rojo puro sobre verde puro parece muy colorido pero apenas llega a 1,3:1.
Las sugerencias solo cambian la luminosidad del color (en HSL) y eligen la dirección, más oscura o más clara, que requiere el menor cambio. A veces ningún tono lo consigue: sobre un fondo gris medio ningún color de texto llega a 7:1.
Preguntas frecuentes
› ¿Qué relación de contraste necesito?
El nivel AA de WCAG 2.x exige al menos 4,5:1 para texto normal y 3:1 para texto grande y para componentes de interfaz como bordes de campos, iconos y anillos de foco. El nivel AAA exige 7:1 para texto normal y 4,5:1 para texto grande. La mayoría de las leyes y políticas remiten al nivel AA.
› ¿Qué se considera texto grande?
El texto de al menos 24px (18pt) en peso normal, o de al menos 18,66px (14pt) en negrita. Todo lo más pequeño es texto normal y necesita la relación más alta.
› ¿Por qué 4,49:1 no cumple?
Los umbrales de WCAG son exactos: una relación de 4,499 no alcanza 4,5. Por eso este comprobador trunca la relación mostrada en lugar de redondearla hacia arriba, y decide si cumple con el valor exacto.
› ¿Qué es APCA?
APCA (Accessible Perceptual Contrast Algorithm) es el método de contraste propuesto para el borrador de WCAG 3. Da un valor de contraste de luminosidad Lc que depende de cuál color es el texto y funciona mejor en modo oscuro. Aún no es una norma legal, así que aquí se muestra solo como orientación adicional.