What is color accessibility?

Color is such a vital element of web design as it is used to convey personality, attract attention, symbolize action, and indicate importance. As color carries a lot of significance in both being visually pleasing and conveying meaning, users must be able to perceive different colored content on a webpage. Color accessibility is important as it helps users with visual impairments like low vision or color blindness to properly distinguish content elements and read/view them effectively.

What is a color contrast checker?

A color contrast checker is a tool that measures the difference in perceived luminance between two colors to ensure that is perceivable to users with visual impairments or insensitivity.

How is a color contrast ratio caluclated?

The difference is measured on a ratio scale that starts at 1:1 (white on white) to 21:2 (black on white). According to the WCAG level AA, the minimum contrast ratio that colors can have for the visual presentation of text and images of text is 4.5:1.

What is an acceptable WCAG color contrast ratio?

WCAG 2.1 Level AA requires the visual presentation of text and images of text to have a contrast ratio of at least 4.5:1, except for large text, which should have a minimum contrast ratio of 3:1. WCAG 2.1 Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text (14 point and bold or larger, or 18 point or larger).

Do images have to comply with WCAG color contrast requirements?

Images must pass the WCAG contrast requirements. Images that contain text must ensure that the contrast between the image background and the text is sufficient, especially if the images are low quality and if the image needs to be enlarged in any way. Images of text must have a minimum contrast ratio of 4.5:1. For images that do not contain text, but still convey meaning, the image components must still have sufficient contrast to ensure that the overall image is perceivable. WCAG 2.1 level AA specifies that graphical objects and author-customized interface components such as icons, charts, and graphs, buttons, form controls, and focus indicators and outlines, have a contrast ratio of at least 3:1.

Verificador de Contraste de Colores

Evalúa la proporción de contraste entre los colores de fondo y texto para garantizar la accesibilidad. Úsalo para visualizar diferentes combinaciones de colores para el diseño de tu sitio web que cumplan con las Pautas de Accesibilidad para el Contenido Web (WCAG) y la legislación internacional de accesibilidad.

Obtén un Escaneo Gratuito

Guía de la Herramienta de Contraste de Color

Ingrese un color de fondo y primer plano en formato RGB, hexadecimal, o seleccione un color usando el selector de colores. Una vez seleccionado el color, se puede ajustar el nivel de luminosidad.

Cómo Interpretar las Proporciones de Contraste de Color

Requisitos mínimos de proporción de contraste

WCAG 2.2 Nivel AA

Texto normal: proporción de contraste mínima de 4.5:1
Texto grande: proporción de contraste mínima de 3:1

WCAG 2.2 Nivel AAA

Texto normal: proporción de contraste mínima de 7:1
Texto grande: proporción de contraste mínima de 4.5:1

El texto grande se define como 14 puntos (18.67 px) y negrita o mayor, o 18 puntos (24 px) o mayor.

¿Necesita Ayuda Adicional?

Crear elementos de diseño web con el contraste adecuado es uno de los muchos pasos a seguir en tu camino hacia un sitio web accesible. Nuestra plataforma proporciona las herramientas y los datos que necesitas para garantizar que tu sitio web sea completamente compatible y fácil de usar para todos los visitantes.

Obtén un Análisis Gratuito de Accesibilidad

Illustration of Product UI with a dashboard identifying progress for WCAG's A, AA, and AAA compliancy

¿Por qué usar un verificador de contraste de color?

El contraste es uno de los problemas de accesibilidad web más comunes, pero también uno de los más fáciles de solucionar. Según el Sistema de Diseño Web de EE.UU. (USWDS), el 4.5% de la población estadounidense tiene algún tipo de insensibilidad al color que dificulta distinguir o percibir diferencias en los matices. Las personas con insensibilidad al color y baja visión a menudo tienen dificultades para leer texto que no contrasta con su fondo. Proporcionar una relación de contraste de luminancia mínima entre el texto y su fondo puede hacer que el texto sea más legible para usuarios que no pueden ver la gama completa de colores y ayuda a esos usuarios poco comunes que no ven ningún color. Utilice el verificador de contraste de color web de Acquia Web Governance para verificar rápidamente combinaciones de colores y asegurar que todos sus activos de contenido de marca y elementos de diseño sean accesibles para todos. También puede utilizarse para probar el contraste de color con otra legislación, por ejemplo, como un verificador de contraste ADA.

Preguntas Frecuentes

