Conversor de Colores - HEX, RGB, HSL y Contraste WCAG
Conversor de colores y comprobador de contraste
HEX, rgb(), hsl() o un nombre de color CSS: se leen los cuatro.
Tonos
El mismo tono en once niveles de luminosidad. Haz clic para convertirlo en el color actual.
Contraste
La relación entre dos colores, medida tal como la define WCAG.
| Par | Relación | AA (4,5:1) | AAA (7:1) |
|---|
Qué hace esta herramienta
Convertir un color entre notaciones son cinco líneas de aritmética. La pregunta difícil es si un texto de ese color se puede leer de verdad, y esa respuesta necesita un paso que la mayoría de herramientas se salta. Aquí están las dos cosas, con el mismo color que escribiste.
Cómo se usa
- 1 Escribe un color en cualquier notación, o usa el selector.
- 2 Copia la notación que necesites, o haz clic en un tono para pasar a él.
- 3 Lee la tabla de contraste. Todo lo marcado como No cumple le costará leerlo a alguien.
Por qué el mismo tono se ve distinto en HSL
HSL redondea a grados y porcentajes enteros, así que convertir a HSL y volver no siempre devuelve los bytes originales. Por eso el HEX que se muestra aquí siempre sale de lo que escribiste, nunca de una ida y vuelta por HSL: si no, el campo se desviaría un paso en cada clic.
Qué significan los números de contraste
La relación va de 1:1 para dos colores idénticos a 21:1 para negro puro sobre blanco puro. Los umbrales de abajo son los que comprueba la herramienta.
| 4.5:1 | Texto normal, WCAG AA |
| 3:1 | Texto grande o en negrita, WCAG AA |
| 7:1 | Texto normal, WCAG AAA |
| 21:1 | La relación máxima posible: negro sobre blanco |
El paso que la mayoría de herramientas se salta
La luminancia relativa no es el promedio de los valores de canal. Cada canal debe linealizarse primero, porque los números de un código HEX están codificados en gamma y no son proporcionales a la luz. Si se salta ese paso, la relación sigue saliendo como un número creíble, solo que equivocado, y el error es mayor en los tonos medios, donde vive la mayoría de los colores de interfaz.
El contraste es necesario, no suficiente
Un par puede superar 4,5:1 y aun así ser una mala elección: el daltonismo hace indistinguibles algunas parejas incluso con relaciones altas, y el color nunca debería ser lo único que transmite significado. Toma un «cumple» aquí como haber superado el mínimo, no como un veredicto sobre el diseño.