El contraste mínimo es 4,5:1, y un gris sobre blanco cumple hasta #767676
El contraste de color compara el brillo del color del texto con el del fondo en una escala de 1:1 a 21:1. Dos colores iguales dan 1:1, y el negro sobre blanco da 21:1. WCAG 2.2, el estándar internacional de accesibilidad web, pide como mínimo 4,5:1 (nivel AA) para el texto de tamaño normal, como el cuerpo de un artículo. Sobre fondo blanco, #767676 es el gris más claro que cumple, con 4,54:1, y el siguiente paso más claro, #777777, se queda en 4,47:1. El orden de los dos colores no influye: texto blanco sobre un fondo #767676 también da exactamente 4,54:1.
Si introduce un color de texto y un color de fondo en el comprobador de arriba, verá la relación de contraste junto con el resultado para texto normal, texto grande e iconos. Al indicar el tamaño y el peso del texto, el comprobador elige el criterio que le corresponde. Cuando la pareja no llega, conserva el matiz y cambia solo la luminosidad hasta encontrar el color más cercano que cumple. La vista previa de más abajo muestra cómo ven esos mismos colores las personas con una deficiencia de visión del color, y qué contraste obtienen.
Cuándo conviene comprobar el contraste
El texto con poco contraste es una ligera molestia para quien ve bien, pero puede resultar ilegible para personas con baja visión, personas mayores y personas con una deficiencia de visión del color. El W3C explica que el criterio 1.4.3 busca que quienes tienen una visión moderadamente baja o una percepción reducida del contraste puedan leer el texto sin tecnologías de apoyo que aumenten el contraste. Señala además que la relación de 4,5:1 tiene en cuenta la pérdida de sensibilidad al contraste que suele acompañar a la edad. Estas son situaciones en las que merece la pena calcular la relación:
- Al usar colores de marca en botones y enlaces: los azules, rojos y verdes que se ven vivos en pantalla suelen tener poco contraste con el blanco. Un enlace #3B82F6 sobre blanco da 3,67:1, y el texto blanco sobre un botón #EF4444 da 3,76:1. Ninguno alcanza los 4,5:1 que se piden para el texto del cuerpo.
- Al poner en gris claro los textos de ayuda y los secundarios: #9CA3AF, muy usado en marcadores de posición, fechas y pies de foto, solo llega a 2,53:1 sobre blanco. Quien quiere que algo parezca menos importante a menudo acaba haciéndolo ilegible.
- Al elegir colores para el modo oscuro: el mismo gris da una relación completamente distinta sobre un fondo oscuro, por lo que hay que calcularla aparte.
- Al crear los tokens de color de un sistema de diseño: si las parejas de texto y fondo se fijan con números desde el principio, no hace falta volver a comprobar cada pantalla nueva.
- Al preparar una auditoría de accesibilidad o una revisión para una licitación: el contraste es uno de los puntos que más se revisan, sobre todo en sitios que deben cumplir una norma legal o contractual.
Cómo se calcula la relación de contraste
WCAG 2.2 calcula el contraste a partir de un valor llamado luminancia relativa. Primero se divide cada valor R, G y B (de 0 a 255) entre 255. Si el resultado es 0,04045 o menos, se divide entre 12,92; si es mayor, el valor lineal es ((valor + 0,055) ÷ 1,055)2,4. La luminancia relativa es L = 0,2126 × R + 0,7152 × G + 0,0722 × B, y la relación de contraste es (L del color más claro + 0,05) ÷ (L del color más oscuro + 0,05). El verde tiene el mayor peso porque el ojo es más sensible a la luz verde.
Antes de mayo de 2021, la definición indicaba el umbral 0,03928 en lugar de 0,04045. WCAG 2.2 afirma que la diferencia no tiene un efecto práctico en el cálculo, y en efecto ningún valor de 8 bits cae entre los dos umbrales (10/255 = 0,0392 y 11/255 = 0,0431). Este es el cálculo de #3B82F6 sobre blanco.
| Paso | R | G | B |
|---|---|---|---|
| Valor de 8 bits | 59 | 130 | 246 |
| ÷ 255 | 0,2314 | 0,5098 | 0,9647 |
| Valor lineal | 0,0437 | 0,2232 | 0,9216 |
| Peso | 0,2126 | 0,7152 | 0,0722 |
La luminancia relativa es 0,2126 × 0,0437 + 0,7152 × 0,2232 + 0,0722 × 0,9216 = 0,2355. El blanco tiene luminancia relativa 1, así que la relación es (1 + 0,05) ÷ (0,2355 + 0,05) = 3,6779… El W3C indica que los valores calculados no deben redondearse y pone el ejemplo de que 4,499:1 no cumple 4,5:1. Por eso este comprobador trunca a dos decimales, muestra 3,67:1 y decide si cumple con el valor que usted ve.
Los requisitos de contraste de WCAG 2.2 de un vistazo
| Elemento | AA | AAA | Criterio de conformidad |
|---|---|---|---|
| Texto normal (cuerpo de texto, etiquetas de botón, etc.) | 4,5:1 | 7:1 | 1.4.3 · 1.4.6 |
| Texto grande (18 pt o más, o 14 pt o más en negrita) | 3:1 | 4,5:1 | 1.4.3 · 1.4.6 |
| Elementos no textuales como iconos, bordes de campos y partes de gráficos | 3:1 | — | 1.4.11 |
Los criterios de texto tienen excepciones. No se exige contraste al texto de componentes de la interfaz que están inactivos, a la decoración pura, al texto que no es visible para nadie ni al texto que forma parte de una imagen con mucho otro contenido visual. Tampoco al texto de un logotipo o de un nombre de marca. El criterio 1.4.11, que se refiere a iconos y bordes, mide el contraste con los colores adyacentes, y los componentes inactivos y los elementos que conservan el aspecto por defecto del navegador son excepciones.
AA es el nivel que piden la mayoría de las leyes y guías, y AAA corresponde a una lectura más cómoda. El propio WCAG 2.2 reconoce que algunos contenidos no pueden cumplir todos los criterios AAA, por lo que no recomienda exigir AAA como política general para un sitio entero.
¿Desde cuántos píxeles es grande un texto?
En WCAG, el texto grande es el de 18 pt o más, o el de 14 pt o más si está en negrita. En CSS, 1 pt equivale a 4/3 px, de modo que con peso normal se necesitan 24 px o más, y en negrita 18,67 px o más. El documento explicativo del W3C da para 14 pt unos 18,5 px, así que el texto en negrita entre 18,5 px y 18,67 px queda en el límite. Este comprobador convierte con exactitud, con 1 pt = 4/3 px. El tamaño que cuenta es el que tiene el contenido al entregarse, antes de cualquier ampliación del usuario.
| Tamaño del texto | pt | Peso | Criterio (AA) |
|---|---|---|---|
| 12 px | 9 pt | Normal | Texto normal 4,5:1 |
| 16 px | 12 pt | Normal | Texto normal 4,5:1 |
| 18 px | 13,5 pt | Negrita | Texto normal 4,5:1 |
| 19 px | 14,25 pt | Negrita | Texto grande 3:1 |
| 20 px | 15 pt | Normal | Texto normal 4,5:1 |
| 24 px | 18 pt | Normal | Texto grande 3:1 |
WCAG advierte de que las tipografías de trazo muy fino o de formas poco habituales son más difíciles de leer con poco contraste. Si usa una tipografía ligera o decorativa, es más prudente alcanzar 4,5:1 incluso en texto grande.
Colores habituales sobre blanco y sobre negro
El valor sobre fondo blanco de la tabla coincide con el del texto blanco sobre ese color. El veredicto corresponde al texto normal en AA (4,5:1).
| Color | Sobre blanco | Sobre negro | Texto normal AA |
|---|---|---|---|
| #999999 | 2,84:1 | 7,37:1 | Cumple solo sobre negro |
| #888888 | 3,54:1 | 5,92:1 | Cumple solo sobre negro |
| #777777 | 4,47:1 | 4,68:1 | Cumple solo sobre negro |
| #767676 | 4,54:1 | 4,62:1 | Cumple sobre ambos |
| #666666 | 5,74:1 | 3,65:1 | Cumple solo sobre blanco |
| #595959 | 7,00:1 | 2,99:1 | Cumple solo sobre blanco (también cumple AAA) |
| #3B82F6 | 3,67:1 | 5,70:1 | Cumple solo sobre negro |
| #2563EB | 5,16:1 | 4,06:1 | Cumple solo sobre blanco |
| #EF4444 | 3,76:1 | 5,58:1 | Cumple solo sobre negro |
| #DC2626 | 4,82:1 | 4,34:1 | Cumple solo sobre blanco |
| #16A34A | 3,29:1 | 6,37:1 | Cumple solo sobre negro |
| #15803D | 5,01:1 | 4,18:1 | Cumple solo sobre blanco |
| #F59E0B | 2,14:1 | 9,77:1 | Cumple solo sobre negro |
| #B45309 | 5,02:1 | 4,18:1 | Cumple solo sobre blanco |
Como muestra la tabla, un gris medio cercano a #767676 supera 4,5:1 por muy poco tanto con texto blanco como con texto negro. Sea cual sea el fondo, uno de los dos, blanco o negro, alcanza al menos 4,58:1, de modo que cambiar el texto a blanco o a negro permite cumplir AA siempre. En cambio, los colores claros, como los amarillos y los naranjas, son difíciles de usar como texto sobre blanco y requieren un tono mucho más oscuro de la misma familia, como #B45309.
Cómo corregir un color que no llega
La herramienta «Ajustar por luminosidad» convierte el color elegido al espacio de color OKLCH y conserva su matiz. Después mueve la luminosidad en pasos de 0,001 y busca el primer color que cumple el criterio hacia el lado oscuro y hacia el claro. De los dos propone el que menos se aleja de la luminosidad original, y vuelve a comprobar el contraste tras redondear a HEX de 8 bits. Si un paso cae en un color que la pantalla no puede mostrar, reduce solo la saturación, como hace el ajuste de gama de CSS Color 4, de modo que la propuesta se ve de la misma familia que el original.
| Situación | Ahora | Ajuste a AA | Ajuste a AAA |
|---|---|---|---|
| Enlace azul #3B82F6 sobre blanco (cambiar el color del texto) | 3,67:1 | #2B72E5 · 4,52:1 | #0352C2 · 7,02:1 |
| Texto blanco sobre un botón #EF4444 (cambiar el fondo) | 3,76:1 | #DF3337 · 4,50:1 | #B5001A · 7,04:1 |
| Texto blanco sobre un botón #EF4444 (cambiar el color del texto) | 3,76:1 | #1C1C1C · 4,52:1 | Imposible |
| #9CA3AF sobre el modo oscuro #111827 (cambiar el color del texto) | 6,98:1 | Ya cumple | #9DA4B0 · 7,07:1 |
Cuando la luminancia relativa del fondo está entre 0,10 y 0,30, como en el botón #EF4444, el texto blanco se queda por debajo de 7:1 y el negro también, así que ningún color de texto alcanza AAA. Hay que cambiar el fondo, y al elegir «Color de fondo» en el comprobador se ve cuánto más oscuro debe ser el botón. Si el color de marca debe mantenerse, puede reservarlo para texto grande (24 px o más, o 18,67 px o más en negrita) y usar un tono más oscuro para el cuerpo del texto.
El texto semitransparente se calcula con el color mezclado
El texto escrito en CSS con rgba() o con un valor HEX de 8 dígitos se mezcla con el fondo. El color mezclado se obtiene canal por canal como texto × opacidad + fondo × (1 − opacidad), redondeado a valores de 8 bits como hace la pantalla, y el contraste se calcula con ese resultado. Así cambia el contraste del texto negro sobre blanco según la opacidad.
| Color del texto | Opacidad | Color resultante | Contraste sobre blanco |
|---|---|---|---|
| #000000DE | 87 % | #212121 | 16,10:1 |
| #00000099 | 60 % | #666666 | 5,74:1 |
| #0000008A | 54 % | #757575 | 4,60:1 |
| #00000061 | 38 % | #9E9E9E | 2,67:1 |
Si el fondo cambia, el color mezclado también cambia, por lo que conviene comprobar el mismo texto sobre cada fondo en el que aparece. Para texto sobre un degradado o una fotografía, lo más seguro es introducir como fondo el color del punto situado detrás del texto donde el contraste es más bajo.
El contraste con una deficiencia de visión del color
La fórmula del contraste usa pesos basados en una visión del color típica. Con protanopía el rojo se ve más oscuro, así que el texto rojo sobre negro puede parecer menos contrastado de lo que indica el cálculo. La vista previa del comprobador simula el grado más intenso de cada deficiencia con el modelo de Machado, Oliveira y Fernandes (2009), el mismo que usa la emulación de deficiencias visuales de las herramientas para desarrolladores de Chrome, y después recalcula el contraste entre los dos colores modificados.
| Texto / fondo | Original | Protanopía | Deuteranopía | Tritanopía |
|---|---|---|---|---|
| #E53935 / #000000 | 4,96:1 | 3,49:1 | 5,95:1 | 5,20:1 |
| #3B82F6 / #FFFFFF | 3,67:1 | 3,24:1 | 4,00:1 | 3,22:1 |
| #FFFFFF / #EF4444 | 3,76:1 | 5,25:1 | 3,17:1 | 3,93:1 |
| #E53935 / #43A047 | 1,27:1 | 1,92:1 | 1,01:1 | 1,20:1 |
La pareja de rojo y verde de la última fila ya es inutilizable para texto con 1,27:1, y con deuteranopía baja a 1,01:1, casi el mismo color. La información que se transmite solo con el color, como el rojo para un error y el verde para un éxito, es un problema distinto que trata el criterio 1.4.1 de WCAG (Uso del color), así que conviene añadir texto o un patrón. Los valores simulados son aproximaciones para ayudar a entender, y el veredicto de cumplimiento se basa en el contraste de los colores originales. Si quiere comprobar su propia visión del color, puede probar también el test de daltonismo.
De dónde vienen los requisitos de contraste: normativa en España y la Unión Europea
En la Unión Europea, la norma armonizada EN 301 549 V3.2.1 (2021-03) exige en su cláusula 9.1.4.3 que una página web satisfaga el criterio de conformidad 1.4.3 (contraste mínimo) de WCAG 2.1, es decir, la misma relación de 4,5:1 para el texto normal.
En España, el Real Decreto 1112/2018, de 7 de septiembre, regula la accesibilidad de los sitios web y aplicaciones para dispositivos móviles del sector público, que transpone la Directiva (UE) 2016/2102. Su artículo 6 presume que cumple los requisitos el contenido que se ajusta a la norma EN 301 549 V1.1.2 (2015-04), y dispone que las actualizaciones de esa referencia que adopte la Comisión se apliquen directamente. El real decreto cita, por tanto, la versión de 2015, pero prevé que las actualizaciones se apliquen directamente; la norma vigente en cada momento debe consultarse en lo que publique el organismo de seguimiento.
Fuera del sector público, la Directiva (UE) 2019/882, el Acta Europea de Accesibilidad, se aplica a determinados productos y servicios comercializados o prestados a consumidores con posterioridad al 28 de junio de 2025. España la transpuso mediante la Ley 11/2023, de 8 de mayo. Qué productos y servicios están dentro del ámbito de estas normas depende de cada caso, y esta página no sustituye a una valoración jurídica.
Errores frecuentes
- Redondear hasta que cumpla: #777777 sobre blanco da 4,478…:1. Al redondear parece 4,5, pero no cumple.
- Tratar como grande un texto de 18 px en negrita: 14 pt son 18,67 px, así que el texto de 18 px en negrita usa el criterio del texto normal (4,5:1).
- Considerar los textos de ayuda como una excepción: las excepciones de WCAG son los componentes inactivos, la decoración, el texto invisible, el texto en imágenes y los logotipos. El marcador de posición de un campo utilizable y los textos secundarios no figuran en esa lista.
- Olvidar los colores de hover y de foco: calcule también los colores de los estados de paso del cursor, foco y selección, porque cada uno es una combinación que los usuarios ven de verdad.
- Comprobar solo el tema claro: el modo oscuro tiene otros fondos y un contraste totalmente distinto, así que se calcula aparte.
- Pasar por alto los botones con solo un icono: los botones de icono sin texto y los bordes de los campos necesitan 3:1 según el criterio 1.4.11.
Límites
- La fórmula de WCAG 2.2 divide el texto solo en dos clases, normal y grande, y no tiene en cuenta el grosor del trazo. Una tipografía fina resulta más difícil de leer con el mismo 4,5:1.
- WCAG 3.0 sigue siendo un borrador de trabajo y no tiene un método de contraste nuevo definitivo. Este comprobador usa la fórmula de la Recomendación vigente, WCAG 2.2.
- No se modelan el brillo de la pantalla, la luz ambiente ni las diferencias entre monitores. El cálculo se basa en colores sRGB.
- Solo se puede introducir un color de fondo. En degradados o fotografías, compruebe aparte el punto más desfavorable.
- La vista previa de deficiencias de visión del color es una aproximación basada en un modelo, y lo que percibe cada persona varía.
- El contraste es solo un aspecto de la accesibilidad. El uso con teclado, los textos alternativos y el cambio de tamaño del texto deben revisarse por separado.
- Los colores que introduce se calculan en su navegador y no se envían a ningún servidor.
A fecha de 20 de octubre de 2026. Basado en WCAG 2.2 (Recomendación del W3C, versión del 12 de diciembre de 2024), EN 301 549 V3.2.1 (2021-03), el Real Decreto 1112/2018, la Directiva (UE) 2019/882 y la Ley 11/2023.
Fuentes
- 01W3C — Web Content Accessibility Guidelines (WCAG) 2.2Luminancia relativa, relación de contraste, definición de texto grande, criterios 1.4.3, 1.4.6 y 1.4.11 y nota de conformidad (versión del 12 de diciembre de 2024)
- 02W3C — Understanding SC 1.4.3: Contrast (Minimum)Finalidad, justificación de 4,5:1, sin redondeo (4,499:1 no cumple), 14 pt y 18 pt como unos 18,5 px y 24 px
- 03W3C — Understanding SC 1.4.6: Contrast (Enhanced)AAA 7:1 y texto grande 4,5:1
- 04W3C — Understanding SC 1.4.11: Non-text ContrastComponentes de interfaz y gráficos a 3:1
- 05ETSI — EN 301 549 V3.2.1 (2021-03) Accessibility requirements for ICT products and servicesCláusula 9.1.4.3 Contrast (minimum): criterio 1.4.3 de WCAG 2.1
- 06BOE — Real Decreto 1112/2018, de 7 de septiembre, sobre accesibilidad de los sitios web y aplicaciones para dispositivos móviles del sector públicoArtículo 6: presunción de conformidad con EN 301 549 V1.1.2 (2015-04) y aplicación directa de sus actualizaciones
- 07EUR-Lex — Directiva (UE) 2019/882 sobre los requisitos de accesibilidad de los productos y serviciosArtículo 2: ámbito con posterioridad al 28 de junio de 2025; artículo 31: transposición a más tardar el 28 de junio de 2022
- 08BOE — Ley 11/2023, de 8 de mayo, de trasposición de Directivas de la Unión Europea en materia de accesibilidad de determinados productos y serviciosTransposición de la Directiva (UE) 2019/882 y aplicación efectiva desde el 28 de junio de 2025
- 09Machado, Oliveira, Fernandes (2009) — A Physiologically-based Model for Simulation of Color Vision DeficiencyMatrices de simulación de deficiencias de visión del color (severidad 1,0)
- 10Chrome for Developers — Simulating color vision deficiencies in the Blink RendererLa emulación de deficiencias visuales de las herramientas para desarrolladores usa el mismo modelo
- 11Björn Ottosson (2020) — A perceptual color space for image processingConversión OKLab que usa el ajuste por luminosidad
- 12W3C — CSS Color Module Level 4, Gamut MappingLos colores fuera de gama conservan el matiz y pierden saturación
Preguntas frecuentes
¿Qué significa una relación de contraste de 4,5:1?
Es la luminancia relativa del color más claro más 0,05, dividida entre la luminancia relativa del color más oscuro más 0,05. Dos colores iguales dan 1:1 y el negro sobre blanco da 21:1. WCAG 2.2 exige como mínimo 4,5:1 (AA) entre el texto de tamaño normal y su fondo, y el nivel AAA, más estricto, pide 7:1.
¿Puedo redondear 4,48:1 a 4,5:1?
No. El documento Understanding SC 1.4.3 del W3C indica que los valores calculados no deben redondearse y pone el ejemplo de que 4,499:1 no cumple 4,5:1. Este comprobador trunca la relación a dos decimales y decide con ese valor. Sobre blanco, #777777 da 4,47:1 y no cumple, mientras que #767676, algo más oscuro, da 4,54:1 y sí cumple.
¿Desde cuántos píxeles es grande un texto?
En WCAG, el texto grande es el de 18 pt o más, o el de 14 pt o más en negrita. Como en CSS 1 pt equivale a 4/3 px, son 24 px o más con peso normal y unos 18,67 px o más en negrita (la explicación del W3C da aproximadamente 18,5 px). El texto de cuerpo de 16 px y el texto en negrita de 18 px deben cumplir el criterio del texto normal, 4,5:1.
¿Debo cumplir AA o AAA?
Los documentos que se usan como requisitos reales, como la norma europea EN 301 549 o la regla estadounidense ADA Título II (WCAG 2.1 AA), piden el nivel AA. AAA (7:1) es un nivel recomendable para una lectura más cómoda, y el propio WCAG 2.2 no aconseja exigir AAA como política general para sitios enteros porque no todo el contenido puede cumplirlo. Para textos largos, acercarse a AAA sigue siendo útil.
¿Cómo se calcula el texto semitransparente (rgba)?
El texto semitransparente se mezcla con el fondo, así que el contraste se calcula con el color resultante de la mezcla. Un texto negro con una opacidad del 54 % (#0000008A) sobre blanco se ve como #757575 y tiene un contraste de 4,6:1. El color mezclado cambia con el fondo, por lo que hay que comprobar cada fondo por separado. Si el propio fondo es semitransparente, introduzca el color que resulta de mezclarlo con lo que hay debajo.
¿También los iconos y los bordes de los campos necesitan contraste?
Sí. El criterio de conformidad 1.4.11 de WCAG 2.2 (Contraste no textual, AA) exige que la información visual necesaria para identificar los componentes de la interfaz y los gráficos necesarios para entender el contenido tengan al menos 3:1 con los colores adyacentes. Se incluyen los bordes de campos, las casillas y los iconos que transmiten información. Los componentes inactivos y los elementos que conservan el aspecto por defecto del navegador son excepciones.
¿Cómo encuentro un color que cumpla?
En la zona de luminosidad, elija si quiere cambiar el color del texto o el del fondo. El comprobador conserva el matiz y cambia solo la luminosidad para hallar el color más cercano que supera AA y AAA. Con cualquier fondo, el texto blanco o el negro alcanza 4,58:1 o más, así que AA siempre es posible. Pero si la luminancia relativa del fondo está entre 0,10 y 0,30 (por ejemplo #EF4444), ningún color de texto llega a 7:1 y hay que cambiar el fondo.
¿Qué normas europeas y españolas se aplican al contraste?
La norma armonizada EN 301 549 V3.2.1 (2021-03) exige en su cláusula 9.1.4.3 que las páginas web cumplan el criterio 1.4.3 de WCAG 2.1. El Real Decreto 1112/2018 regula la accesibilidad de los sitios web del sector público y en su artículo 6 se remite a EN 301 549, con aplicación directa de sus actualizaciones. La Directiva (UE) 2019/882 se aplica a determinados productos y servicios con posterioridad al 28 de junio de 2025, y España la transpuso con la Ley 11/2023.