Comprobador de contraste
Si alguien puede leerlo de verdad.
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.
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?
- No. La relación es simétrica: texto sobre fondo y fondo sobre texto dan el mismo número.
- ¿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.