Comprobador de contraste de colores 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.
Fuente: SC 1.4.3, W3C – WCAG 2.2: Contrast (Minimum), Level AA. Actualizado: .
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).
Cómo comprobar el contraste de color
- Introduce o elige el color del texto (primer plano).
- Introduce o elige el color de fondo.
- Lee la relación de contraste y los criterios WCAG que se cumplen (AA, AAA); usa el color propuesto si hace falta.
Ejemplo: negro sobre blanco llega a 21:1. El gris #767676 sobre blanco obtiene 4,54:1 y cumple AA para texto normal; el azul #3B82F6 sobre blanco solo alcanza 3,68:1 y cumple AA únicamente para texto grande.
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.
Más herramientas de color: el conversor de colores, el generador de paletas y el cuentagotas.
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.
¿Qué contraste se exige para texto grande?
Para texto grande (18 pt, o 14 pt en negrita), WCAG AA pide al menos 3:1 y AAA 4,5:1. El texto normal necesita 4,5:1 (AA) o 7:1 (AAA).
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: · Principios editoriales
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 IMC según la OMSCalculadora de IMC: índice de masa corporal con estatura y peso, categoría de la OMS en una escala de colores, peso normal para tu estatura y BMI Prime.
- Calculadora de aclaramiento de creatinina (Cockcroft-Gault)Calculadora de aclaramiento de creatinina con Cockcroft-Gault: edad, sexo, peso, talla y creatinina dan el ClCr con peso real, ideal y ajustado.
- Generador de color aleatorioGenera un color aleatorio o una paleta: totalmente al azar, pastel, vivo, oscuro, tonos de un color o armonía. Con HEX, RGB, HSL y color de texto legible.
- Colores HTMLColores HTML: los 148 nombres de colores CSS con HEX, RGB, HSL y contraste del texto, con búsqueda y filtro por familia de color. Un clic copia el valor.
- Combinar tipografías: pares para títulos y textoPares de fuentes para títulos y texto con vista previa en vivo, CSS para copiar y disponibilidad en Windows, Mac, iPhone y Android, solo fuentes del sistema.
- Simulador de daltonismoMira tu imagen y tus colores como los ve una persona con daltonismo rojo-verde, azul-amarillo o sin colores. Modelo científico, imagen procesada en local.