Supuestos
- El contraste se calcula para el espacio de color sRGB. Los colores definidos en una gama más amplia como Display P3 pueden dar otro resultado.
- El color se compone sobre el fondo opaco seleccionado antes de calcular el contraste.
- Las WCAG excluyen logotipos, texto decorativo y componentes deshabilitados. Esta herramienta no juzga esas excepciones.
- El nombre más cercano se elige por distancia aritmética en RGB, que no coincide con la diferencia de color percibida.
- Todo se calcula en tu navegador y no se transmite nada.
Cómo se calcula
- La luminancia relativa normaliza cada canal a 0–1, deshace la gamma y los pondera con 0,2126 / 0,7152 / 0,0722.
- La relación de contraste = (luminancia más clara + 0,05) ÷ (más oscura + 0,05), de 1:1 hasta 21:1.
- Los umbrales son 4,5:1 y 7:1 para texto normal (AA y AAA), 3:1 y 4,5:1 para texto grande, y 3:1 para bordes e iconos.
- La escala de luminosidad pasa a HSL y mueve sólo la L, dejando fijos el tono y la saturación.
Ejemplos
| Texto | Fondo | Relación | Veredicto |
|---|---|---|---|
| #000000 | #ffffff | 21,00 : 1 | Cumple todo — es el máximo |
| #767676 | #ffffff | 4,54 : 1 | Texto normal AA sí, AAA no |
| #777777 | #ffffff | 4,48 : 1 | Texto normal AA no cumple — lo decide un paso de gris |
| #1e90ff | #ffffff | 3,24 : 1 | Sólo cumplen texto grande y elementos no textuales |
Errores frecuentes
- Cumplir no es lo mismo que leerse bien. 4,5:1 es un mínimo; con tipografías finas o pantallas pequeñas hace falta más.
- No te fíes sólo del color. Aunque el contraste cumpla, una información que sólo se distingue por el tono se pierde para quien tiene daltonismo. Añade una forma o una etiqueta.
- Comprueba aparte el modo oscuro. Una combinación que cumple sobre fondo claro puede no cumplir sobre fondo oscuro.
- El color se compone sobre el fondo opaco seleccionado antes de calcular el contraste.
Preguntas frecuentes
¿Por qué hay que medir el contraste?
Un texto con poca diferencia de luminosidad respecto a su fondo cuesta de leer, sobre todo a personas con baja visión o daltonismo, y a cualquiera que mire la pantalla a pleno sol. Las WCAG 2.2 piden al menos 4,5:1 para el texto normal y 3:1 para el texto grande; el nivel AAA, más exigente, pide 7:1 y 4,5:1. En España los sitios del sector público están obligados por el Real Decreto 1112/2018 a cumplir el nivel AA.
¿Cómo se calcula la relación?
Se obtiene la luminancia relativa de cada color y se dividen como (la más clara + 0,05) ÷ (la más oscura + 0,05). La luminancia relativa normaliza cada canal a 0–1, deshace la corrección gamma y los suma con pesos de 0,2126, 0,7152 y 0,0722. El verde pesa más porque el ojo lo percibe como el más luminoso. Negro sobre blanco da el máximo de 21:1; un color contra sí mismo da el mínimo de 1:1.
¿Qué se considera texto grande?
Las WCAG lo definen como 18pt o más, o 14pt o más si va en negrita. En píxeles CSS son unos 24px, o 18,66px en negrita. Los caracteres grandes tienen trazos más gruesos y siguen leyéndose con menos contraste, por eso el umbral baja de 4,5:1 a 3:1.
¿En qué se diferencian HEX, RGB y HSL?
Son tres maneras de escribir el mismo color, así que la conversión entre ellas es exacta. HEX es corto y cómodo en el código. RGB muestra directamente los valores de los primarios de luz. HSL separa tono, saturación y luminosidad, lo que hace intuitivo un ajuste del tipo "el mismo color pero más oscuro". La escala de luminosidad de esta página sale de cambiar sólo la L del HSL.
¿Tiene en cuenta la transparencia?
El color se compone sobre el fondo opaco seleccionado antes de calcular el contraste.
¿Cómo se elige el nombre más cercano?
Midiendo la distancia entre los valores RGB y los de los 148 colores con nombre de CSS, y quedándose con el más próximo; si coincide exactamente se indica. Esa distancia es aritmética, no perceptual, así que tómate el nombre como una etiqueta aproximada de familia y no como una identificación.