Comprobador de contraste de color
Introduce un color de texto y un color de fondo para obtener la relación de contraste WCAG y si cumple o no AA y AAA, para texto normal y grande, con una vista previa en vivo.
Funciona en tu navegador; nada de lo que escribes sale de tu dispositivo
Relación de contraste –
| Uso | Requiere | Resultado |
|---|---|---|
| Texto normal, AA | 4.5:1 | |
| Texto normal, AAA | 7:1 | |
| Texto grande, AA | 3:1 | |
| Texto grande, AAA | 4.5:1 |
Usa la relación de contraste de WCAG 2.x, que mide solo el contraste de luminancia. No puede evaluar combinaciones problemáticas para el daltonismo, como rojo sobre verde, fuentes finas o pequeñas, ni texto sobre imágenes y degradados. Lee HEX (3, 4, 6 u 8 dígitos), rgb(), hsl() y nombres de color CSS; otra sintaxis de color CSS la lee tu navegador cuando puede.
Cómo comprobar el contraste de color
- Escribe o pega el color del texto y el color del fondo como HEX,
rgb(),hsl()o un nombre de color CSS comonavy, o elige cada uno con el selector de color. - Lee la relación de contraste, desde 1:1 si no hay contraste hasta 21:1 para negro sobre blanco.
- Revisa la tabla: el texto normal necesita 4,5:1 para AA y 7:1 para AAA, y el texto grande necesita 3:1 para AA y 4,5:1 para AAA. La vista previa muestra cómo se ve el texto.
Qué significa la relación de contraste
La relación de contraste de WCAG compara el brillo de dos colores. Cada color se convierte en una luminancia relativa entre 0 (negro) y 1 (blanco), usando los valores sRGB sin la curva gamma y ponderando los tres canales según lo brillantes que los percibe el ojo: el verde más, luego el rojo y después el azul. La relación es la luminancia más clara más 0,05 dividida entre la luminancia más oscura más 0,05, así que va de 1:1 para colores idénticos a 21:1 para negro sobre blanco.
WCAG 2 fija mínimos según el tamaño del texto. El texto normal necesita 4,5:1 para el nivel AA y 7:1 para el nivel AAA, más estricto. El texto grande, que se lee con más facilidad, necesita 3:1 para AA y 4,5:1 para AAA. Grande significa al menos 24 px, o unos 18,7 px en negrita.
La relación mira solo la luminosidad. Dos colores pueden cumplir y aun así ser difíciles de distinguir para personas con daltonismo, y las fuentes finas o el texto sobre una foto pueden necesitar más contraste que el mínimo. Usa la cifra como un piso y mira la vista previa.
Para desarrolladores y agentes de IA
¿Necesitas comprobar el contraste en código, en un paso de compilación o desde un agente de IA? Hay una API para ello: consulta la guía de la API del comprobador de contraste de color.
Consejos
- ¿Necesitas convertir antes un color entre HEX, RGB, HSL y CMYK? Usa el Conversor de colores.
- ¿Creas un conjunto de colores que combinen? El Generador de paletas de colores muestra el contraste con blanco y negro de cada muestra.
- ¿Necesitas el color de un píxel de una captura de pantalla? Usa el Selector de color de imagen.
Preguntas frecuentes
¿Cómo se calcula la relación de contraste?
Con la fórmula de WCAG 2.x: se obtiene la luminancia relativa de cada color a partir de sus valores sRGB, y la relación es (más claro + 0,05) dividido entre (más oscuro + 0,05). Va de 1:1 (sin contraste) a 21:1 (negro sobre blanco). La relación se muestra con dos decimales y el valor sin redondear aparece a su lado.
¿Qué relaciones exigen AA y AAA?
El texto normal necesita 4,5:1 para AA y 7:1 para AAA. El texto grande, es decir, de al menos 24 px en redonda o unos 18,7 px en negrita, necesita 3:1 para AA y 4,5:1 para AAA. Una relación no se redondea hacia arriba para alcanzar un límite: 4,499:1 se muestra como 4,49 y no cumple AA para texto normal.
¿Por qué #777777 sobre blanco no cumple AA?
Su contraste es 4,48:1, justo por debajo del 4,5:1 que AA pide para texto normal, así que no cumple para texto de cuerpo pero sí para texto grande, que solo necesita 3:1. Un gris un poco más oscuro como #767676 llega a 4,54:1 y cumple.
¿Qué pasa con los colores transparentes?
Un color de texto parcialmente transparente se mezcla primero con el fondo, como lo muestra una pantalla, y se mide el color resultante. Un fondo parcialmente transparente se supone sobre blanco. Los canales se redondean a números enteros después de la mezcla.
¿Una relación que cumple significa que el texto es accesible?
No por sí sola. La relación mide solo el contraste de luminosidad. No dice nada sobre combinaciones problemáticas para el daltonismo, fuentes muy finas, texto sobre fotos o degradados, ni si el color es la única forma de transmitir un significado. Tómala como un mínimo, no como una garantía.
¿Se envía algo a un servidor?
No. Los colores se leen y se miden en tu navegador, y nada de lo que escribes sale de tu dispositivo.