Comprobador de Contraste de Color WCAG

Evalúe la relación de contraste de los colores de texto y fondo según las directrices WCAG 2.1. Genere ajustes de color accesibles al instante.

HEX/RGB/HSL
HEX/RGB/HSL
Todo se ejecuta localmente en tu navegador.

Vista Previa de Texto en Vivo

Título Grande (18pt Negrita / 24pt Regular)

Esta es una vista previa del estilo de texto de título grande.

Texto Normal (Menos de 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Relación de Contraste

18.6:1

Estado de Cumplimiento WCAG 2.1

Requisitos WCAG AA
Texto Normal (4.5:1) PASS
Texto Grande (3.0:1) PASS
Requisitos WCAG AAA
Texto Normal (7.0:1) PASS
Texto Grande (4.5:1) PASS

Directrices WCAG 2.1

Verifica fácilmente los estándares de contraste para construir interfaces accesibles que cumplan con la Sección 508, ADA y las directrices WCAG AA o AAA.

Motor de Sugerencias

Ajustar automáticamente los colores incrementalmente a lo largo de las coordenadas HSL para encontrar las alternativas más cercanas que cumplan los criterios de relación de contraste.

Completamente del lado del cliente

Los cálculos se ejecutan localmente dentro del contexto de su navegador. No se transmiten colores, archivos ni coordenadas de telemetría a nuestros servidores.

Herramientas de color relacionadas

Convertidor de color HEX RGB HSL
Convierte colores y ajusta las coordenadas de luminosidad.
Selector de color de imagen
Extrae paletas de colores de maquetas de diseño.
Convertidor de color CSS
Convertir entre formatos CMYK, HSV, RGB, HSL y HEX.

Comprobador de Contraste de Color

Calcular las relaciones de contraste WCAG para los colores de primer plano y fondo y mostrar resultados comunes de tamaño de texto.

Entrada
Dos colores CSS válidos y texto de vista previa opcional.
Salida
Una relación de contraste con indicadores de aprobado o fallo WCAG AA y AAA.
Limitaciones reales
El cálculo cubre solo el contraste de luminancia; no certifica una interfaz ni tiene en cuenta la representación de fuentes, movimiento, enfoque o señales no cromáticas.
Privacidad y tratamiento de datos
dos colores CSS válidos y texto de preview opcional se procesan en esta tabla del navegador. Convertr no lo recibe ni almacena; cerrar o recargar la página desliza el estado de trabajo a menos que la herramienta ofrece explícitamente una descarga local.

Cómo utilizar esta herramienta

  1. Proporciona dos colores CSS válidos y texto de vista previa opcional en los controles de la herramienta.
  2. Selecciona las configuraciones que afectan a una relación de contraste con indicadores de aprobado o fallo WCAG AA y AAA, luego ejecuta la herramienta.
  3. Revisa una relación de contraste con indicadores de aprobado o fallo WCAG AA y AAA antes de copiarlo o descargarlo.

Modos comunes de fallo

Los colores inválidos no se pueden medir, y la transparencia sin un fondo resuelto puede hacer que una relación no tenga sentido.

Ejemplo útil

Compara #1f2937 sobre #ffffff para revisar su relación para texto normal y grande.