Cinco 'contrast checkers' fáciles de usar para responsables

2024/07/29

Verificador de contraste.Calcula la relación de contraste entre el color del primer plano (textos y elementos gráficos) y el color de fondo en sitios web e imágenes, es decir, la diferencia de luminosidad.Verifica si esa proporción cumple con las pautas de accesibilidad web como WCAG o JIS.Herramienta para evaluarEs conocido como verificador de relación de contraste o verificador de contraste de colores.

En este artículo, presentaremos cinco herramientas representativas de contrast checkers.

Además de introducir estas herramientas, también explicaré en detalle los puntos a considerar al verificar el contraste, por lo queLos responsables de la accesibilidad web pueden referirse a este artículo.

Cinco comprobadores de contraste fáciles de usar para responsables de accesibilidad

Existen diversos tipos de verificadores de contraste que son esenciales para que los diseñadores y los responsables de accesibilidad verifiquen el contraste de sus sitios web y contenido en línea.

Por lo tanto, aquíVerificador de contraste representativo y fácil de usar.se presentan cinco. Hay herramientas que se pueden utilizar en el navegador del sitio web o que se pueden instalar, peroAmbas son herramientas de uso gratuito.Los presentamos, así que siéntase libre de probar su usabilidad.

Nombre de la herramienta	Características	Entorno de uso
① WebAIM.	Es una herramienta que se puede usar inmediatamente al acceder al sitio. Es un sitio en inglés, pero la interfaz de usuario es simple y fácil de usar.	Navegador
② ColorTester	es posible arrastrar y soltar imágenes para verificar el contraste. Al ser una herramienta de instalación, su uso en el lugar de trabajo puede estar limitado en algunos casos.	Instalación (Windows / Mac)
③ AdobeColor	Además de la función de verificación de contraste, está equipada con muchas funciones relacionadas con la combinación de colores. También es compatible con productos de Adobe como Photoshop, Illustrator e InDesign.	Navegador
④ Verificador de contraste de color WCAG	Se instala en Google Chrome como una extensión y es una herramienta especialmente útil para verificar el contraste de un sitio web.	Navegador （Extensión de Chrome）
⑤ ContrastGrid	Una herramienta que permite verificar el contraste de los colores configurados en una lista. Dado que se pueden configurar varios códigos de color, es fácil de entender incluso para aquellos que tienen dificultades con las combinaciones de colores y facilita la elección de colores.	Navegador

 

① WebAIM.

Configure el color del texto (Foreground) y el color de fondo (Background) para calcular el contraste.Verificar si cumple con los estándares WCAGSe puede. Los colores se pueden especificar con un código de color o un selector de color, y también se puede ajustar el brillo. Al configurar un color, la relación de contraste se calcula en tiempo real y se puede verificar la vista previa en texto normal, texto en negrita y otros elementos gráficos como marcas de verificación.

Se puede ver de un vistazo si cada resultado cumple con el nivel de conformidad, ya sea "Aprobar" o "Reprobar".La navegación está en inglés, pero es simple y clara.Por lo tanto, no tendrá que preocuparse por el uso general.

Página oficial:WebAIM

② ColorTester

Calcula la relación de contraste entre dos colores y los evalúa según el estándar JIS X 8341-3:2010 (WCAG 2.0).Es posible arrastrar y soltar archivos de imagen en la ventana, lo que permite inferir y evaluar automáticamente el color de primer plano y el color de fondo de la imagen..

Es una herramienta fabricada en Japón, compatible con ambos sistemas operativos, Windows y Mac, peroSe requerirá la instalación de la herramienta.Las versiones compatibles de cada sistema operativo son desde Windows 8.1 y Mac OS X 10.10 en adelante. También está disponible una versión en inglés.

Página oficial:ColorTester

③ Adobe Color

Es una herramienta proporcionada por Adobe, que desarrolla y vende herramientas para creadores. La herramienta en sí cuenta con diversas funciones útiles para la actividad creativa como una herramienta de combinación de colores, e incluye un verificador de contraste para la revisión de accesibilidad como una de sus funciones.

