Un texto gris claro sobre fondo blanco puede parecer elegante en una maqueta y resultar agotador de leer en un teléfono a plena luz del sol. Un botón cuyo estado se indica únicamente mediante un cambio de color puede ser difícil de comprender para una persona que distingue mal determinados tonos. Un borde de campo casi invisible puede hacer que un formulario sea mucho más complicado de utilizar.
Por tanto, el contraste no es una preferencia estética. Es un componente de la accesibilidad visual.
Las WCAG —Web Content Accessibility Guidelines— proporcionan criterios para evaluar algunas de estas situaciones. No imponen una paleta universal ni exigen que todos los sitios sean blancos y negros. Su objetivo es garantizar que el contenido y los elementos necesarios para utilizar una interfaz sigan siendo suficientemente perceptibles.
Este artículo explica cómo interpretar los principales umbrales de contraste, cómo evitar los errores habituales y, sobre todo, cómo pasar de un simple resultado «AA / AAA» a una verdadera decisión de diseño.
Para el texto, los umbrales que aparecen con más frecuencia son:
Situación
Nivel AA
Nivel AAA
Texto normal
4,5:1
7:1
Texto de gran tamaño
3:1
4,5:1
Para determinados elementos no textuales necesarios para utilizar o comprender una interfaz, el criterio WCAG 1.4.11 utiliza un umbral de 3:1 respecto a los colores adyacentes pertinentes.
Pero estas cifras solo cuentan una parte de la historia.
Una interfaz puede mostrar una excelente relación para su texto principal y seguir siendo difícil de utilizar si:
los estados de error dependen únicamente del rojo;
los enlaces solo se distinguen del texto mediante un color insuficientemente diferenciado;
los bordes de los campos son casi invisibles;
hay texto colocado sobre una fotografía con grandes variaciones;
desaparece un estado hover o focus;
se mide un texto semitransparente como si fuera opaco.
El comprobador de contraste permite probar rápidamente un par de colores. Después hay que volver a situar ese resultado en el contexto real de la interfaz.
¿Qué es una relación de contraste?
La relación de contraste compara la luminancia relativa de dos colores.
El resultado puede ir desde:
1:1
cuando ambos colores tienen la misma luminancia, hasta:
21:1
para el contraste máximo entre negro y blanco.
Esta relación no mide directamente:
la diferencia de tono;
la saturación;
la distancia HSL;
lo «bonita» que resulta una combinación;
la calidad global de una paleta.
Dos colores pueden parecer muy distintos porque uno sea rojo y otro verde y, sin embargo, estar relativamente próximos en luminancia.
Precisamente por eso una evaluación visual aproximada no basta.
¿Por qué la lightness de HSL no permite conocer el contraste?
Es una confusión frecuente.
Tomemos:
hsl(60 100% 50%)
y:
hsl(240 100% 50%)
Ambos colores tienen una lightness HSL del 50%.
Sin embargo, el amarillo y el azul así definidos no poseen en absoluto la misma luminancia relativa ni la misma percepción de claridad.
El valor L de HSL es un componente del modelo HSL; no es la luminancia relativa utilizada por las WCAG.
L2 es la luminancia relativa del color más oscuro.
La luminancia relativa no se obtiene sumando simplemente los valores RGB.
Los componentes sRGB deben interpretarse según la fórmula definida por las WCAG antes de ponderarlos.
En el uso cotidiano, hacer este cálculo a mano aporta poco. Conocer la fórmula sirve sobre todo para entender que el contraste se basa en una medida precisa y no en una impresión subjetiva.
El umbral 4,5:1 corresponde al criterio WCAG 2.2 1.4.3 Contraste (mínimo) para texto normal en nivel AA.
Esto significa que una combinación de texto y fondo destinada a texto normal debe alcanzar al menos esa relación, salvo las excepciones previstas por el criterio.
Por ejemplo, si el texto es:
#64748b
sobre:
#ffffff
no basta con afirmar que el gris «parece suficientemente oscuro».
Hay que medir la combinación real.
Si el resultado queda por debajo del umbral aplicable, puedes:
oscurecer el texto;
modificar el fondo;
elegir otro color;
replantear la función de ese color dentro de la paleta.
El objetivo no es «ganar la prueba», sino hacer que el contenido resulte más fácil de percibir.
¿Qué se considera texto de gran tamaño?
Las WCAG permiten un umbral inferior para el texto considerado suficientemente grande.
En la terminología del criterio, el texto de gran tamaño corresponde al menos a:
18 puntos con peso normal;
o 14 puntos en negrita.
En las equivalencias CSS utilizadas habitualmente por el W3C, esto corresponde aproximadamente a:
24 px para texto normal;
unos 18,5 px para texto en negrita.
Para este texto, el nivel AA exige 3:1 en lugar de 4,5:1.
Pero esta excepción no debe convertirse en una estrategia de diseño.
Aumentar artificialmente una fuente únicamente para hacer pasar un color mediocre no suele ser una buena solución. Tamaño, jerarquía y contraste deben responder conjuntamente a la necesidad de lectura.
Nivel AA y nivel AAA: ¿cuál es la diferencia?
Para el texto suelen compararse dos criterios.
Nivel AA — contraste mínimo
El criterio 1.4.3 exige:
4,5:1 para texto normal;
3:1 para texto de gran tamaño.
Nivel AAA — contraste mejorado
El criterio 1.4.6 exige:
7:1 para texto normal;
4,5:1 para texto de gran tamaño.
AAA representa, por tanto, una exigencia reforzada.
Pero sería engañoso presentar la accesibilidad como una clasificación simple:
AAA = perfectoAA = mediofallo = inaccesible
Las WCAG incluyen muchos criterios que no tienen que ver con el contraste. Una interfaz puede mostrar relaciones muy altas y seguir siendo inaccesible por otros motivos.
A la inversa, perseguir sistemáticamente el contraste máximo puede deteriorar innecesariamente ciertas jerarquías visuales.
El objetivo es cumplir los criterios aplicables y construir una experiencia realmente utilizable.
¿Hay que aspirar siempre a AAA?
No necesariamente para todos los elementos de un producto.
Un contraste más elevado puede mejorar la lectura, especialmente en condiciones difíciles, pero AAA no es simplemente un «modo premium» que toda combinación deba alcanzar.
Hay que considerar:
la función del contenido;
el público;
el tamaño del texto;
el contexto de uso;
las demás exigencias de accesibilidad;
la coherencia de la interfaz.
Para el cuerpo de texto, elegir una combinación cómoda que supere claramente 4,5:1 suele ser una excelente decisión.
Para elementos secundarios, el contexto puede ser diferente, siempre respetando los requisitos aplicables.
¿Negro sobre blanco es siempre la mejor solución?
No.
El negro #000000 sobre blanco #ffffff ofrece la relación máxima de 21:1.
Eso no significa que todas las interfaces deban utilizar únicamente esta combinación.
Una paleta puede conservar:
un color de marca;
varias superficies;
textos secundarios;
estados interactivos;
colores de acento.
La accesibilidad no exige eliminar el color.
Exige utilizarlo sin sacrificar la percepción de la información.
Si tu paleta utiliza otra notación, utiliza si es necesario el conversor de colores.
¿Por qué la transparencia complica el contraste?
Supongamos:
color: rgb(0 0 0 / 50%);
Ese texto no es simplemente «negro con una relación menor».
Su color visible depende del fondo.
Sobre blanco producirá un determinado color compuesto. Sobre azul claro, el resultado será diferente. Sobre una fotografía, puede variar de un píxel a otro.
Por tanto, hay que medir el color realmente renderizado frente a su fondo real.
Sí, el criterio de contraste de texto también se aplica a las imágenes de texto cuando entran en su ámbito.
Pero existe una pregunta aún más básica: ¿hay que utilizar una imagen para mostrar texto?
En la mayoría de interfaces Web, el texto HTML real es preferible porque puede:
seleccionarse;
ampliarse;
adaptarse;
ser interpretado por tecnologías de asistencia;
responder a las preferencias del usuario;
traducirse con mayor facilidad.
Las imágenes de texto presentan, por tanto, limitaciones que van mucho más allá del contraste.
¿Los logotipos deben cumplir 4,5:1?
El criterio 1.4.3 contempla, entre otras, una excepción para el texto que forma parte de un logotipo o nombre de marca.
Eso no significa que un logotipo ilegible se convierta de repente en una buena idea.
Significa simplemente que el umbral mínimo de ese criterio no se aplica de la misma forma en ese caso.
Hay que distinguir:
lo estrictamente exigido por un criterio;
lo que constituye una buena práctica de legibilidad.
Esta distinción es importante en cualquier auditoría de accesibilidad.
¿Qué ocurre con los placeholders?
Un placeholder no está exento simplemente porque sea temporal o aparezca dentro de un campo.
Cuando un texto entra en el ámbito del criterio 1.4.3, debe evaluarse su contraste.
Es un problema habitual: los placeholders se muestran deliberadamente muy pálidos para diferenciarlos de un valor introducido.
Pueden distinguirse de otras maneras sin sacrificar la legibilidad.
Y, sobre todo, un placeholder no debe sustituir a una etiqueta real cuando esta sea necesaria.
¿Los botones deben tener un contraste de 4,5:1?
Hay que distinguir varios elementos.
El texto del botón
El texto sigue los requisitos aplicables al texto.
La forma o el límite necesario para identificar el botón
Según cómo esté diseñado el componente, puede entrar en juego el criterio 1.4.11 Contraste no textual.
Exige una relación de al menos 3:1 para determinada información visual necesaria para identificar componentes de interfaz y sus estados, respecto a los colores adyacentes pertinentes.
Por tanto, un botón no se valida comprobando únicamente su texto.
Hay que comprender qué información visual permite al usuario reconocer el componente.
¿Qué es el contraste no textual?
WCAG 1.4.11 afecta, entre otros elementos, a:
la información visual necesaria para identificar componentes de interfaz y sus estados;
determinadas partes de gráficos necesarias para comprender el contenido.
El umbral es 3:1 respecto a los colores adyacentes correspondientes.
Puede afectar a:
un borde de campo;
una marca de verificación;
un indicador;
determinados iconos;
segmentos de un gráfico;
estados visuales.
Pero hay que evitar una regla simplista como:
«todos los bordes deben estar a 3:1».
El criterio se refiere a la información visual necesaria para la identificación o la comprensión.
El análisis debe realizarse componente por componente.
¿Un icono debe tener siempre 3:1?
No, no todos los iconos en todas las situaciones.
Un icono puramente decorativo no cumple la misma función que un icono que constituye por sí solo un botón.
Si el icono transmite información necesaria o permite identificar una acción, su contraste puede ser esencial.
Ejemplo:
[icono de papelera]
Si ese icono es el único medio visual para identificar la acción «Eliminar», su percepción es importante.
En cambio, una pequeña estrella decorativa junto a un título ya explícito no tiene necesariamente el mismo estatus.
La accesibilidad empieza siempre con la pregunta:
¿qué información o acción depende de este elemento visual?
¿Los gráficos deben respetar el contraste?
Los elementos gráficos necesarios para la comprensión pueden entrar en el criterio 1.4.11.
Pero un gráfico accesible no consiste únicamente en elegir colores con una relación de 3:1 entre ellos.
También hay que considerar:
etiquetas;
leyendas;
patrones;
formas;
anotaciones;
la posibilidad de comprender los datos sin depender únicamente del color.
Una paleta muy estética extraída de una fotografía puede ser inadecuada para una visualización de datos si varias series son difíciles de distinguir.
Por eso una paleta de colores debe convertirse en un sistema funcional antes de utilizarse.
¿Puede el color ser el único medio para indicar información?
El criterio WCAG 1.4.1 Uso del color exige que el color no se utilice como único medio visual para transmitir determinada información, indicar una acción, solicitar una respuesta o distinguir un elemento.
Ejemplo clásico:
Los campos en rojo son obligatorios.
Si únicamente el color permite saber qué campos están afectados, algunos usuarios pueden perder esa información.
Una solución mejor puede combinar:
color;
texto;
icono;
símbolo;
etiqueta.
Por ejemplo:
Correo electrónico *
acompañado de un mensaje explícito en caso de error.
Rojo y verde: ¿hay que prohibirlos juntos?
No.
El problema no es que existan el rojo y el verde.
El problema aparece cuando constituyen el único medio para distinguir dos estados.
Una tabla podría utilizar:
verde + marca de verificación + «Validado»;
rojo + cruz + «Error».
Aunque la percepción de los tonos varíe, el usuario dispone de otros indicios.
Esta estrategia es más robusta que una interfaz compuesta únicamente por puntos de colores.
¿Cómo hacer accesible un error de formulario?
Idealmente, un error debería poder identificarse de varias formas.
Por ejemplo:
borde de color;
icono;
texto explícito;
asociación programática con el campo;
eventualmente, un resumen de errores.
Para la parte visual, comprueba:
el contraste del mensaje;
el contraste de la información gráfica necesaria;
que el color no sea el único indicio;
que el estado de foco siga siendo perceptible.
El contraste es una pieza del sistema, no todo el sistema.
¿El foco de teclado es solo una cuestión de contraste?
No.
El foco debe ser, ante todo, visible y utilizable.
Según su diseño, pueden intervenir varios criterios WCAG, entre ellos el contraste no textual y, en WCAG 2.2, criterios específicos relacionados con la apariencia o el ocultamiento del foco.
Un cambio de color demasiado sutil puede ser insuficiente.
Una solución robusta puede combinar:
contorno;
grosor;
separación;
cambio de fondo;
contraste suficiente.
El usuario debe poder seguir su posición dentro de la interfaz.
¿El hover basta para indicar que un elemento es interactivo?
No.
El hover no existe de la misma manera en una pantalla táctil y no sustituye a otros indicios de interactividad.
Un enlace o botón debe poder comprenderse en su estado normal.
Después hay que evaluar el contraste de los estados hover, focus, active y disabled según su función y los criterios aplicables.
Una interfaz no debe volverse accesible únicamente cuando el ratón pasa por encima.
¿Los elementos deshabilitados están sujetos a los mismos requisitos?
Los criterios WCAG de contraste incluyen excepciones para determinados componentes inactivos.
Pero una excepción normativa no significa que haya que volver deliberadamente casi invisible un botón deshabilitado.
El usuario puede necesitar comprender:
que la acción existe;
que no está disponible;
por qué no está disponible.
Una buena interfaz busca un equilibrio entre distinguir el estado y conservar la legibilidad.
Por qué «este gris se usa en todas partes» no es una justificación
Las interfaces modernas suelen utilizar varios niveles de texto:
principal;
secundario;
terciario;
deshabilitado;
placeholder;
metadatos.
El riesgo consiste en aclarar progresivamente el gris hasta obtener un texto muy discreto pero difícil de leer.
Cada nivel textual real debe evaluarse según su uso.
La jerarquía visual puede construirse mediante:
tamaño;
peso;
espaciado;
posición;
color;
tipografía.
El contraste no tiene que soportar por sí solo toda la jerarquía.
¿Cómo corregir un color que falla por poco?
Supongamos que un color de marca utilizado como texto sobre blanco no alcanza el umbral necesario.
Hay varias estrategias posibles.
Oscurecer el color
Suele ser la solución más sencilla.
Modificar el fondo
Una superficie ligeramente diferente puede crear una pareja mejor.
Cambiar la función del color
El color puede seguir utilizándose como acento, borde decorativo o fondo, mientras que una variante más oscura se reserva al texto.
Añadir una variante accesible a la paleta
Por ejemplo:
--brand-500: ...;--brand-700: ...;
La primera puede servir para elementos decorativos y la segunda para texto.
Porque una variación idéntica de lightness no produce el mismo cambio de luminancia para todos los tonos.
Puedes utilizar HSL para experimentar, pero no supongas:
-10 % de lightness = contraste suficiente
Mide después de cada modificación.
Para sistemas cromáticos más avanzados, los espacios perceptuales modernos pueden facilitar la construcción de escalas, pero tampoco sustituyen la validación de las parejas realmente utilizadas.
¿Cómo integrar el contraste en un sistema de diseño?
El mejor momento para resolver los problemas de contraste no es al final del desarrollo.
Los colores secundarios, enlaces, bordes y estados deben seguir la misma lógica.
¿Podemos fiarnos del cuentagotas de un programa?
Un cuentagotas es útil para recuperar un color visible, pero varios elementos pueden complicar el análisis:
transparencia;
antialiasing;
fotografía;
degradado;
perfil de color;
composición de varias capas.
Para texto sencillo sobre un fondo uniforme, utiliza preferentemente los valores CSS realmente aplicados.
Para una composición compleja, inspecciona el resultado efectivo.
¿Por qué el antialiasing puede engañar en una captura de pantalla?
Los bordes de los glifos suelen contener píxeles intermedios producidos por el renderizado del texto.
Tomar una muestra sobre el borde de una letra puede devolver un color distinto del color CSS del texto.
Las WCAG definen el contraste a partir de los colores especificados en el contexto pertinente, en lugar de exigir medir cada píxel antialiasado.
Es otra razón para preferir los valores de origen cuando se conocen.
Contraste y tamaño de fuente: errores frecuentes
«Mi texto mide 18 px, así que es grande»
No necesariamente según la definición WCAG de texto de gran tamaño.
«Está en semibold, así que basta 3:1»
La definición se basa en umbrales precisos; no conviertas «un poco grueso» en una excepción automática.
«El título se ve grande»
Un título no se convierte automáticamente en large text por desempeñar el papel de título.
«La relación es 4,49:1, prácticamente 4,5»
Los umbrales no se redondean para convertir un resultado inferior en aprobado. Además, conviene conservar un margen en lugar de apuntar exactamente al límite.
¿Por qué conviene dejar margen respecto al umbral?
Un color situado justo en el límite puede volverse problemático cuando:
cambia el fondo;
se añade transparencia;
se utiliza otro estado;
cambia una variable CSS;
el componente se reutiliza en otro lugar.
Diseñar con un pequeño margen hace que el sistema sea más robusto.
Eso no significa llevar todas las combinaciones a 21:1.
Significa evitar una paleta diseñada al centésimo alrededor del mínimo.
¿El contraste basta para hacer accesible una interfaz?
No.
El contraste es solo un conjunto de criterios entre muchos otros.
Una interfaz puede tener:
un contraste excelente;
buenos textos alternativos para las imágenes;
componentes correctamente identificados;
y seguir siendo difícil de utilizar si la navegación por teclado está rota o el orden de lectura es incoherente.
A la inversa, una página técnicamente bien estructurada puede fallar por una paleta ilegible.
La accesibilidad es acumulativa.
Este artículo se centra deliberadamente en los colores y la percepción visual dentro de la colección Imágenes, colores y gráficos de la Web.
Contraste y elección del formato de imagen
El contraste WCAG no depende de que una imagen sea JPEG, PNG, WebP o AVIF.
Sin embargo, el formato y la compresión pueden influir en el aspecto de un texto integrado en una imagen o de detalles gráficos finos.
Una compresión agresiva puede introducir:
desenfoque;
halos;
artefactos;
pérdida de nitidez.
Es una razón más para evitar integrar texto en una imagen cuando el texto HTML real sea más apropiado.
El siguiente artículo de la colección, PNG, JPEG, WebP o AVIF: ¿qué formato elegir?, explica cómo elegir un formato según el contenido, la transparencia, el peso y la calidad esperada.
Contraste y compresión de imagen
Cuando una interfaz contiene información gráfica dentro de una imagen, una compresión excesiva puede degradar la distinción de contornos y detalles.
La cuestión es distinta para elementos de interfaz creados en HTML/CSS o SVG: su renderizado no depende de una codificación fotográfica con pérdida.
Para los gráficos vectoriales, SVG: comprender el formato vectorial explica por qué las formas permanecen definidas matemáticamente y cómo se representan sus colores.
Contraste y SVG
Un SVG puede contener:
iconos;
ilustraciones;
gráficos;
logotipos;
texto vectorizado o texto real.
Las reglas de accesibilidad dependen de la función de estos elementos, no del simple hecho de estar en SVG.
Un icono SVG interactivo debe pensarse como un componente de interfaz. Un gráfico SVG que transmite información debe seguir siendo comprensible. Un elemento decorativo no desempeña el mismo papel.
Comprueba estados, teclado, imágenes, degradados y temas.
Este método evita tratar la herramienta de contraste como una etapa aislada.
Checklist antes de validar una paleta
Antes de considerar listo tu sistema de colores:
¿el texto normal alcanza al menos el umbral aplicable?
¿se ha identificado correctamente el texto de gran tamaño antes de utilizar el umbral 3:1?
¿los textos secundarios siguen siendo legibles?
¿los enlaces pueden identificarse?
¿los errores utilizan algo más que el color?
¿los estados de éxito y advertencia tienen etiquetas u otros indicios?
¿los componentes necesarios son perceptibles?
¿el foco de teclado es visible?
¿los iconos funcionales son suficientemente perceptibles?
¿los gráficos siguen siendo comprensibles sin depender únicamente de los tonos?
¿se ha probado el texto sobre imágenes en su zona real?
¿se ha tenido en cuenta la transparencia?
¿se ha verificado el modo oscuro por separado?
¿se han examinado los estados hover, focus, active y disabled?
Esta lista resulta más útil que un simple «todos mis colores son AA».
Los errores más frecuentes
Comprobar únicamente el texto principal
Los pequeños textos secundarios suelen ser los que fallan.
Creer que un color es «accesible»
Un color debe evaluarse frente a su contexto.
Utilizar la lightness HSL como relación
Son dos medidas distintas.
Probar un texto transparente como si fuera opaco
El fondo modifica su color visible.
Probar el color medio de una fotografía
El contraste de un texto superpuesto varía localmente.
Pensar que AA valida toda la interfaz
Una relación de texto no cubre componentes, uso del color ni los demás criterios WCAG.
Utilizar únicamente rojo y verde para dos estados
Añade texto, símbolos u otros indicios.
Hacer los placeholders casi invisibles
La discreción visual no debe sacrificar la legibilidad.
Olvidar el foco
Una interfaz que funciona bien con ratón puede resultar muy difícil de utilizar con teclado.
Apuntar exactamente a 4,5:1
Un pequeño margen hace el sistema más robusto.
Lo que hay que recordar
El contraste WCAG no consiste en elegir entre una interfaz bonita y una interfaz accesible.
Consiste en conseguir que el color cumpla su función sin hacer innecesariamente difícil percibir la información o las acciones.
Los puntos esenciales son:
4,5:1 es el umbral AA para texto normal;
3:1 se aplica al texto de gran tamaño en nivel AA;
7:1 y 4,5:1 corresponden a los umbrales reforzados AAA para esas categorías;
determinados componentes y elementos gráficos necesarios utilizan un umbral de 3:1 dentro del contraste no textual;
el color no debe ser el único medio para transmitir determinada información;
la lightness HSL no es la luminancia relativa WCAG;
transparencia, imágenes, degradados y estados interactivos exigen analizar el contexto real.
El comprobador de contraste proporciona la medida. El conversor de colores ayuda a manipular los valores. Pero la decisión final sigue siendo una decisión de diseño: ¿qué información debe percibirse, en qué contexto y mediante qué medios?
Después de los colores y su accesibilidad, la colección pasa a la forma en que los píxeles se almacenan y distribuyen. Continúa con PNG, JPEG, WebP o AVIF: ¿qué formato elegir?.
Preguntas frecuentes
¿Qué contraste necesita el texto normal?
En WCAG AA, el texto normal debe alcanzar una relación de al menos 4,5:1 con su fondo, salvo las excepciones previstas por el criterio.
¿Qué contraste necesita un texto grande?
En nivel AA, el umbral es 3:1 para el texto que cumple la definición WCAG de texto de gran tamaño.
¿Cuál es el umbral AAA?
El criterio reforzado utiliza 7:1 para texto normal y 4,5:1 para texto de gran tamaño.
¿Puede redondearse una relación de 4,49:1 a 4,5:1?
No debe redondearse un resultado inferior para convertirlo en aprobado. En la práctica, conviene además dejar un pequeño margen respecto al límite exacto.
¿Un 50 % de luminosidad HSL significa siempre el mismo contraste?
No. La lightness HSL no es la luminancia relativa WCAG. Dos colores con 50% de lightness pueden tener contrastes muy diferentes sobre el mismo fondo.
¿Es obligatorio utilizar negro sobre blanco?
No. Muchas combinaciones de color pueden cumplir los criterios. Negro sobre blanco representa simplemente el contraste máximo.
¿Los logotipos deben cumplir 4,5:1?
El texto que forma parte de un logotipo o nombre de marca cuenta con una excepción en el criterio 1.4.3. Eso no impide buscar una buena legibilidad.
¿Los placeholders deben ser legibles?
Sí. Que un texto sea un placeholder no es una razón para hacerlo casi invisible.
¿Un icono debe tener una relación de 3:1?
Depende de su función. Cuando la información visual es necesaria para identificar un componente o comprender un gráfico, puede aplicarse el criterio de contraste no textual. Un icono puramente decorativo no cumple la misma función.
¿Puedo utilizar rojo y verde para éxito y error?
Sí, pero no hagas que la información dependa únicamente del color. Añade, por ejemplo, una etiqueta, un icono o un símbolo distinto.
¿Cómo probar texto sobre una fotografía?
Hay que evaluar el contraste en las zonas realmente situadas detrás del texto. Un color medio de la imagen no es representativo. Una superficie o un overlay controlado puede facilitar el diseño.
¿Un botón que supera la prueba de contraste es automáticamente accesible?
No. También hay que verificar su identificación, estados, foco, etiqueta y los demás criterios aplicables.
¿El modo oscuro utiliza las mismas relaciones?
Los criterios de contraste siguen siendo pertinentes, pero cambian las parejas de colores. Por tanto, el tema oscuro debe probarse por separado.
¿Cómo corregir rápidamente un color demasiado claro?
Oscurécelo, modifica el fondo o crea una variante específica para texto. Después vuelve a medir la pareja con el comprobador de contraste.
¿Hay que probar todas las combinaciones de una paleta?
Prueba prioritariamente las parejas realmente utilizadas: texto/fondo, botón/texto, enlaces, errores, foco, iconos funcionales y gráficos.
¿Qué herramienta puedo utilizar para comprobar dos colores?
