Comprobador de contraste de color

Pruebe combinaciones de colores para cumplir con las normas de accesibilidad WCAG. Compruebe las relaciones de contraste para los estándares AA y AAA en tiempo real. Ideal para diseñadores web que trabajan con Colores hexadecimales y Valores RGB.

Vista previa del texto de muestra Así se verá tu texto con los colores seleccionados. El texto grande (18 pt o más o 14 pt en negrita) tiene requisitos diferentes a los del texto normal.
21:1
relación de contraste
A+
Excelente: perfecto para todos los elementos de texto e interfaz de usuario.

Texto normal

AAA (7:1) Pasó
AA (4.5:1) Pasó

Texto grande

AAA (4.5:1) Pasó
AA (3:1) Pasó

Componentes de la interfaz de usuario

AA (3:1) Pasó

Color del Texto:

Color de Fondo:

Texto de vista previa personalizado

Exportar colores

Instrucciones de uso

  1. Introduce tus colores - Escriba códigos hexadecimales (use nuestro Convertidor de HEX a RGB si es necesario) o utilice los selectores de color para seleccionar el texto y los colores de fondo.
  2. Comprobar los resultados - Vea la relación de contraste y el estado de cumplimiento de WCAG en tiempo real.
  3. Ajuste según sea necesario - Utilice variaciones de color o el selector para encontrar combinaciones accesibles.
  4. Exporta tus colores - Descargue variables CSS o SCSS para su proyecto.

Caracteristicas

Análisis en tiempo real

Cálculo instantáneo de la relación de contraste a medida que escribe o ajusta los colores

Cumplimiento de WCAG 2.1

Consulte los estándares AA y AAA para texto normal y grande

Generador de esquema de color

Generar variaciones y armonías de color accesibles

Opciones de exportación

Exporta tus colores accesibles como variables CSS o SCSS

Pautas de contraste WCAG

Las Pautas de Accesibilidad al Contenido Web (WCAG) definen las relaciones de contraste mínimas para garantizar que el texto sea legible para usuarios con discapacidades visuales. Al diseñar sitios web o crear gráficos con nuestros... editor de imagenSeguir estos estándares garantiza que su contenido sea accesible para todos:

AA
Nivel AA (Mínimo)

4.5:1 para texto normal, 3:1 para texto grande (18pt+ o 14pt+ en negrita)

AAA
Nivel AAA (Mejorado)

7:1 para texto normal, 4.5:1 para texto grande

UI
Componentes de la interfaz de usuario

Mínimo 3:1 para objetos gráficos y componentes de interfaz de usuario

Herramientas de color relacionadas

Explore más herramientas de color e imagen para mejorar su flujo de trabajo de diseño:

HEX
Convertidor de HEX a RGB

Convierte códigos de color hexadecimales a valores RGB para trabajos de diseño y CSS

RGB
Convertidor RGB a HEX

Convierte valores de color RGB a códigos hexadecimales para el desarrollo web

ICO
Favicon Generator

Cree faviconos ICO para su sitio web accesible a partir de archivos PNG, JPG o SVG

Preguntas Frecuentes

La relación de contraste mide la diferencia de brillo entre dos colores. Una relación más alta significa una mejor legibilidad. Esto es crucial para usuarios con baja visión, daltonismo o quienes ven pantallas en entornos con mucha luz. Las directrices WCAG establecen relaciones mínimas para garantizar que el contenido sea accesible para todos. Puede usar nuestro convertidores de color para obtener valores de color exactos para las pruebas.

El nivel AA es el estándar mínimo recomendado y es un requisito legal en muchas jurisdicciones. Requiere una relación de 4.5:1 para texto normal y de 3:1 para texto grande. El nivel AAA es un estándar mejorado (7:1 para texto normal) que ofrece mayor accesibilidad, pero no siempre es alcanzable para todos los requisitos de diseño.

El texto grande se define como un tamaño mínimo de 18 puntos (24 px) para un grosor normal, o de 14 puntos (aproximadamente 18.5 px) para texto en negrita. El texto grande tiene requisitos de contraste más bajos porque su tamaño facilita la lectura.

La relación de contraste se calcula utilizando la luminancia relativa de cada color. La fórmula es (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia del color más claro y L2 es la del color más oscuro. El resultado varía de 1:1 (sin contraste) a 21:1 (máximo contraste, negro sobre blanco).

No, todos los cálculos de color se realizan directamente en su navegador mediante JavaScript. Sus elecciones de color nunca se envían a ningún servidor, lo que garantiza una privacidad total. La herramienta funciona sin conexión una vez cargada. Este es el mismo enfoque de privacidad que utilizamos para nuestros... convertidores de imágenes y otras herramientas del lado del cliente.