El primer error de accesibilidad que envié fue una marca de tiempo gris claro en una tarjeta blanca. Se veía elegante en Figma, se veía bien en mi monitor calibrado y era completamente invisible para un cliente que lee el correo electrónico en su teléfono en un automóvil estacionado. No tenía problemas de visión. era solo la luz del sol. Ese único boleto de soporte me enseñó algo que la maqueta de diseño nunca podría: el contraste no es una cuestión de gusto, es una propiedad medible, y si no la mides, estás enviando conjeturas.
Desde entonces he construido el Revisador de contraste de color en Toolz.dev, incorporé reglas de contraste en los tokens de diseño para WP Adminify y audité más componentes de React de los que me gustaría contar. Esta guía es la versión de esa experiencia que desearía que alguien me hubiera entregado al principio. Explica cuál es realmente la relación de contraste, cómo se calcula el número, cuál es WCAG los umbrales significan y cómo solucionar un par de colores defectuoso sin desperdiciar la paleta de su marca.
TL;Dr: El contraste WCAG es una relación de 1:1 a 21:1 basada en la luminancia relativa de dos colores. Para el texto corporal normal, necesita al menos 4.5:1 para pasar AA y 7:1 para pasar AAA. El texto grande (alrededor de 24 px o 18.66 px negrita) se reduce a 3:1 para AA y 4.5:1 para AAA. no -UI de texto como iconos y bordes de entrada necesita 3:1. Mida cada par de texto sobre fondo, trate AA como la barra de pase y deje que la herramienta sugiera un color de paso cuando se quede corto.
¿Por qué el contraste de color importa tanto?
El contraste es el fallo de accesibilidad más común en la web. Año tras año, las auditorías automatizadas de las principales millones de páginas de inicio encuentran que el texto de bajo contraste es la violación de WCAG más frecuente por un amplio margen. También es el que afecta a la mayoría de las personas, ya que no solo se refiere a los usuarios que están registrados ciegos. Se trata de cualquier persona con visión reducida desde la edad, cualquier persona con una condición común como las cataratas, cualquiera que use una pantalla barata, cualquiera en una habitación luminosa y cada uno de nosotros cuando el sol choca contra la pantalla.
También hay un ángulo de negocios, y no voy a fingir lo contrario. La ley de accesibilidad ahora hace referencia a WCAG directamente en muchas regiones, lo que significa que una interfaz inaccesible es una exposición legal, no solo un problema de cortesía. Pero la razón por la que me importa, y la razón por la que construí una herramienta dedicada para ello, es más simple. El texto que las personas no pueden leer es un texto que falló en su único trabajo. Una hermosa interfaz que nadie puede usar no es un logro de diseño.
La trampa es que nuestros ojos son narradores poco confiables. Nos adaptamos a nuestras propias pantallas, sabemos lo que se supone que debe decir el texto para que nuestro cerebro lo rellene, y miramos diseños en condiciones ideales. La relación de contraste elimina todo eso. Le da un número que no se preocupa por su monitor o sus expectativas.
¿Qué es exactamente una relación de contraste?
La relación de contraste es una comparación de la luminancia relativa de dos colores: su primer plano (generalmente texto) y su fondo. La luminancia relativa es una medida de la cantidad de luz que emite o refleja un color, ponderada sobre cómo el ojo humano realmente percibe el rojo, el verde y el azul. El verde contribuye más al brillo percibido, el azul lo menos, razón por la cual el texto azul puro sobre negro es mucho más difícil de leer que el verde puro.
La razón en sí es definida por WCAG como:
(L1 + 0.05) / (L2 + 0.05)
donde L1 es la luminancia relativa del color más claro y L2 es el del más oscuro. los 0.05 Los términos modelo de luz ambiental que se reflejan en la pantalla, por lo que la escala nunca llega a la infinita. Los colores idénticos producen una relación de exactamente 1:1. El texto negro puro sobre blanco puro da el máximo de 21:1. Todo lo que vive entre esos dos extremos.
Lo importante a internalizar es que la relación no es lineal con cómo "diferente" dos colores se ven en el sentido de la tonalidad. Dos colores pueden ser tremendamente diferentes en tono (por ejemplo, un rojo saturado y un verde saturado) y aún así tener casi la misma luminancia, lo que los convierte en una pesadilla para la legibilidad a pesar de que chocan violentamente. El contraste tiene que ver con la diferencia de ligereza, no con la diferencia de color. Precisamente por eso no puedes mirarlo y por qué Revisador de contraste de color Convierte ambos colores en luminancia antes de hacer cualquier comparación.
¿Cómo se calcula realmente el número?
Si desea comprender la herramienta en lugar de solo confiar en ella, aquí está la canalización completa, que sigue exactamente las definiciones de WCAG 2.2.
Primero, cada canal de color se normaliza desde el rango de 0 a 255 hasta 0-1. Luego, cada canal se linealiza para deshacer la curva gamma sRGB. La fórmula aplica un pequeño segmento lineal para valores muy oscuros y una curva de potencia para el resto:
c_linear = c / 12.92 if c <= 0.03928
c_linear = ((c + 0.055) / 1.055) ^ 2.4 otherwise
A continuación, los tres canales linealizados se combinan con los coeficientes de luminancia que reflejan la percepción humana:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
Esos pesos no son arbitrarios. Vienen de la forma en que las células cono de los ojos responden a diferentes longitudes de onda, y son la razón por la que el verde domina. Finalmente, los dos valores de luminancia se enchufan a la fórmula de relación anterior, con la más ligera en la parte superior.
Hay una sutileza que hace que la gente haga tropezar con la gente, y es la transparencia. Una relación de contraste solo es significativa entre dos colores opacos, porque una apariencia real de color semitransparente depende de lo que sea que se sienta detrás de él. Si el color de su texto tiene un valor alfa, no puede medirlo directamente. El enfoque correcto, y el que toma la herramienta, es combinar el primer plano translúcido sobre el fondo primero usando la mezcla fuente estándar, luego medir la relación con el resultado aplanado. Esto coincide con lo que un usuario ve en realidad en lugar del color que establece nominalmente.
¿Cuáles son los umbrales de WCAG que necesito alcanzar?
WCAG define los requisitos de contraste en dos niveles de conformidad y para tres tipos de contenido amplios. Aquí está la imagen completa en un solo lugar.
| Tipo de contenido | un mínimo | AAA Mínimo |
|---|---|---|
| Texto normal (bajo ~24px) | 4.5:1 | 7:1 |
| Texto grande (~24 px o ~18.66 px en negrita) | 3:1 | 4.5:1 |
| Componentes y gráficos de la interfaz de usuario | 3:1 | 3:1 (no AAA por separado) |
| Logotipos y texto incidental | dispensar | dispensar |
Algunas notas por haber aplicado esta tabla muchas veces. "Texto grande" se define por tamaño renderizado, no por lo importante que se siente el texto. El umbral es de 18 puntos para peso regular y 14 puntos en negrita, que se traducen en aproximadamente 24 px y 18.66 px. Cualquier cosa en o por encima que obtenga el bar 3:1 relajado para AA, porque las formas de letras más grandes siguen siendo legibles con un contraste más bajo.
La regla de los componentes de la interfaz de usuario es el Criterio de éxito 1.4.11, y es el que los equipos olvidan con mayor frecuencia. Dice que el límite visual de un componente interactivo (el borde de una entrada de texto, el contorno de un botón, la forma de un icono que transmite significado) necesita 3:1 en comparación con su entorno. Una forma llena de texto de etiqueta que pasa AA con bordes de entrada invisibles todavía falla, y lo he visto exactamente en producción más de una vez.
Finalmente, el texto decorativo, los controles deshabilitados y los logotipos están exentos. Esa exención es estrecha. Una etiqueta de botón atenuada está bien; un párrafo de bajo contraste al que llamaste "secundaria" no lo está.
¿Cómo uso el verificador de contraste de color?
El flujo de trabajo que uso a diario dura unos diez segundos por par. Abre el Revisador de contraste de color e ingrese el color de su texto en el primer campo. Puedes pegar cualquier formato, como un hexágono de seis dígitos #4b5563, un hex de ocho dígitos con alfa, un rgb() investigaciones operacionales rgba() cuerda, un hsl() valor, o una palabra clave CSS simple como navy. La herramienta normaliza todo lo que le des, para que puedas mezclar formatos libremente entre los dos campos.
Introduzca su color de fondo en el segundo campo. En el momento en que ambos son válidos, la relación exacta aparece junto con una muestra en vivo de texto grande, normal y de subtítulos renderizado en su fondo real. Esa vista previa importa. El número le dice si pasa, pero ver palabras reales en el color real le dice si es cómodo, que es una barra más alta que la mera legal.
Por debajo de la proporción, obtiene una cuadrícula de insignias de aprobado y reprobado: AA y AAA para texto normal y grande, además de la verificación de componentes de interfaz de usuario 3:1. Si una combinación falla, la herramienta ofrece una solución con un solo clic. Pasa el color de su texto más claro o más oscuro en el espacio HSL, preservando el tono y la saturación que eligió, hasta que borra la proporción objetivo, luego le entrega un valor de aprobación que puede copiar directamente en su hoja de estilo. Esa última parte es la diferencia entre un verificador que te regaña y uno que realmente ayuda: mantiene intacto el tono de tu marca y solo mueve la ligereza al mínimo necesario.
Todo se ejecuta localmente en su navegador. No hay colores, paletas o valores de marca inéditos que dejen su dispositivo, lo que importa cuando está auditando el sistema de diseño de prelanzamiento de un cliente. Es el mismo enfoque de privacidad que utilizo en todas las herramientas del sitio, y escribí sobre por qué esa arquitectura es importante en el Guía de privacidad de datos.
Casos de uso comunes de proyectos reales
Auditar tokens de un sistema de diseño
Cuando configuro tokens de color para un nuevo proyecto, verifico cada emparejamiento semántico antes de que se envíe un solo componente: texto primario en segundo plano, texto en silencio en segundo plano, texto en primario, texto en tarjeta, texto en cada variante de alerta. Un token que falla una vez falla en todas partes, por lo que atraparlo en el nivel de token es enormemente más barato que atraparlo por componente. Mantengo una lista de verificación simple y ejecuto cada par a través del verificador, registrando la proporción junto al nombre del token.
Rescatar un color de marca que "tiene que" usarse
Marketing le entrega una marca azul y le dice que los botones deben usarla. Prueba el texto blanco y obtiene 3.1:1, bien para texto grande, a falta de una etiqueta de botón de tamaño normal. Tiene tres opciones honestas: oscurecer ligeramente el azul de la marca para superficies interactivas, usar una etiqueta más grande o más atrevida para que se aplique el umbral 3:1 o cambiar la etiqueta a un color más oscuro si el botón es claro. La función de sugerencia de la herramienta ' encuentra el tono de paso más cercano para que pueda mostrar marketing con un cambio mínimo concreto en lugar de un " plano;no."
Comprobación de marcador de posición y texto auxiliar
El texto de marcador de posición es un delincuente reincidente porque los navegadores lo representan con una opacidad reducida de forma predeterminada, y los diseñadores luego eligen un gris ya claro. Recuerde probar el resultado compuesto, no el color nominal. La composición alfa de Checker hace esto por usted: Ingrese el color del marcador de posición con su opacidad real sobre el fondo de entrada y lea la relación real.
Verificación de iconos y visibilidad de borde
Para la verificación de la interfaz de usuario 1.4.11, pruebo el icono o el color del borde con lo que se encuentre inmediatamente detrás. Un divisor gris en una tarjeta blanca, un galón en un encabezado de color, el anillo de enfoque contra el campo; todo esto necesita 3:1. Es una verificación rápida que detecta el "técnicamente todo está ahí pero puedo't ver nada de eso" clase de error.
¿Cómo se compara esto con solo usar una herramienta de diseño de cheques incorporado?
Las herramientas de diseño han agregado indicadores de contraste, y las herramientas de desarrollo del navegador muestran una relación en el selector de color, por lo que una pregunta justa es por qué buscar una herramienta dedicada. Aquí está mi comparación honesta.
| acceso | fuerza | limitación |
|---|---|---|
| Comprobador de contraste dedicado | Relación exacta, todos los umbrales, composición alfa, sugerencias de paso de color, funciona en cualquier cadena de color | Pegas colores en manualmente |
| Plugin de herramienta de diseño | En línea con tu mesa de trabajo | A menudo se aproxima, puede ignorar alfa, vinculado a esa aplicación |
| Herramientas de desarrollo del navegador | Comprueba la página renderizada en vivo | Un par a la vez, sin sugerencias, requiere que la página exista primero |
| Echándoselo a mirar | firme | mal, constantemente |
La herramienta dedicada gana siempre que trabaje a partir de valores en lugar de una página renderizada (revisando tokens, verificando una especificación o corrigiendo un error informado) y siempre que necesite una alternativa de aprobación en lugar de solo un veredicto. Las herramientas de desarrollo del navegador son mejores una vez que la página existe y desea verificar qué se envió realmente. Utilizo ambos, en diferentes etapas.
Notas avanzadas para equipos que se preocupan
Algunas cosas que he aprendido que van más allá de lo básico. Primero, el contraste es necesario pero no suficiente. Pasar 4.5:1 elimina una barrera, no hace que una interfaz sea accesible por sí sola. Todavía necesita estados de enfoque visibles, aún debe evitar transmitir significado solo a través del color, y aún necesita pruebas reales con tecnología de asistencia real. Trate la relación como un piso, no como una línea de meta.
En segundo lugar, el modo oscuro no es gratuito. Una paleta que pasa en modo claro puede fallar en modo oscuro porque las relaciones de luminancia se invierten. Revisa ambos temas. El interruptor de vista previa de fondo oscuro de Checker existe precisamente porque me olvidé de hacerlo.
Tercero, tenga cuidado con "lo suficientemente cerca". Una proporción de 4.48:1 es una falla, no una victoria de redondeo. Las pantallas varían, los usuarios varían y el umbral tiene un margen incorporado por una razón. Si estás en el límite, empújalo.
Si está ensamblando un kit de herramientas más amplio, el Guía del kit de herramientas para desarrolladores web Cubre cómo encaja el contraste junto con los otros cheques que vale la pena automatizar. Y una vez que pasen sus colores, herramientas como la Generador de gradiente y selector de colores Ayúdale a construir el resto de la paleta sobre una base que ya ha verificado. Si también está generando metadatos de página y vistas previas sociales, el Generador de metaetique Combina bien en el mismo pase de prelanzamiento.
preguntasrán el
¿Cuál es una buena relación de contraste de color?
Para el texto corporal normal, apunta a que al menos 4.5:1 cumpla con WCAG AA y 7:1 para cumplir con el nivel AAA más estricto. Texto grande, que significa aproximadamente 24 px o 18.66 px negrita, solo necesita 3:1 para AA y 4.5: 1 para AAA. Los iconos y los componentes interactivos de la interfaz de usuario necesitan al menos 3:1 contra su entorno.
¿Qué cuenta como texto grande bajo WCAG?
El texto grande es de al menos 18 puntos, aproximadamente 24 px, para peso normal, o al menos 14 puntos, aproximadamente 18,66 px, cuando está en negrita. El texto de ese tamaño o superior califica para el umbral relajado AA de 3:1 porque las letras más grandes permanecen legibles en un contraste más bajo que los pequeños.
¿Cuál es la diferencia entre WCAG AA y AAA?
AA es el nivel que más se dirigen las leyes y organizaciones y requiere 4.5:1 para el texto normal. AAA es el nivel mejorado y requiere 7:1, que se adapta al contenido dirigido a usuarios con baja visión pero es difícil de alcanzar en toda una paleta. La mayoría de los equipos tratan a AA como la barra de pase y AAA como una aspiración de contenido de lectura crítica.
¿Cómo se calcula la relación de contraste?
Cada color se convierte en su luminancia relativa WCAG, una medida de brillo corregida por gamma y ponderada perceptualmente. La relación es (L_Lighter + 0.05) dividida por (L_Darker + 0.05), produciendo un valor de 1:1 para colores idénticos a 21:1 para negro puro sobre blanco puro.
¿La transparencia afecta el resultado del contraste?
Sí. Un color de texto semitransparente permite que el fondo se muestre, lo que cambia su color efectivo. El método correcto es primero combinar el primer plano translúcido sobre el fondo, luego medir la relación, de modo que la puntuación refleje lo que un usuario ve en lugar del color nominal que establezca.
¿Por qué mi texto pasa a tamaño grande pero falla en tamaño normal?
Los umbrales difieren. El texto normal necesita 4.5:1 para AA mientras que el texto grande solo necesita 3:1, por lo que una proporción entre 3 y 4,5 pases para encabezados pero falla para la copia del cuerpo. Eleve el contraste para el texto corporal o asegúrese de que el emparejamiento solo se use en tamaños grandes donde se aplica el umbral relajado.
¿Es suficiente una relación de contraste de paso para la accesibilidad?
prohibido .El contraste es necesario pero no suficiente. También necesita estados de enfoque visibles, debe evitar transmitir significado solo por color, y debe probar con contenido real y tecnología de asistencia. Pasar la relación elimina una barrera común pero no hace que una interfaz sea accesible por sí sola.
¿El verificador de contraste de color envía mis colores a alguna parte?
prohibido . Todo el análisis y las matemáticas se ejecutan localmente en su navegador usando JavaScript. No se cargan ni almacenan valores de color, paletas de marca o capturas de pantalla, y la herramienta continúa funcionando sin conexión de red una vez que la página se ha cargado.
