Calculadora de contraste
Escribe o elige dos colores. La relación, los cinco veredictos WCAG y una muestra de texto se actualizan sobre la marcha. Si el par no cumple, la calculadora sugiere el tono más cercano del mismo matiz que sí cumple.
Ese no es un color que el navegador entienda
Ese no es un color que el navegador entienda
Sirve cualquier color CSS: hexadecimal como #1d3557, rgb(), hsl() o un color con nombre como teal.
Relación de contraste WCAG
–
Un título con estos colores
Este párrafo está en un tamaño de lectura normal. Léelo unos segundos y fíjate si tus ojos tienen que esforzarse. Un enlace en línea.
Letra más pequeña, como la de los pies de foto, las notas legales y las ayudas de formularios.
Un botónUn número entre 1 y 21
Puedes leer un texto cuando es claramente más claro o más oscuro que lo que tiene detrás. El matiz casi no importa. El rojo puro sobre el verde puro son dos colores muy distintos con casi el mismo brillo, y las letras parecen vibrar. Por eso WCAG mide la diferencia de luminancia relativa, la cantidad de luz que un color envía al ojo en una escala de 0 (negro) a 1 (blanco).
Para calcularla, cada canal de rojo, verde y azul se convierte de su valor almacenado a luz lineal, y luego los tres se ponderan según lo sensible que es el ojo a cada uno:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L lighter + 0.05) ÷ (L darker + 0.05)El verde cuenta más del 70 % del resultado y el azul alrededor del 7 %. Por eso el azul puro #0000ff se comporta como un color oscuro y el amarillo puro como uno claro. Dos colores idénticos dan 1:1. Negro sobre blanco da 21:1. Intercambiar texto y fondo no cambia la relación.
Los umbrales y dónde se aplican
| Contenido | AA | AAA |
|---|---|---|
| Texto de tamaño normal | 4.5:1 | 7:1 |
| Texto grande: 24 px o más, o 18.66 px o más en negrita | 3:1 | 4.5:1 |
| Partes de la interfaz e iconos: bordes de campos, bordes de botones, anillos de foco, líneas de gráficos | 3:1 | no definido |
AA es el nivel al que suelen remitir las leyes y las normas de contratación, incluidas la norma europea EN 301 549 y la Section 508 de Estados Unidos. AAA es un objetivo para los lugares donde la gente lee mucho. Los logotipos, los controles desactivados y el texto puramente decorativo están exentos.
Una referencia útil es el gris #767676, que alcanza 4.54:1 sobre blanco y cumple AA. Un paso más claro, #777777 da 4.47:1 y no cumple.
La calculadora corta la relación a dos decimales sin redondear hacia arriba, como pretende WCAG. Un par de 4.499 se muestra como 4.49 y no cumple. No se asciende a 4.5.
Cómo se elige el tono sugerido
Cuando un texto de tamaño normal queda por debajo de 4.5:1, la calculadora convierte el color del texto a matiz, saturación y luminosidad. Conserva los dos primeros y mueve la luminosidad en pasos de medio por ciento, alternando más oscuro y más claro, hasta que la relación con tu fondo llega a 4.5. El primer acierto es el tono más cercano que cumple, así que tu azul sigue siendo tu azul. A veces ninguna luminosidad del color del texto puede cumplir, normalmente con un fondo de tono medio. En ese caso intenta ajustar el fondo del mismo modo. Selecciona Use para aplicar la sugerencia.
Los fondos de tono medio son el caso difícil. Un gris medio como #808080 da unos 3.9:1 contra blanco y 5.3:1 contra negro, así que solo funciona un texto muy oscuro. Los naranjas de marca y los verdes vivos tienen el mismo problema con el texto blanco. Tendrás que oscurecer el fondo o pasar a texto oscuro.
Cómo meter y sacar colores
Los dos campos aceptan cualquier cosa que un navegador entienda como color CSS: #1d3557, 1d3557, rgb(29 53 87), hsl(215 50% 23%) o un nombre como teal. Para leer un color de una página en vivo, abre las herramientas de desarrollo, selecciona el texto y copia los valores calculados de color y background-color.
La dirección de la página se actualiza con cada cambio, con la forma ?fg=1d3557&bg=ffffff. Cópiala para enviar a un colega el par exacto sobre el que discutís. Para probar toda una paleta de marca de una sola vez, usa la cuadrícula de contraste de paleta.
Lo que una relación no te dice
- Transparencia. Cualquier valor alfa se ignora. Para texto semitransparente, mide el color mezclado que la pantalla acaba mostrando.
- Imágenes y degradados. Una foto de fondo tiene muchos colores. Prueba la zona más clara y la más oscura detrás del texto, o pon un panel sólido debajo.
- Grosor y tamaño de la fuente por debajo de los umbrales. Una fuente fina de 12 px con 4.6:1 cumple sobre el papel y aun así cuesta leerla.
- Temas oscuros. Se sabe que la fórmula de WCAG 2 sobrevalora algunos pares oscuros. Si el texto claro sobre fondo oscuro apenas cumple, míralo también con tus propios ojos, por ejemplo en el simulador de visión.
Preguntas frecuentes
¿Qué relación de contraste exige WCAG AA?
4.5:1 para texto de tamaño normal, 3:1 para texto grande (24 px o más, o 18.66 px o más en negrita), y 3:1 para componentes de interfaz y gráficos con significado. Son los criterios de éxito 1.4.3 y 1.4.11.
¿Es accesible el texto blanco sobre un botón de color?
Depende de lo oscuro que sea el botón. El blanco necesita un fondo tan oscuro como #767676, o más, para llegar a 4.5:1. Los típicos botones naranja vivo, amarillo, lima y azul cielo no cumplen con texto blanco y sí con texto casi negro.
¿Cuenta 18 px como texto grande?
No. WCAG define el texto grande en puntos, como 18 pt normal o 14 pt en negrita. En la web eso son 24 px normal o unos 18.66 px en negrita. El texto de 18 px normal tiene que cumplir el umbral de 4.5:1.
¿El texto de marcador de posición y los botones desactivados tienen que cumplir?
El texto de marcador de posición sí. Se espera que el visitante lo lea, así que se aplica 4.5:1. Los controles desactivados están exentos de los criterios de contraste, aunque los muy tenues dejan a la gente preguntándose qué es el control.
¿Por qué dos herramientas dan relaciones ligeramente distintas para los mismos colores?
Sobre todo por el redondeo. Algunas herramientas redondean a uno o dos decimales, y algunas redondean hacia arriba donde esta corta. Una diferencia en el segundo decimal solo importa para los pares que están justo en un umbral, y a esos conviene oscurecerlos un poco de todos modos.