Low budget? Rent a premium website today & own it later! We handle all design & hosting headaches so you can focus on growth. From INR 2499/mo →
S

Comprobador de contraste de color

Prueba combinaciones de colores para comprobar la accesibilidad seg n las directrices WCAG. Verifica las relaciones de contraste para los est ndares AA y AAA en tiempo real. Ideal para dise adores web que trabajan con colores HEX 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 de 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 para el Contenido Web (WCAG) definen ndices de contraste m nimos para garantizar que el texto sea legible para usuarios con discapacidad visual. Al dise ar sitios web o crear gr ficos con nuestro editor de im genes , seguir 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 indica una mejor legibilidad. Esto es fundamental para usuarios con baja visi n, daltonismo o que visualizan pantallas en entornos luminosos. Las directrices WCAG establecen relaciones m nimas para garantizar que el contenido sea accesible para todos. Puede utilizar nuestros convertidores de color para obtener valores de color exactos para realizar 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 tu navegador mediante JavaScript. Tus selecciones de color nunca se env an a ning n servidor, lo que garantiza total privacidad. La herramienta funciona sin conexi n una vez cargada. Este es el mismo enfoque que prioriza la privacidad que utilizamos para nuestros convertidores de im genes y otras herramientas del lado del cliente.

Welcome to SurITDev's official Comprobador de contraste de color. Our enterprise-grade utility allows you to instantly process your data securely in your browser without tracking or logging. This tool is fully optimized for speed, accuracy, and professional workflow.

Our Marketplace & Social Media Partners

Trusted by leading brands and platforms worldwide