Ofrece una experiencia de uso similar a otros contrast checkers, peroTambién sugiere colores de contraste óptimos en relación con los colores configurados.Aunque es una herramienta de Adobe, se puede utilizar sin necesidad de instalación ni inicio de sesión, pero si inicia sesiónEs una herramienta fácil de usar para diseñadores que usan aplicaciones de Adobe, ya que se puede integrar con otros productos de Adobe.lo será.

Página oficial:Adobe Color

④ Verificador de contraste de color WCAG

el complemento (extensión) de Google Chrome.Es una herramienta que se puede utilizar para evaluar los colores utilizados en la página de un sitio web de inmediato y evaluar el contraste de cada color. Dado que se puede verificar página por página, es una herramienta fácil de usar para verificar sitios web en la fase de prueba o para mantener sitios web que ya están en funcionamiento.

Al hacer clic en cualquier color que se muestra en el panel de control lateral, se amplían las áreas donde se utiliza en la página.También es fácil verificar sitios con mucha información, como portales.。

Página oficial:Verificador de contraste de color WCAG.

⑤ Contrast Grid

Los verificadores de contraste son en su mayoría herramientas que permiten especificar colores y verificar el contraste en cada ocasión, pero esta herramienta esSe muestra una paleta de colores (lista) donde se seleccionan las combinaciones de contraste deseadas.Por lo tanto, este método es recomendable para principiantes en diseño o para aquellos que tienen dificultades con la selección de colores.

Al acceder al sitio oficial, se muestra la combinación de colores predeterminada como se muestra en la imagen anterior. Al agregar un código de color en el cuadro izquierdo, podrá ver una lista de combinaciones con otros colores en la paleta. Para cada combinación de colores,los niveles de conformidad como "AA" o "AAA" se muestran en forma de etiquetas, y la diferencia de color de las etiquetas indica si cumplen con los requisitos.Por lo tanto, la combinación de colores que se puede usar es evidente.

Página oficial:Cuadro de Contraste

Ya hemos presentado cinco checkers de contraste útiles, pero ¿por qué es necesario verificar el contraste? A continuación, lo explicaremos.

Por qué es necesaria la verificación del contraste

En relación con la obligación de proporcionar consideraciones razonables en virtud de la Ley revisada sobre la eliminación de la discriminación por discapacidad que entra en vigor en abril de 2024,La adaptabilidad a la accesibilidad web también es una estrategia obligatoria.Se hizo. En este proceso, primero es necesario verificar el nivel de accesibilidad de su propio sitio desde varias perspectivas.

En particular, dado que la mayoría de la información en los sitios web se obtiene visualmente, no solo los videntes (seigan-sha: aquellos que no tienen discapacidad visual) deben ser considerados.verificar si el sitio es reconocible para usuarios con baja visión, adultos mayores o usuarios con características de visión del color.Es necesario verificar adecuadamente si se asegura la accesibilidad web y realizar mejoras según sea necesario.

Y uno de los indicadores necesarios para esa verificación es"Relación de contraste de color"El contraste es un indicador que muestra la diferencia de claridad entre dos colores en la pantalla (normalmente entre color de primer plano y color de fondo). Esta relación se expresa numéricamente en función del brillo relativo de los dos colores, siendo más fácil distinguir entre colores con un alto contraste.La relación de contraste se expresa en un rango de 1:1 a 21:1, donde un número más alto implica un contraste más fuerte, es decir, es más fácil de reconocer.。

Entonces, vea a continuación cómo cambia la visibilidad con diferencias en la proporción de contraste.

◆Diferencias en la visibilidad según la relación de contraste

Además, se aplicó un desenfoque en la imagen anterior como representación de cómo se ve el texto difuminado para quienes tienen una visión reducida.

◆ Diferencias en la visibilidad cuando se ve borroso.

De esta manera,Cuando la relación de contraste es alta, es más fácil reconocer los límites de los colores debido a la gran diferencia entre el color de fondo y el color general, lo que significa que la legibilidad mejora.Por ejemplo, si el color del texto y el color de fondo son 1:1, no se puede reconocer ninguno de los dos porque son del mismo color; en el caso de 21:1, se puede reconocer claramente si se muestra en blanco y negro.Para asegurar la accesibilidad web en sitios donde se mezclan diversos elementos como texto e imágenes, se debe prestar especial atención a la relación de contraste en los detalles del diseño.。

