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 previsión del gran estilo de texto de título.

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

Verifique 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 razones de contraste WCAG para los colores del antegrado y del fondo y mostrar resultados comunes en tamaño de texto.

Entrada
Dos colores CSS válidos y texto de preview opcional.
Salida
Una relación de contraste con los indicadores WCAG AA y AAA pasan o fallan.
Las limitaciones reales
El cálculo cubre sólo el contraste de la luminancia; no certifica una interfaz o cuenta para renderización de fuentes, movimiento, foco o cues no coloridas.
Privacidad y tratamiento de datos
dos colores CSS válidos y texto de preview opcional se procesan en esta tabla del navegador. Converter 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. Ofrece dos colores CSS válidos y texto de previsión opcional en los controles de herramientas.
  2. Seleccione las configuraciones que afectan a una relación de contraste con los indicadores WCAG AA y AAA pasados o fallidos, luego ejecuta la herramienta.
  3. Revise una relación de contraste con los indicadores WCAG AA y AAA pasan o fallan antes de copiar o descargarlo.

Modos comunes de fracaso

Los colores invalidos no se pueden medir, y la transparencia sin un fondo resolto puede hacer que una relación sea sin sentido.

Un ejemplo útil

Compare el texto #f2937 en #ffffff para revisar su relación entre texto normal y grande.