Comprobador de contraste según WCAG 2.2
Introduce o elige el color del texto y el del fondo: el comprobador calcula la luminancia relativa de ambos colores y la relación de contraste exactamente según la definición del W3C, y muestra qué criterios de conformidad de las WCAG 2.2 se cumplen. Si el contraste no basta, te propone el color de texto adecuado más cercano.
Cómo se calcula
Cómo se calcula el contraste
Las WCAG 2.2 definen la relación de contraste como (L1 + 0,05) ÷ (L2 + 0,05). L1 es la luminancia relativa del color más claro y L2 la del más oscuro. El resultado va de 1:1 (colores iguales) a 21:1 (negro sobre blanco).
El comprobador calcula la luminancia relativa exactamente según la definición del W3C: cada canal sRGB se divide entre 255 y se linealiza; los valores hasta 0,04045 se dividen entre 12,92 y los mayores se calculan como ((valor + 0,055) ÷ 1,055)2,4. Después, L = 0,2126 × R + 0,7152 × G + 0,0722 × B.
Ejemplo: #777777 sobre blanco. 0x77 = 119, 119 ÷ 255 = 0,4667 → ((0,4667 + 0,055) ÷ 1,055)2,4 = 0,1845. Como los tres canales son iguales, L = 0,1845. El blanco tiene L = 1. Contraste = (1 + 0,05) ÷ (0,1845 + 0,05) = 4,48:1. Basta para texto grande (3:1), pero se queda justo por debajo para texto normal (4,5:1). La propuesta #767676 alcanza 4,54:1.
Los requisitos de las WCAG 2.2
| Criterio de conformidad | Nivel | Texto normal | Texto grande |
|---|---|---|---|
| 1.4.3 Contraste (mínimo) | AA | 4,5:1 | 3:1 |
| 1.4.6 Contraste (mejorado) | AAA | 7:1 | 4,5:1 |
| 1.4.11 Contraste sin texto (componentes de interfaz, gráficos) | AA | 3:1 | |
Según las WCAG, texto grande es el de al menos 18 puntos o al menos 14 puntos en negrita; en el navegador equivale aproximadamente a 24 px o 18,67 px. Quedan exceptuados, entre otros, los logotipos, el texto puramente decorativo y los controles inactivos.
Sin redondear
Las WCAG comparan el valor exacto: 4,499:1 no cumple 4,5:1. Por eso el comprobador evalúa sin redondear y muestra dos decimales; si el redondeo hiciera parecer que se alcanza un umbral, trunca el valor (4,49 en lugar de 4,50).
Colores transparentes
Los colores con valor alfa (p. ej., rgba(0, 0, 0, 0.6) o #00000099) se superponen igual que los dibuja el navegador: un fondo transparente, sobre blanco; un color de texto transparente, sobre el fondo. Si tu página se muestra sobre otra superficie, introduce el color opaco de esa superficie como fondo.
Preguntas frecuentes
¿Qué contraste se necesita para la accesibilidad?
Para texto normal, al menos 4,5:1 (nivel AA de las WCAG, CC 1.4.3); para texto grande, 3:1. El nivel más exigente, AAA, pide 7:1 y 4,5:1, respectivamente. Los controles, como los bordes de los campos de formulario y los iconos, necesitan 3:1 (CC 1.4.11).
¿Qué tonos de gris cumplen AA sobre blanco?
#767676 es el gris más claro con al menos 4,5:1 sobre blanco (4,54:1). #777777, con 4,48:1, ya queda justo por debajo.
¿Cómo encuentra el comprobador el color propuesto?
Mantiene el tono y la saturación de tu color de texto y solo cambia la luminosidad HSL en pequeños pasos, tanto hacia más claro como hacia más oscuro. Propone el cambio más pequeño cuyo color redondeado alcanza el objetivo con seguridad.
¿Se aplica también a la normativa de accesibilidad en España y la UE?
En España, el Real Decreto 1112/2018 (accesibilidad de sitios web y aplicaciones del sector público) remite a la norma europea EN 301 549, que para el contenido web exige las WCAG 2.1 de nivel AA. Esa misma norma es la referencia técnica para la Ley Europea de Accesibilidad (Directiva (UE) 2019/882). Sus criterios de contraste coinciden con los de las WCAG 2.2: 4,5:1 para texto y 3:1 para texto grande y controles.
Fuentes y base legal
- SC 1.4.3: W3C – WCAG 2.2: Contrast (Minimum), Level AA
- SC 1.4.6: W3C – WCAG 2.2: Contrast (Enhanced), Level AAA
- SC 1.4.11: W3C – WCAG 2.2: Non-text Contrast, Level AA
- WCAG 2.2: W3C – WCAG 2.2: Definition “relative luminance”
- WCAG 2.2: W3C – WCAG 2.2: Definition “contrast ratio”
- W3C WAI – Understanding SC 1.4.3: Contrast (Minimum)
Última actualización:
Herramientas relacionadas
- Generador de paletas de coloresCrea colores que combinan a partir de un color base: complementarios, análogos, triádicos, cuadrado, complementario dividido o monocromo, con HEX, RGB y HSL.
- Convertidor de colores: HEX, RGB, HSL, HSV, CMYKConvierte colores de HEX a RGB, de RGB a HEX, HSL, HSV, HWB y CMYK: escribe el color en cualquier formato o elígelo y copia el resultado. En tu navegador.
- Obtener el color de una imagen (cuentagotas)Saca el código de color de una imagen: carga la foto, haz clic en un punto y copia el valor HEX, RGB y HSL, además de los colores principales. Sin subir nada.
- Calculadora de 1RM (repetición máxima)Calcula tu 1RM a partir del peso y las repeticiones con las fórmulas de Epley y Brzycki, con tabla de %1RM de 1 a 10 repeticiones. En kg o lb.
- Calcula cuánta agua necesitas al día¿Cuánta agua beber al día? Ingesta de bebidas y agua total según edad, sexo, embarazo y lactancia, con los valores de referencia de la EFSA y de la DGE alemana.
- Calculadora de calorías quemadas haciendo ejercicioCalcula las calorías quemadas en 30 deportes y actividades a partir del MET, el peso y la duración, según el Compendium 2024, con corrección personal opcional.