Comprobador de contraste
Si alguien puede leerlo de verdad.
Los ejemplos sustituyen temporalmente la entrada y los ajustes. Puedes recuperar tu trabajo anterior.
0 caracteres
Resultado
Pega o escribe arriba para ver el resultado aquí.
Tus archivos se quedan en tu dispositivo
Esta herramienta se ejecuta por completo en tu navegador. Lo que pegas se procesa en tu dispositivo y nunca se envía a un servidor, así que puedes usarla con tokens, claves y textos sin publicar.
Ejemplo
Ejemplo práctico — Comprobador de contraste
Introduce las líneas en orden y usa los ajustes indicados. Compara el resultado con las líneas de salida.
| Elemento | Valor |
|---|---|
| Entrada 1 | #000000 |
| Fondo, cuando solo se da un color | #ffffff |
| Salida 1 | #000000 sobre #ffffff |
| Salida 2 | Relación 21,00 : 1 |
| Salida 3 | Texto normal AA cumple (mínimo 4,5) |
| Salida 4 | Texto normal AAA cumple (mínimo 7) |
| Salida 5 | Texto grande AA cumple (18,66 px en negrita o 24 px, mínimo 3) |
| Salida 6 | Texto grande AAA cumple (mínimo 4,5) |
| Salida 7 | Bordes, iconos cumple (mínimo 3) |
Negro sobre blanco tiene una relación de contraste de 21:1 y supera las comprobaciones AA y AAA de texto.
Cómo funciona
- Escribe un par por línea: #333 sobre #fff. También valen una coma, una barra o un simple espacio.
- Da un color solo y se compara con el fondo indicado arriba.
- Lee primero la relación; todo lo demás sale de ahí.
- 4,5 es la cifra que hay que superar para texto normal.
Preguntas frecuentes
- ¿Qué exigen exactamente AA y AAA?
- AA pide 4,5 : 1 para texto normal y 3 : 1 para texto grande —24 px, o 18,66 px en negrita—. AAA pide 7 : 1 y 4,5 : 1. Los bordes, los iconos y los contornos de los campos de formulario necesitan 3 : 1.
- ¿Por qué suspende mi gris?
- #777 sobre blanco da 4,48 : 1 y se queda a dos centésimas de AA. Es el fallo por poco de siempre, y justamente la razón por la que se comprueba: a quien eligió el color le parece bien, y para bastante gente es genuinamente difícil de leer. #757575 aprueba.
- ¿Importa qué color pongo primero?
- Con colores opacos, no: la relación es simétrica, y texto sobre fondo y fondo sobre texto dan el mismo número. Con un color transparente (#33333380, rgba(…)), sí: el primero se pone encima del segundo, y un fondo transparente, sobre una página blanca, así que escribe primero el color del texto.
- ¿Basta con aprobar la relación para llamarlo accesible?
- No. El contraste es un requisito entre muchos y no dice nada sobre los estados de foco, las áreas de pulsación, el movimiento ni sobre si el color carga solo con el significado. Es un suelo, no un veredicto.
Herramientas relacionadas
◒ Conversor de color HEX, RGB, HSL y CMYK, más la relación de contraste que decide la legibilidad. ◒ Formateador CSS Una declaración por línea, o todo el archivo en una. ◉ Herramientas de imagen Selector de color de imagen Un clic para un código de color, un botón para la paleta de la imagen. ‹› Formateador HTML Sangrado para leerlo, o comprimido para publicarlo.