nTools

El contraste de color explicado: ratios WCAG, texto legible y formatos de color

Actualizado:

Un texto se lee bien cuando destaca sobre su fondo, y las Pautas de Accesibilidad para el Contenido Web (WCAG) lo convierten en un número: el contraste. WCAG 2.2, la versión vigente, es Recomendación del W3C desde el 12 de diciembre de 2024. Esta guía explica cómo se calcula el contraste, los mínimos para el texto y los controles, y qué relación tienen con él las formas habituales de escribir un color.

Cómo se calcula el contraste

Cada color se convierte en una luminancia relativa, de 0 para el negro a 1 para el blanco. Primero, los valores de rojo, verde y azul se pasan de nuevo a intensidad de luz, porque los valores sRGB no son proporcionales a la luz: un valor igual o inferior a 0,04045 (en una escala de 0 a 1) se divide entre 12,92, y los mayores siguen una curva de potencia 2,4. Después se ponderan según lo brillantes que los percibe el ojo: 0,2126 el rojo, 0,7152 el verde y 0,0722 el azul. Antes de mayo de 2021 el umbral se escribía 0,03928; el W3C aclara que el cambio no tiene efecto práctico.

El contraste es (L1 + 0,05) ÷ (L2 + 0,05), donde L1 es el color más claro. Va de 1:1 para dos colores iguales a 21:1 para negro sobre blanco. Nunca se redondea: la propia explicación de WCAG dice que 4,499:1 no alcanza 4,5:1, y por eso los verificadores que redondean a un decimal pueden dar por bueno lo que no lo es.

Verificador de contraste de color

Los mínimos

WCAG tiene tres niveles, A, AA y AAA; AA es el que buscan la mayoría de las políticas y auditorías de accesibilidad. Tres criterios de conformidad fijan mínimos de contraste:

CriterioSe aplica aMínimoNivel
1.4.3 Contraste (mínimo)Texto normal4,5:1AA
1.4.3 Contraste (mínimo)Texto grande3:1AA
1.4.6 Contraste (mejorado)Texto normal7:1AAA
1.4.6 Contraste (mejorado)Texto grande4,5:1AAA
1.4.11 Contraste no textualControles, indicadores de foco, iconos y partes de gráficos3:1AA

Texto grande significa al menos 18 puntos, o 14 puntos en negrita, que el W3C sitúa en unos 24 y 18,5 píxeles CSS. El texto de un logotipo, el puramente decorativo y el de los controles desactivados no tienen requisito de contraste. El contraste no textual abarca lo que hace falta ver para usar una página: el borde de un campo de texto, una casilla, el indicador de foco, un icono sin texto, las líneas de un gráfico.

Qué colores cumplen sobre blanco

Contrastes sobre blanco, cortados a dos decimales como los muestra el verificador:

Texto / fondoContrasteQué cumple
#000000 / #ffffff21:1El máximo: lo cumple todo
#0000ff / #ffffff8,59:1Cumple AAA para todo el texto
#595959 / #ffffff7:1AAA justo para texto normal
#767676 / #ffffff4,54:1Cumple AA para texto normal
#777777 / #ffffff4,47:1No cumple AA para texto normal; solo texto grande y gráficos
#ff0000 / #ffffff3,99:1Solo texto grande y gráficos
#949494 / #ffffff3,03:1Solo texto grande y gráficos
#959595 / #ffffff2,99:1No cumple nada, ni bordes ni iconos
#ffff00 / #ffffff1,07:1Casi invisible

#777777 y #767676 parecen iguales, pero uno no cumple y el otro sí: la frontera es así de fina. El rojo puro, habitual en los errores, solo llega a 3,99:1 sobre blanco, suficiente para un icono o un texto grande pero no para un mensaje de error en texto normal; un rojo algo más oscuro, como #ee0000, alcanza 4,53:1.

Por qué 4,5:1

El W3C explica que 4,5:1 compensa la pérdida de sensibilidad al contraste que suele acompañar a una visión de en torno a 20/40, frecuente con la edad, y 7:1, la de una visión de en torno a 20/80. Un buen contraste ayuda también a todos los demás: un móvil al sol, una pantalla barata, un proyector en una sala iluminada.

Los formatos de color y lo que dicen del contraste

#1a73e8, rgb(26 115 232), hsl(214 82% 51%) y oklch(57.4% 0.195 257.9) son el mismo azul escrito de cuatro maneras. HEX y RGB dan directamente las cantidades de rojo, verde y azul; HEX admite un cuarto par para la transparencia, como #1a73e880 para el 50 %. HSL describe tono, saturación y luminosidad, pero su luminosidad no es la que ve el ojo: el amarillo y el azul con un 50 % de luminosidad HSL tienen un 96,8 % y un 45,2 % de luminosidad OKLCH, y por eso el texto azul cumple sobre blanco y el amarillo no.

OKLCH, de CSS Color nivel 4, está hecho para que pasos iguales de luminosidad se vean iguales, lo que lo convierte en el formato más útil para diseñar una paleta con un contraste previsible. Los navegadores lo admiten desde Chrome y Edge 111, Firefox 113 y Safari 15.4, y es Baseline de disponibilidad amplia desde noviembre de 2025. El contraste se sigue calculando con el color sRGB que realmente se muestra, así que comprueba la pareja final con un verificador.

Conversor de colores

Cómo arreglar un color que no cumple

Más allá de WCAG 2

Los borradores de WCAG 3 han probado otro método de contraste, conocido como APCA, que tiene en cuenta el tamaño y el grosor de la letra y trata distinto el texto claro sobre fondo oscuro. Es un borrador, no una norma, así que las auditorías y las leyes siguen usando el contraste de WCAG 2. En la Unión Europea, la Ley Europea de Accesibilidad (Directiva 2019/882) se aplica desde el 28 de junio de 2025 a muchos productos y servicios, entre ellos el comercio electrónico.

Preguntas frecuentes

¿4,47:1 es casi 4,5:1?

No. El contraste no se redondea, así que 4,47:1 no alcanza el mínimo de 4,5:1 para texto normal. Sí cumple 3:1 para texto grande y gráficos.

¿Qué cuenta como texto grande?

Al menos 18 puntos, unos 24 píxeles CSS, o 14 puntos en negrita, unos 18,5 píxeles CSS.

¿Los bordes y los iconos necesitan contraste?

Sí, cuando hacen falta para entender o usar la página: 3:1 frente a los colores que tienen al lado. El borde de un campo de texto, una casilla y el indicador de foco son ejemplos.

¿El modo oscuro cambia las reglas?

No. Los mismos mínimos valen para todos los esquemas de color, así que revisa también la paleta oscura.

¿Más contraste siempre se lee mejor?

Hasta cierto punto. Un contraste muy alto, como blanco puro sobre negro puro, puede resultar duro para algunos lectores; a partir de 7:1 es cómodo para la mayoría del texto.

Referencias

  1. W3C — Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation, 12 December 2024
  2. W3C WAI — Understanding Success Criterion 1.4.3: Contrast (Minimum)
  3. W3C WAI — Understanding Success Criterion 1.4.11: Non-text Contrast
  4. W3C — CSS Color Module Level 4
  5. Web platform features explorer — oklab() and oklch()
  6. Directive (EU) 2019/882 on the accessibility requirements for products and services (European Accessibility Act)

Guías relacionadas