Analizador de contraste de color

Un analizador de contraste de color rápido y basado en normas para diseñadores y desarrolladores, para verificar que el texto sea legible contra colores de fondo en maquetas UI.

Request Feature / Support
6,128+
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 proporciones de contraste WCAG conformes para pares de colores de primer plano y fondo. Considera contextos de tamaño de texto para indicar pasa/falla para texto normal y grande, y reporta una relación numérica con un veredicto de accesibilidad.
Concretamente, admite color de primer plano, color de fondo y tamaño de fuente en píxeles, convierte los colores a luminancia sRGB y aplica la fórmula de proporción estándar. Umbrales de WCAG: 4,5:1 para texto normal AA, 7:1 para texto normal AAA; 3:1 para texto grande AA y 4,5:1 para texto grande AAA. Funciones opcionales incluyen manejo de alfa, simulaciones de daltonismo y recomendaciones de color en modo avanzado.
El público objetivo son diseñadores, ingenieros frontend, profesionales de accesibilidad y equipos de producto que buscan resultados rápidos, precisos y en línea con los estándares. El valor único reside en la evaluación por tamaño de texto con estado Pass/Fail claro y salidas exportables para remediación y gobernanza.

Cómo usar

  1. Proporciona colores de primer plano y fondo, y tamaño de fuente en px.
  2. Ejecuta el cálculo para obtener el ratio de contraste y el estado de conformidad para texto normal y grande.
  3. Revisa los resultados; si fallan, ajusta colores o tamaño de fuente.
  4. Utiliza alternativas de color recomendadas si están disponibles para alcanzar rápidamente los objetivos AA/AAA.
  5. Exporta o copia el resultado para documentación.
How to use online color contrast analyzer

Frequently Asked Questions

Encuentre respuestas rápidas

¿Qué es la relación de contraste de color?
La relación es una métrica WCAG basada en la luminancia relativa del color del primer plano y del fondo. Se expresa como x:1 con x ≥ 1; valores más altos indican mejor legibilidad. La herramienta reporta la proporción numérica y el veredicto por tamaño de texto.
¿Cómo se aplican los umbrales?
Para texto normal, WCAG AA exige al menos 4,5:1 y AAA 7:1. Para texto grande, 3:1 AA y 4,5:1 AAA. La herramienta aplica estos umbrales para determinar Pass o Fail para cada contexto de texto.
¿Cómo se maneja la transparencia?
Si un color tiene alfa, se compone por defecto sobre blanco antes de calcular la luminancia. Esto da un color efectivo. En modo avanzado puede ajustarse el tratamiento o mostrar las entradas en crudo para análisis experto.
¿Qué formatos de entrada se soportan?
La herramienta acepta hex (#RRGGBB o #RGB), rgb()/rgba() y nombres de colores CSS. Si una entrada no se puede analizar, el resultado indica un código de error en lugar de un mensaje UI.

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