¿Qué es la accesibilidad del color?
El color es un elemento fundamental del diseño web, ya que se utiliza para transmitir personalidad, captar la atención, simbolizar acciones e indicar importancia. Dado que el color tiene gran relevancia tanto para ser visualmente atractivo como para comunicar significado, los usuarios deben poder percibir los diferentes contenidos de colores en una página web. La accesibilidad del color es importante porque ayuda a usuarios con discapacidades visuales como baja visión o daltonismo a distinguir adecuadamente los elementos de contenido y leerlos o visualizarlos de manera efectiva.

El color es un elemento fundamental del diseño web, ya que se utiliza para transmitir personalidad, captar la atención, simbolizar acciones e indicar importancia. Dado que el color tiene gran relevancia tanto para ser visualmente atractivo como para comunicar significado, los usuarios deben poder percibir los diferentes contenidos de colores en una página web. La accesibilidad del color es importante porque ayuda a usuarios con discapacidades visuales como baja visión o daltonismo a distinguir adecuadamente los elementos de contenido y leerlos o visualizarlos de manera efectiva.

¿Qué es un verificador de contraste de colores? Un verificador de contraste de colores es una herramienta digital que evalúa la diferencia visual entre dos colores, especialmente entre el texto y su fondo, para determinar si cumplen con los estándares de accesibilidad web. Esta herramienta mide la relación de contraste y verifica si cumple con las pautas WCAG (Web Content Accessibility Guidelines), asegurando que el contenido sea legible para todas las personas, incluyendo aquellas con discapacidades visuales o daltonismo.
Un verificador de contraste de color es una herramienta que mide la diferencia en la luminancia percibida entre dos colores para asegurar que sea perceptible para usuarios con discapacidades visuales o insensibilidad al color.

¿Qué es un verificador de contraste de colores? Un verificador de contraste de colores es una herramienta digital que evalúa la diferencia visual entre dos colores, especialmente entre el texto y su fondo, para determinar si cumplen con los estándares de accesibilidad web. Esta herramienta mide la relación de contraste y verifica si cumple con las pautas WCAG (Web Content Accessibility Guidelines), asegurando que el contenido sea legible para todas las personas, incluyendo aquellas con discapacidades visuales o daltonismo.

Un verificador de contraste de color es una herramienta que mide la diferencia en la luminancia percibida entre dos colores para asegurar que sea perceptible para usuarios con discapacidades visuales o insensibilidad al color.

¿Cómo se calcula la proporción de contraste de color?
La diferencia se mide en una escala de proporción que va desde 1:1 (blanco sobre blanco) hasta 21:1 (negro sobre blanco). Según el nivel AA de las WCAG, la proporción de contraste mínima que pueden tener los colores para la presentación visual de texto e imágenes de texto es de 4.5:1.

¿Cuál es una proporción de contraste de color WCAG aceptable?
WCAG 2.1 Nivel AA requiere que la presentación visual del texto y las imágenes de texto tengan una relación de contraste de al menos 4.5:1, excepto para texto grande, que debe tener una relación de contraste mínima de 3:1. WCAG 2.1 Nivel AAA requiere una relación de contraste de al menos 7:1 para texto normal y 4.5:1 para texto grande (14 puntos y negrita o mayor, o 18 puntos o mayor).

¿Las imágenes tienen que cumplir con los requisitos de contraste de color de las WCAG?
Las imágenes deben cumplir con los requisitos de contraste WCAG. Las imágenes que contienen texto deben asegurar que el contraste entre el fondo de la imagen y el texto sea suficiente, especialmente si las imágenes son de baja calidad y si la imagen necesita ser ampliada de alguna manera. Las imágenes de texto deben tener una relación de contraste mínima de 4.5:1. Para las imágenes que no contienen texto, pero aún transmiten significado, los componentes de la imagen aún deben tener contraste suficiente para asegurar que la imagen en general sea perceptible. WCAG 2.1 nivel AA especifica que los objetos gráficos y los componentes de interfaz personalizados por el autor, como iconos, gráficos y tablas, botones, controles de formulario, e indicadores de enfoque y contornos, deben tener una relación de contraste de al menos 3:1.

Las imágenes deben cumplir con los requisitos de contraste WCAG. Las imágenes que contienen texto deben asegurar que el contraste entre el fondo de la imagen y el texto sea suficiente, especialmente si las imágenes son de baja calidad y si la imagen necesita ser ampliada de alguna manera. Las imágenes de texto deben tener una relación de contraste mínima de 4.5:1. Para las imágenes que no contienen texto, pero aún transmiten significado, los componentes de la imagen aún deben tener contraste suficiente para asegurar que la imagen en general sea perceptible. WCAG 2.1 nivel AA especifica que los objetos gráficos y los componentes de interfaz personalizados por el autor, como iconos, gráficos y tablas, botones, controles de formulario, e indicadores de enfoque y contornos, deben tener una relación de contraste de al menos 3:1.