Comprobador de contraste de color y exportación de paleta de marca

Cómo revisar el contraste de dos colores en cuatro pasos

1. Escribe tus dos colores. Escribe un color de texto y un color de fondo como códigos hex, por ejemplo #1A1A1A, como valores rgb() o hsl(), o con un nombre de color como navy. También funciona la transparencia. Puedes usar los selectores de color, tomar un color de un logo o una foto, o, en Chrome o Edge en una computadora, presionar el botón del gotero y hacer clic en cualquier color de tu pantalla.
2. Lee la proporción y las cuatro revisiones. La proporción aparece con dos decimales, de 1 a 21. Debajo hay cuatro revisiones: 4.5:1 para texto normal, 3:1 para texto grande y partes de la interfaz, 7:1 para texto normal en nivel mejorado y 4.5:1 para texto grande en nivel mejorado. La vista previa muestra tu par en tamaño normal y grande.
3. Arregla un par que no llega. Cuando no se alcanza una meta, la herramienta sugiere el color más cercano, con el mismo tono pero más claro o más oscuro, que sí la alcanza. Puedes cambiar el texto o el fondo. Presiona Usar este color para probarlo, o Intercambiar para voltear el par.
4. Revisa una paleta completa. ¿Estás armando una marca? Cambia al modo Paleta, agrega de 3 a 12 colores y lee la matriz con todos los pares. Después exporta los colores como variables CSS, un bloque de Tailwind o JSON, o descarga una tarjeta de muestras en PNG.

Qué es una proporción de contraste

Una proporción de contraste es un número que indica cuánto se diferencian dos colores en brillo. Va de 1:1, dos colores idénticos, hasta 21:1, negro puro sobre blanco puro. Mientras más alto el número, más fácil es leer texto de un color sobre el otro.

La herramienta usa la fórmula de las Pautas de Accesibilidad para el Contenido Web (WCAG) 2 del W3C. Primero cada canal de rojo, verde y azul se convierte de su valor de pantalla a un valor lineal. La luminancia relativa es 0.2126 por el rojo, más 0.7152 por el verde, más 0.0722 por el azul. La proporción es la luminancia más clara sumada a 0.05, dividida entre la más oscura sumada a 0.05. El verde pesa más porque nuestros ojos son más sensibles a él.

Solo se admiten colores sólidos. La transparencia cambia el color final según lo que haya detrás, así que primero conviértela en un color sólido.

Los números que importan: 4.5, 3 y 7

WCAG 2 usa unas pocas metas fijas. La herramienta muestra las cuatro para que veas dónde queda tu par.

• 4.5:1 para texto normal (criterio de éxito 1.4.3, Contraste mínimo). Es la meta habitual para párrafos, etiquetas y enlaces.
• 3:1 para texto grande y para partes de la interfaz, como bordes de botones, contornos de campos de formulario e íconos (1.4.3 y 1.4.11, Contraste de elementos no textuales).
• 7:1 para texto normal en el nivel mejorado (1.4.6, Contraste mejorado).
• 4.5:1 para texto grande en el nivel mejorado (también 1.4.6).

Texto grande es el de al menos 24 píxeles CSS, o de al menos 18.66 píxeles (14 puntos) y en negritas. Lo más pequeño cuenta como texto normal. Los logos, el texto puramente decorativo y los controles desactivados no entran en esta regla.

La proporción se corta, nunca se redondea hacia arriba. Un par de 4.497 se muestra como 4.49 y no llega, así que un 4.50 en pantalla siempre significa al menos 4.5.

Cómo arreglar un par que no llega

Casi todos los pares que fallan están a un paso pequeño de la meta. Cuando una revisión no se alcanza, la herramienta busca el color más cercano que sí la alcanza, conserva el tono y cambia solo la claridad. Puede ajustar el texto o el fondo, y tú decides cuál.

Hay situaciones que se repiten una y otra vez.

Cómo elegir una paleta de marca que funcione

El modo Paleta acepta de 3 a 12 colores, con nombres opcionales, y muestra la proporción de cada par en una matriz. Así una impresión vaga sobre los colores de tu marca se vuelve una lista clara.

Lee la matriz en tres grupos. Los pares de 4.5:1 o más sirven para texto de párrafo. Los pares entre 3:1 y 4.5:1 van bien en títulos grandes, botones, bordes e íconos. Los pares por debajo de 3:1 son solo para decoración, como fondos, divisores y formas.

Un resultado típico: un azul marino profundo y un blanco hueso superan por mucho los 7:1, así que llevan el texto. Un naranja de tono medio puede llegar a 3:1 sobre el azul marino, por lo que sirve para el borde de un botón pero no para texto pequeño. Un amarillo pálido sobre blanco, con cerca de 1.1:1, es solo un fondo suave. Define estos papeles antes de diseñar y no tendrás que remendar colores después.

Lo que una proporción no te dice

Una proporción es una revisión entre muchas. Un sitio puede alcanzar todos los números de aquí y aun así ser difícil de usar, y una buena proporción no vuelve a un sitio legalmente seguro. Esto no es asesoría legal. Si una ley o un contrato aplica a tu sitio, consulta a un profesional calificado.

• Ignora el grosor de la letra. Una tipografía muy delgada puede costar trabajo leerla incluso con 4.5:1.
• No puede juzgar texto sobre fotos, degradados o patrones.
• No cubre el significado que depende solo del color, como el rojo para errores sin ícono ni palabras.
• No dice nada de los contornos de foco, el uso con teclado, los lectores de pantalla, los subtítulos ni la claridad de la redacción.
• El contraste ayuda a quien tiene daltonismo, pero no sustituye tener una segunda señal además del color.

Algunas personas prefieren un método perceptual más nuevo llamado APCA, propuesto para WCAG 3. Todavía no es definitivo. Esta herramienta usa la fórmula actual de WCAG 2, la que usan hoy casi todas las pruebas y auditorías.

Cómo usar las exportaciones

Cuando la paleta te convence, el modo Paleta la exporta en el formato que necesite tu proyecto. Cada una aparece como texto para copiar, y no se guarda nada.

Tus colores se quedan en tu navegador

Los cálculos, la vista previa y las exportaciones se hacen en tu navegador. Tus colores no se suben, no se guardan y no se registran, y no necesitas cuenta. Cierra la pestaña y desaparecen, así que copia las exportaciones que quieras conservar.

Preguntas frecuentes