Guide
El Curso de color y contraste es un tutorial interactivo de 17 niveles que enseña a leer cualquier forma de escribir un color en un diseño o en CSS y a decidir con un criterio medible si «estos dos colores juntos se pueden leer». Cada nivel te da de uno a tres selectores de color y un objetivo concreto —subir la luminosidad a cierto valor, superar un contraste de 4,5:1, encontrar tres colores con tonos separados 120°, convertir un par indistinguible para alguien con daltonismo en un par distinguible—: tú mueves los controles o escribes el valor y las lecturas numéricas, la insignia de contraste, la rueda de paletas y la tabla de simulación de daltonismo se actualizan al momento, mientras el evaluador te dice qué te falta.
Actualizado el 2026-09-094 sources16 min read
El Curso de color y contraste es un tutorial interactivo de 17 niveles que enseña a leer cualquier forma de escribir un color en un diseño o en CSS y a decidir con un criterio medible si «estos dos colores juntos se pueden leer». Cada nivel te da de uno a tres selectores de color y un objetivo concreto —subir la luminosidad a cierto valor, superar un contraste de 4,5:1, encontrar tres colores con tonos separados 120°, convertir un par indistinguible para alguien con daltonismo en un par distinguible—: tú mueves los controles o escribes el valor y las lecturas numéricas, la insignia de contraste, la rueda de paletas y la tabla de simulación de daltonismo se actualizan al momento, mientras el evaluador te dice qué te falta.
El curso se divide en cuatro bloques: modelos de color (qué controla cada componente de RGB, HEX, HSL, HSV y OKLCH y por qué la «luminosidad» de HSL no coincide con el brillo que percibe el ojo); contraste y WCAG (la fórmula de luminancia relativa y qué cubre cada umbral 4,5:1 / 3:1 / 7:1); paletas (las tres relaciones del círculo cromático: complementaria, triádica y análoga); y accesibilidad y práctica (cómo ve el mundo alguien con daltonismo rojo-verde, cómo elegir una paleta segura para daltónicos y cómo sacar el color dominante de un logo). El último nivel pide combinar todo lo aprendido y entregar una paleta de tres colores que pase todas las comprobaciones.
Se completa en unos 45 minutos. Está pensado para desarrolladores front-end, diseñadores y cualquiera que tenga que elegir colores para diapositivas, gráficos o carteles; no hace falta base de arte.
#RRGGBB / rgb() / hsl().?lesson=n.Arriba está el curso completo: elige nivel en el índice de la izquierda, mueve los controles o escribe valores en el centro y el veredicto aparece al momento.
El nivel 8, «WCAG AA: al menos 4,5:1 para el cuerpo de texto», fija el fondo en blanco y pide llevar el color del texto a un contraste ≥ 4,5 sin llegar a negro puro. Este es el registro de un intento:
Fondo (fijo) #FFFFFF Luminancia relativa L = 1.000
Intento 1 #3B82F6 L = 0.228 Contraste = 1.05 / 0.278 = 3.68:1
Veredicto ✓ AA texto grande (≥ 3) ✕ AA cuerpo (≥ 4.5)
Intento 2 #2563EB L = 0.153 Contraste = 1.05 / 0.203 = 5.17:1
Veredicto ✓ AA texto grande ✓ AA cuerpo ✕ AAA cuerpo (≥ 7) → nivel superadoEl nivel 15, «Seguro para daltónicos», parte de un naranja #E76F51 como referencia y del verde #8AB17D como segundo color inicial: con visión normal la ΔE ≈ 0,20 los distingue a simple vista, pero en la simulación de deuteranopía baja a 0,056 y prácticamente se superponen. Cambia el segundo color a un azul de luminosidad media (por ejemplo #2563EB) y en la simulación la ΔE vuelve a superar 0,15, con ambos colores a ≥ 3:1 sobre blanco: nivel superado.
Cada píxel de la pantalla está formado por tres subpíxeles rojo, verde y azul; rgb(37 99 235) es la intensidad de cada uno de esos haces, donde 0 es apagado y 255 es brillo máximo. Los tres a 0 dan negro, los tres a 255 dan blanco y los tres iguales dan gris. HEX es la misma terna en hexadecimal abreviado: en #2563EB, 25 = 37, 63 = 99 y EB = 235, dos dígitos por canal; una forma de tres dígitos como #FFF repite cada uno. Esta representación se llama sRGB y es el espacio de color por defecto de la web y de casi todos los monitores; entre el valor y la intensidad física de la luz hay una curva gamma que luego hace falta para calcular el contraste.
RGB es cómodo para la máquina pero poco intuitivo para las personas: para «aclarar un poco» un azul hay que mover los tres canales a la vez. HSL cambia de coordenadas: el tono H es un ángulo del círculo cromático (0° rojo, 120° verde, 240° azul y 360° de nuevo rojo), la saturación S indica cuán «puro» es el color (0 % gris, 100 % lo más vivo) y la luminosidad L cuán claro es (0 % negro, 50 % color puro, 100 % blanco). Aclarar es subir L; los colores pastel son S baja con L alta, y el nivel 4 te pide crear uno a mano. En CSS, hsl(221 83% 53%) es el mismo color que #2563EB.
En HSV (también llamado HSB), la V es «el máximo de los tres canales»: con V = 100 % el color está en su punto más vivo o más claro, y bajar S a 0 da blanco en lugar de gris. En HSL, L = 100 % es siempre blanco. Los selectores de color del software de diseño usan sobre todo HSV (un cuadrado más una barra de tono) y CSS solo admite HSL; convertir entre ambos no pierde información, pero los componentes significan cosas distintas, así que no metas los números de HSV directamente en hsl().
En HSL, hsl(60 100% 50%) es amarillo puro y hsl(240 100% 50%) es azul puro; los dos tienen L = 50 %, pero el amarillo se ve claramente más claro. La razón es que HSL no es más que una reorganización geométrica de los valores RGB, sin relación con la percepción humana. OKLab / OKLCH (Ottosson, 2020) se ajusta a datos de experimentos con personas para que una L igual signifique un brillo parecido y para que los cambios de C (croma) y h (tono) sean más uniformes. CSS Color 4 ya incluye oklch() en el estándar y los navegadores principales lo soportan. El nivel 6 pide ajustar un color mirando solo las lecturas OKLCH, con L entre 0,68 y 0,72 y el tono en la zona del naranja; descubrirás que la L de HSL no se corresponde con esa cifra. Para degradados, para generar escalas de claro-oscuro del mismo tono o para mantener «el mismo brillo» entre tonos distintos, OKLCH es mucho más estable.
El contraste que define WCAG no es la diferencia entre dos números cualesquiera, sino el cociente de la luminancia relativa:
donde y el 0,05 modela el reflejo de la luz ambiente. La luminancia relativa se obtiene decodificando primero la gamma de los tres canales sRGB y ponderándolos después:
El verde pesa más que ningún otro (0,7152), así que un verde del mismo valor numérico se ve mucho más claro que un azul; el contraste entre blanco y negro es el máximo, 21:1. El nivel 7 pide hacer el cálculo a mano con las lecturas y, a partir de ahí, cada nivel lo calcula por ti.
El criterio 1.4.3 de WCAG 2.2 (nivel AA) exige un contraste ≥ 4,5:1 para el cuerpo de texto y ≥ 3:1 para texto grande (unas 24 px normal o 18,5 px en negrita); el 1.4.11 exige ≥ 3:1 también para «contenido no textual» como iconos, bordes y gráficos; y el 1.4.6 (nivel AAA) sube el cuerpo a ≥ 7:1. No son criterios estéticos, sino umbrales empíricos para que una persona con baja visión moderada siga leyendo, y son la base normativa de la accesibilidad en muchos países.
El nivel 9 pide además «superar 7:1 sin usar negro puro»: #000 con #FFF da 21:1 sin problema, pero grandes superficies de blanco y negro puro suelen deslumbrar, así que en diseño se eligen grises oscuros como #1A1A1A o #24292F, que superan 7:1 con holgura. En cambio, un texto de relleno en gris claro #9CA3AF sobre blanco solo llega a 2,5:1: muchas webs incumplen justo aquí.
Lo más básico de la teoría del color son las relaciones angulares entre tonos:
La rueda de paletas del curso marca esas tres posiciones para el color elegido; la evaluación solo mira la diferencia angular del tono (con un pequeño margen) y la saturación y la luminosidad quedan libres, porque en una paleta real suelen importar más que el tono.
Alrededor del 8 % de los hombres y el 0,5 % de las mujeres tienen alguna deficiencia en la visión del color; la más frecuente es el daltonismo rojo-verde (protanopía, falta de rojo; deuteranopía, falta de verde), el azul-amarillo (tritanopía) es raro y la acromatopsia es excepcional. El curso simula con el modelo fisiológico de Machado et al. (2009): proyecta el color sobre la respuesta de los conos de la persona con la deficiencia y vuelve a sRGB. Además cuantifica la diferencia entre dos colores con la distancia euclídea ΔE en OKLab: por debajo de ≈ 0,02 apenas se distinguen, y a partir de 0,15 se separan a simple vista.
El nivel 14 pide encontrar, entre tres pares de colores, el que más se parezca para alguien con deuteranopía: el naranja #E76F51 y el verde #8AB17D se quedan en una ΔE de solo 0,056 tras la simulación, mientras que rojo con cian y azul oscuro con amarillo siguen siendo claros porque su luminosidad difiere mucho; el nivel 15 pide arreglarlo. Hay dos vías: separar las luminosidades (el daltonismo pierde sobre todo información de tono, y la diferencia de brillo siempre se ve) o cambiar el tono (pasar de rojo/verde a azul/naranja). En gráficos conviene añadir además formas, texturas o cifras escritas y no confiar solo en el color: es lo que exige el criterio 1.4.1 de WCAG.
La forma ingenua de «extraer el color dominante» de una imagen es contar píxeles: cuantizar cada canal RGB a 16 niveles (4.096 cubos), contar, ordenar y tomar el color medio de los primeros cubos. El curso dibuja un logo de ejemplo en un canvas, hace el recuento y devuelve una paleta ordenada por proporción; tú pulsas una muestra o tomas el color directamente de la imagen. Las herramientas reales (como Vibrant.js o la selección dinámica de Material You) añaden agrupación, descartan los tonos casi blancos y casi negros y ponderan por saturación, pero la idea es la misma.
El último nivel lo combina todo: entregar tres colores con contraste ≥ 4,5:1 sobre blanco (útiles directamente como texto de cuerpo o de botón), con diferencia de tono ≥ 60° entre cualquiera de ellos (distinguibles) y, preferiblemente, con una L de OKLCH parecida (unidad). Decidir una paleta en un proyecto real es más o menos la intersección de esas tres restricciones: legible, distinguible y coherente.
#F00 y el verde puro #0F0 tienen tonos separados 120° y, sin embargo, su contraste es de solo 2,9:1, y para alguien con daltonismo rojo-verde son casi idénticos.Mete el color de texto y el de fondo de un diseño en los selectores del nivel 8 y sabrás al momento si pasa AA; los textos de relleno, los estados desactivados y las notas auxiliares son los puntos que más incumplen.
La tabla de simulación de los niveles 14–15 sirve para comprobar si una paleta categórica sigue siendo distinguible con daltonismo rojo-verde; si no lo es, cambia tonos o añade diferencias de luminosidad y refuerza con formas y etiquetas.
Saca el color dominante del logo (la idea del nivel 16), busca colores de acento con las relaciones del círculo de los niveles 11–13 y elige el color de texto con los niveles de contraste; el nivel 17 es el ensayo de todo ese flujo.
Ya no te extrañará encontrarte oklch(0.7 0.15 250): sabrás que los tres números son luminosidad perceptiva, croma y tono, y por qué resulta más suave que HSL en un degradado.
El contraste lo decide la luminancia relativa: un azul, un morado o un rojo saturados se ven «oscuros», pero su luminosidad puede no ser baja, y el cociente con el blanco está influido por el término +0,05. Mira el valor de contraste en las lecturas numéricas y baja la L de HSL paso a paso hasta pasar el umbral.
No. Todos los niveles se evalúan por rangos numéricos (umbral de contraste, diferencia angular de tono, umbral de ΔE), así que cualquier color que cumpla las condiciones supera el nivel.
Los selectores de Figma y Sketch siguen siendo sobre todo HSB, pero CSS admite oklch() directamente; el panel de lecturas del curso da las cinco formas a la vez, así que copia la línea que necesites.
Machado 2009 es uno de los modelos que usan la academia y herramientas habituales (Chrome DevTools, Color Oracle) y es una aproximación fiable para la deficiencia completa; las diferencias individuales y los grados leves no se pueden cubrir con una sola matriz.
No: el progreso solo vive en el localStorage de este navegador. Con «Compartir este nivel» puedes continuar desde el mismo nivel en otro sitio, pero el historial de niveles superados no viaja.
El curso funciona por completo en local: la conversión de colores, el contraste, la simulación de daltonismo y el recuento de píxeles son cálculos dentro de la página, sin peticiones al servidor; el logo de ejemplo lo dibuja la propia página en un canvas, sin cargar imágenes externas; el progreso se guarda en el localStorage del equipo.
hsl() y oklch(), y sus conversiones: https://www.w3.org/TR/css-color-4/(consultado el 2026-09-09)Actualizado el 2026-09-09
17 niveles: qué significan RGB/HEX/HSL/HSV/OKLCH, contraste WCAG, paletas complementaria/triádica/análoga, simulación de daltonismo y extracción de color de marca, con veredicto en directo al mover los controles
Esta herramienta no está traducida por completo; parte del contenido usa el idioma de origen o uno de reserva.
ObjetivoArrastre los controles deslizantes R, G y B para hacer #FF8000 naranja (R=255, G=128, B=0).
Las pantallas mezclan luz roja, verde y azul (aditiva): las tres encendidas son blancas y las apagadas son negras. Cada canal funciona de 0 a 255, lo que da 256³ ≈ 16,7 millones de colores. #FF8000 significa rojo completo, mitad verde, azul apagado: naranja. Para juzgar se utiliza la distancia de percepción ΔE (OKLab), por lo que no es necesario acertar cada dígito exactamente; indistinguible a simple vista cuenta como un pase.