Por lo tanto, el contraste en el diseño del sitio web de la empresa debe ser¿Se cumplen los requisitos para asegurar la accesibilidad web?La verificación del contraste es una tarea esencial para hacer juicios, sin embargo, esoPara juicios cuantitativos, el "contrast checker" es una herramienta imprescindiblese convierte en eso. A continuación, discutiremos los requisitos de accesibilidad web.

Tres puntos clave para la verificación de contraste.

Al utilizar un verificador de contraste para comprobar la proporción de contraste de un sitio web o contenido, no debe basar su juicio en su propia percepción.Es necesario realizar la verificación de acuerdo con los estándares de accesibilidad web establecidos.Aquí, explicaremos tres puntos clave a tener en cuenta al verificar el contraste.

Punto ① Entender la relación de contraste que cumple con los estándares de la norma JIS

Como se mencionó anteriormente, la enmienda a la Ley de Eliminación de la Discriminación por Discapacidad ha hecho obligatoria la provisión de ajustes razonables, haciendo que la garantía de la accesibilidad web sea esencial para todos los operadores.

Hay diversos elementos que componen un sitio web, cada uno con normas de accesibilidad definidas, y todos los criterios de cumplimiento están estipulados por la norma internacional WCAG 2.0 (Directrices de Accesibilidad al Contenido Web 2.0). En Japón,Norma JIS (JIS X 8341-3:2016).Eso se aplica.

Además, se han establecido niveles de conformidad de A a AAA para el grado de cumplimiento de esta norma, según el Ministerio de Asuntos Internos y Comunicaciones.Es necesario cumplir con AA o AAA (recomendado) para garantizar la accesibilidad web.Se considera que.

Referencia:Accesibilidad de sitios web requeridos para agencias gubernamentales (Ministerio de Asuntos Internos y Comunicaciones).

Y también se han establecido estándares para la relación de contraste.

◆Relación de contraste para cumplir con los niveles de conformidad AA y AAA

Nivel de conformidad.	el contraste requerido.
AA.	4.5:1 o más
AAA	7:1 o más

Es decir, como un sitio web que cumple con la accesibilidad web,Se requiere una proporción de al menos 4.5:1 en el contraste.En muchos verificadores de contraste, la relación de contraste se calcula automáticamente, así que prestemos atención a esta proporción al verificar.

Cabe destacar que la proporción de contraste 7:1 en AAA se basa en usuarios con visión reducida, aproximadamente 20/80, y el W3C supone que los usuarios con una visión que supera 20/80 generalmente utilizan tecnología de asistencia para acceder al contenido.

AAA no es un requisito obligatorio, sino una recomendación.Si se espera que usuarios con baja visión o con deficiencias de percepción del color utilicen el sitio, se debe diseñar teniendo en cuenta una proporción de contraste de 7:1.lo será.

Referencia:Entender el criterio de éxito 1.4.6 | Guía de WCAG 2.0 (W3C)

Punto ② Presta atención al tamaño de la fuente

En el punto ①, se mencionó que 'se requiere un contraste de al menos 4.5:1', pero de hecho, hay excepciones.En casos como el siguiente, no es necesario cumplir estrictamente con 4.5:1.

◆ Excepciones a la normativa de la relación de contraste

・Excepción ① Texto grande y en negrita
Para texto grande o en negrita (texto normal de más de 18 puntos o texto en negrita de 14 puntos),La relación de contraste es de 3:1cumplirá con los estándares. Esto se debe a que se considera que el texto grande tiene una alta visibilidad, por lo que un contraste ligeramente menor presenta menos problemas.

・Excepción ② Texto o logotipos con fines decorativos
El texto accesorio decorativo y los logotipos de la empresa están excluidos de este requisito de contraste. Estos se utilizan para el diseño y el reconocimiento de la marca y no se consideran medios de transmisión de información.

・Excepción ③ Texto dentro de imágenes
El texto en fotografías o imágenes también se incluye como excepción. Sin embargo,Para el texto importante que proporciona información, incluso si está dentro de una imagen, debe tener una relación de contraste adecuada.se recomienda.

Punto ③ También es necesario considerar a los usuarios con características de percepción del color.

