Luego comprueba dos colores frente a WCAG AA y AAA y mira el texto en pantalla. Convierte un color entre HEX, RGB, HSL, HSV y OKLCH y prueba si el texto se lee con facilidad sobre su fondo. Es gratis y se ejecuta en tu navegador.
Cómo convertir un color
- Usa Elegir para escoger un color, o escribe o pega un valor en Cualquier color.
- Lee el mismo color como HEX, RGB, HSL, HSV, OKLCH y su nombre CSS cuando lo hay.
- Pulsa Copiar junto al formato que quieras, o Copiar HEX.
Cómo comprobar el contraste
- Elige un Color de texto y un Color de fondo, o usa Usar el color principal como texto o Usar como fondo.
- Lee la relación de contraste y si pasa AA y AAA para texto normal, Texto grande a 24 px, Texto en negrita a 19 px y un Contorno de botón.
- Si la pareja no pasa, usa el color cercano sugerido que sí pasa.
Qué formato usar
HEX y RGB describen la luz roja, verde y azul de un color y funcionan en todas partes. HSL y HSV describen el tono, la saturación y la luminosidad o el brillo, lo que facilita retocar un color a mano. OKLCH es el formato CSS más nuevo: su luminosidad coincide con lo brillantes que les parecen los colores a las personas, así que dos colores con la misma L realmente se ven igual de claros, lo que lo hace estupendo para paletas y temas. Todos los navegadores modernos admiten oklch() en CSS.
Cómo funciona la relación de contraste
La relación compara la luminancia relativa de los dos colores, desde 1:1 para colores idénticos hasta 21:1 para negro sobre blanco. Los resultados nunca se redondean hacia arriba, así que 4,49:1 no pasa AA. Si el color del texto es translúcido, se mezcla antes con el fondo. Cuando una pareja no pasa, se sugiere un color cercano que sí pase para cualquiera de los dos lados.
WCAG AA pide 4,5:1 para texto normal y 3:1 para texto grande. AAA pide 7:1 para texto normal y 4,5:1 para texto grande. Cumplirlos ayuda a las personas con baja visión y a cualquiera que lea en una pantalla muy luminosa.
Entrada que entiende esta herramienta
HEX de tres, cuatro, seis y ocho dígitos con o sin #, rgb() y rgba() con comas o espacios, hsl() con deg, turn o rad, hsv(), oklch() y oklab(), los 148 nombres de color CSS y números sencillos como 59, 130, 246. Se conserva el alfa después de una barra o como cuarto valor.
Quién lo usa
Diseñadores y desarrolladores web que crean un tema, dueños de pequeños negocios que comprueban que los colores de su marca son legibles, estudiantes que hacen presentaciones y cualquiera que tenga un color en un formato y necesite otro. Para hallar un color de una foto, usa el selector de color de imagen.
Preguntas
¿Qué es una buena relación de contraste?
Apunta al menos a 4,5:1 para texto normal. Cuanto más alto, mejor, y 7:1 cumple AAA.
¿Por qué los mismos valores de color se ven ligeramente distintos en distintas pantallas?
Las pantallas varían en brillo y color. Los números son los mismos, pero la pantalla cambia cómo se ven.
¿Se sube algo?
No. La conversión ocurre en tu navegador.