Comprobador de contraste de color

1. Introduce el valor HEX del color de primer plano o selecciónalo con su selector.
2. Introduce el valor HEX del color de fondo o utiliza su selector.
3. Consulta la relación de contraste en tiempo real.
4. Revisa los resultados WCAG 2.2 para texto normal, texto grande y elementos sin texto aplicables.
5. Previsualiza texto de muestra y un botón con los colores elegidos.
6. Usa Intercambiar para cambiar los colores de primer plano y fondo, o Restablecer para recuperar los valores iniciales.

Comprobador de contraste de color

El contraste de color describe la diferencia de brillo relativo entre dos colores. Un contraste suficiente puede facilitar la distinción del texto respecto al fondo. Este comprobador permite probar una combinación de primer plano y fondo antes de usarla en un sitio web, aplicación, sistema de diseño u otra interfaz.

Introduce valores HEX o selecciona colores con los selectores. La relación de contraste y los resultados WCAG 2.2 se actualizan al cambiar los colores.

Cómo comprobar el contraste de color

Elige un color de primer plano para el texto u otro elemento y un color de fondo. Introduce valores HEX o usa los selectores. El comprobador calcula la relación de contraste y muestra los resultados según los umbrales WCAG aplicables.

Qué es la relación de contraste

La relación de contraste describe la diferencia relativa entre dos colores y se expresa como una proporción, por ejemplo, 4,5:1. Su rango va de 1:1, sin diferencia de contraste, a 21:1, el contraste máximo entre negro y blanco. Un valor mayor suele indicar una diferencia más grande, pero el umbral necesario depende del uso: texto normal, texto grande o contenido sin texto aplicable.

Requisitos de contraste WCAG 2.2

Para texto normal, WCAG AA exige al menos 4,5:1 y AAA, 7:1. Para texto grande, AA exige 3:1 y AAA, 4,5:1. Los componentes de interfaz y objetos gráficos significativos aplicables tienen un mínimo de 3:1 según el criterio pertinente de contenido no textual. El comprobador muestra estos resultados por separado.

Qué se considera texto grande

A efectos del contraste WCAG, se considera texto grande el de al menos 18 puntos o 14 puntos en negrita. Los puntos y los píxeles CSS no siempre son intercambiables, por lo que conviene considerar el texto tal como se muestra. Si no cumple la definición de texto grande, usa los umbrales de texto normal.

Interpretar los resultados AA y AAA

AA y AAA son niveles de conformidad WCAG distintos, y AAA exige mayor contraste para el texto. Una combinación con una relación de 5:1 aprueba AA para texto normal, pero no AAA; para texto grande aprueba ambos niveles. Cada etiqueta Aprobado o No aprobado corresponde al umbral indicado.

Previsualizar, intercambiar y restablecer

La previsualización muestra texto de muestra y un botón con los colores seleccionados. Úsala junto con la relación numérica para valorar visualmente la combinación. Intercambiar cambia los colores de primer plano y fondo; Restablecer recupera los valores iniciales. El resultado se actualiza al modificar cualquiera de los colores.

Qué significa aprobar

Un resultado aprobado significa que la combinación cumple ese umbral de contraste concreto. No significa que todo un sitio o interfaz sea accesible. La accesibilidad también depende de la tipografía, el tamaño y espaciado del texto, los indicadores de foco, la navegación con teclado, las etiquetas, el texto alternativo, la estructura, el movimiento y la compatibilidad con lectores de pantalla. El color no debe ser la única forma de comunicar información importante.

Cuándo usar un comprobador de contraste

Comprueba colores de texto y fondo al diseñar un sitio, compara colores de texto para mejorar la legibilidad, revisa botones y sus bordes identificativos, prueba controles y gráficos aplicables o analiza una combinación de una interfaz existente. Revisar el contraste pronto ayuda a detectar combinaciones que conviene ajustar.

Compara colores de primer plano y fondo y revisa la relación frente a los umbrales WCAG 2.2 AA y AAA para texto normal y grande, además del requisito aplicable de 3:1 para contenido no textual.

Introduce los colores de primer plano y fondo como valores HEX o selecciónalos con los selectores. El resultado se actualiza al editar cualquiera de los dos.

Previsualiza texto de muestra y un botón con los colores seleccionados para ver la combinación además de consultar su relación numérica.

Usa Intercambiar para cambiar los colores de primer plano y fondo, o Restablecer para recuperar los valores iniciales.