Calculadora de ratio de contraste de color WCAG
Mide el ratio de contraste WCAG entre un color de primer plano y uno de fondo para confirmar que tu texto sea legible y accesible.
Higher is more readable (max 21:1)
- 1
Fg relative luminance
0.2126×0,0103 + 0.7152×0,0103 + 0.0722×0,0103 = 0,0103Each sRGB channel is gamma-linearised (transfer function) then weighted per WCAG - 2
Bg relative luminance
0.2126×1 + 0.7152×1 + 0.0722×1 = 1 - 3
Contrast ratio
(1 + 0.05) ÷ (0,0103 + 0.05) = 17,40
¿Cómo funciona esta calculadora?
El ratio de contraste WCAG es (luminancia más clara + 0,05) / (luminancia más oscura + 0,05), entre 1:1 y 21:1. Apunta a al menos 4,5:1 para texto normal y 3:1 para texto grande para cumplir AA, o 7:1 y 4,5:1 para AAA. Introduce dos colores hex para comprobarlo al instante.
Fórmula
How this is calculated
Introduce un color hex de primer plano (texto) y un color hex de fondo. Se aceptan tanto las formas abreviadas de 3 dígitos (#fff) como las de 6 dígitos (#ffffff), con o sin el "#" inicial.
Cada color se convierte a su luminancia relativa. El valor de canal de 8 bits se divide entre 255 y luego se lineariza: si el resultado s es menor o igual a 0,03928 se divide entre 12,92, en caso contrario se convierte en ((s + 0,055) / 1,055) elevado a la potencia 2,4. Los valores linealizados de rojo, verde y azul se ponderan con 0,2126, 0,7152 y 0,0722 respectivamente y se suman para obtener la luminancia L. El ratio de contraste es (Lmásclaro + 0,05) / (Lmásoscuro + 0,05), donde el término 0,05 modela el reflejo ambiental. Los ratios van de 1:1 (colores idénticos) a 21:1 (negro puro sobre blanco puro).
Los umbrales de WCAG 2.1 determinan los resultados de aprobado: AA requiere al menos 4,5:1 para texto normal y 3:1 para texto grande (aproximadamente 18pt, o 14pt en negrita); AAA requiere 7:1 para texto normal y 4,5:1 para texto grande. El cálculo es simétrico, por lo que intercambiar primer plano y fondo da el mismo ratio. Solo evalúa el color y no tiene en cuenta la opacidad, el suavizado de bordes ni las capas superpuestas.
Preguntas frecuentes
Al menos 4,5:1 para texto de cuerpo normal y 3:1 para texto grande (alrededor de 18pt normal o 14pt en negrita). Para el nivel más estricto AAA necesitas 7:1 en normal y 4,5:1 en grande.
No. La fórmula usa la luminancia más clara y la más oscura sin importar a qué color etiquetes como primer plano, por lo que intercambiar las dos entradas produce el mismo ratio.
El blanco puro tiene una luminancia relativa de 1 y el negro puro de 0. Al introducirlos en (1 + 0,05) / (0 + 0,05) se obtiene exactamente 21, el contraste más alto alcanzable.
También conocido como
TG we-Calculate Editorial Team. (2026). Calculadora de ratio de contraste de color WCAG [Online calculator]. TG we-Calculate. https://we-calculate.com/es/calculator/color-contrast-ratio-calculator
TG we-Calculate Editorial Team. "Calculadora de ratio de contraste de color WCAG." TG we-Calculate. 2026. https://we-calculate.com/es/calculator/color-contrast-ratio-calculator.
TG we-Calculate Editorial Team, "Calculadora de ratio de contraste de color WCAG," TG we-Calculate, 2026. [Online]. Available: https://we-calculate.com/es/calculator/color-contrast-ratio-calculator
@misc{wecalculate_color_contrast_ratio_calculator, title = {Calculadora de ratio de contraste de color WCAG}, author = {{TG we-Calculate Editorial Team}}, howpublished = {\url{https://we-calculate.com/es/calculator/color-contrast-ratio-calculator}}, year = {2026}, note = {TG we-Calculate} }
¿Te ayudó esta calculadora?