Herramienta de Contraste de Color

Ayuda a diseñadores y desarrolladores a verificar el contraste WCAG entre primer plano y fondo para accesibilidad web.

Request Feature / Support
8,748+
Total Calculations Run
< 15ms
Browser Execution Speed
100%
Client-Side Privacy
4.9 / 5.0
User Satisfaction
AI Web Tool Generator

Build Your Own Custom Web Calculator in Seconds

Type what tool or calculator you need below. Our AI will build it instantly for your site.

Popular ideas:
100% FREE • No Credit Card Required

Sobre esta herramienta

Esta herramienta calcula la relación de contraste entre dos colores de entrada utilizando las fórmulas WCAG. Acepta colores de primer plano y fondo en formatos hex o rgb y devuelve una relación numérica de contraste, así como aplicabilidad AA y AAA.
Conceptualmente, el flujo analiza las entradas, las convierte a sRGB, calcula la luminancia relativa de cada color y aplica la fórmula de contraste WCAG. El cálculo usa L = 0,2126R + 0,7152G + 0,0722B tras la linealización de valores sRGB y Contraste = (L1+0,05)/(L2+0,05) con L1 ≥ L2.
Quién se beneficia: ingenieros frontend, diseñadores UI/UX, equipos de QA y equipos de producto que realizan auditorías de accesibilidad. Casos de uso: texto sobre imágenes, botones frente a fondos variados, tematización y paletas responsivas en modos claro y oscuro.
Valor único: admite múltiples formatos de entrada, devuelve resultados numéricos precisos e indica claramente la conformidad para texto normal y grande. Funciones opcionales: orientación automatizada para ajustar pares de color, resultados listos para exportar para entregas de diseño y salidas legibles por máquina para pipelines de automatización.

Cómo usar

  1. Proporcionar entradas: color de primer plano y color de fondo en hex o rgb.
  2. Opcionalmente establecer el tamaño de texto en px para texto normal o grande.
  3. Elegir el modo de accesibilidad (AA o AAA).
  4. Ejecutar el cálculo y observar los resultados.
  5. Ajustar los colores para cumplir las umbrales deseadas y volver a comprobar.
How to use color tool windows

Frequently Asked Questions

Encuentre respuestas rápidas

¿Qué formatos de color se soportan?
La herramienta admite colores hex (#RRGGBB o #RGB) y valores rgb(a). Normaliza las entradas al espacio de color sRGB para el cálculo. Los colores con nombre no están garantizados en todos los entornos.
¿Cómo se calcula la relación de contraste?
Las entradas se analizan y se convierten a valores sRGB lineales. La luminancia relativa L se calcula como L = 0,2126R + 0,7152G + 0,0722B. La relación de contraste es (L1 + 0,05) / (L2 + 0,05) con L1 ≥ L2, siguiendo las fórmulas WCAG.
¿Cómo debo interpretar los resultados?
La herramienta devuelve la relación de contraste y los booleans passes_AA y passes_AAA. Para texto normal, AA requiere ≥ 4,5:1 y AAA ≥ 7:1. Para texto grande, AA ≥ 3:1 y AAA ≥ 4,5:1.
¿Incluye simulaciones de dispositivo o espacios de color?
La herramienta utiliza por defecto sRGB y no simula renderizado específico de dispositivos ni diferencias perceptivas entre pantallas. Se centra en el contraste WCAG estándar para contenido web.

Need to run multiple calculations?

Create a free account today to unlock unlimited daily runs, access advanced parameters, save your history, and request custom features.

Register Free Account

Related Tools

Other useful calculators and utilities you might like

Color & Design Tools

Convertidor de Spotify a MP3

Convierte archivos de audio proporcionados localmente a MP3, permitiendo escucha offline y compatibi...

Color & Design Tools

Calculadora de Distancia por Carretera

Calculadora de distancia por carretera para viajeros, planificadores logísticos y conductores para e...

Color & Design Tools

Calculadora de Edad

Determina rápidamente la edad de una persona a partir de su fecha de nacimiento con nuestra calculad...

Color & Design Tools

Convertidor de divisas

Convierte rápidamente cantidades entre diferentes monedas con nuestro convertidor de divisas en líne...

Tu opinión importa

Ayúdanos a mejorar