Hasta aquí hemos centrado nuestras explicaciones únicamente en la relación de contraste, pero cuando consideramos la accesibilidad de color, en realidad el contraste solo no es suficiente. PorqueConsideraciones para usuarios con características de visión del colorEsto debe ser considerado también.

Por ejemplo, a continuación se muestra la disposición de los botones que a menudo se ven en formularios de correo electrónico en sitios web, donde la relación de contraste entre el color de fondo y el color del texto de ambos botones cumple con la configuración AA.

◆ Botón conforme a la relación de contraste AA

Es común pensar que 'el contraste cumple con los estándares, así que la accesibilidad está asegurada', pero eso es un error. Este botónPercepción del color tipo D (percepción de dos colores tipo II).A través del filtro, se verá de la siguiente manera.

◆ Cómo se ve el botón para personas con daltonismo tipo D

De esta manera,los colores de los dos botones pueden ser muy similares, dificultando su diferenciación a simple vista.Esto significa que no sólo hay que tener en cuenta la relación de contraste, sino también las características de la visión cromática a la hora de crear una combinación de colores.

Además, en términos de consideración hacia los usuarios con características de percepción del color,«No transmitir información solo a través de diferencias de color»Este aspecto también se convierte en un punto importante a tener en cuenta.

Con Uniwave, los usuarios pueden cambiar el contraste por sí mismos.

Si no tiene recursos para verificar el contraste de su sitio, nuestra empresaHerramienta de accesibilidad 'UniWeb'recomiendo la implementación. Uniwave permite agregar una línea de código al source de su sitio web para habilitar diversas funciones de accesibilidad.Implementación inmediataEs una herramienta tipo plugin que se puede utilizar.

Una gran característica de Uniweb es que,Los usuarios pueden utilizar diversas funciones de accesibilidad mientras navegan por el sitio web.Este es un punto. Dentro de las funciones de accesibilidad implementadas hay una opción para ajustar el contraste, donde se puede aumentar la legibilidad simplemente haciendo clic para alternar entre "colores invertidos", "contraste oscuro" y "contraste claro".

◆ Función de cambio de contraste de Uniwave.

Además, en la pantalla de administración,Informe de diagnóstico sobre la adaptación de la accesibilidad web del sitiose puede consultar. En el informe, se muestran los niveles de conformidad (A, AA, AAA) para cada elemento y se presentan métodos concretos de modificación para las áreas que requieren ajustes, por lo queEsto permite una operación eficiente sin la necesidad de buscar las áreas de corrección en varias herramientas de verificación.。

◆ Pantalla de administración de Uniweb

En la parte inferior derecha de este artículo,Haga clic en el "icono de persona azul circular".puede mostrarnos los menús de accesibilidad de Uniweb. Hay diversas funciones de accesibilidad además del cambio de contraste, así que le invitamos a conocer las funciones de Uniweb.

Resumen

En sitios web donde se recibe mucha información visual,es necesario garantizar la visibilidad y legibilidad para todos los usuarios.debe hacerse. Por lo tanto, es necesario entender las consideraciones que necesitan los usuarios con baja visión, personas mayores y aquellos con características de percepción del color, e implementar un diseño accesible apropiado en su propio sitio web.

Los contrast checkers son herramientas muy útiles para lograr un diseño accesible. Muchos de ellos están incluidos en herramientas de verificación de accesibilidad web de pago, peroSi se trata solo de un verificador de contraste, hay herramientas gratuitas que se pueden utilizar adecuadamente.Así que, primero comience revisando su propio sitio web.

En este artículo, nos enfocamos en la verificación del contraste dentro de la accesibilidad web, peroSi desea obtener más información sobre la accesibilidad web, consulte nuestros artículos anteriores en este sitio y la 'Guía de introducción a la accesibilidad web' proporcionada por la Agencia Digital.。

Referencia:Artículo anterior: «¿Qué medidas de accesibilidad web deben implementar obligatoriamente los responsables del sitio?»、Guía de implementación de la accesibilidad web (Agencia Digital)

Además, en Uniweb,También puede solicitar un diagnóstico gratuito de su sitio web.Estamos implementando esto, por lo que los empresarios que estén considerando la accesibilidad web de su sitio debenEnlace a continuaciónNo dude en solicitarlo.

Diagnóstico de accesibilidad gratuito (Uniweb)

Verificador de contraste.