Cómo elegir un color de texto legible para cualquier fondo

Empieza por el fondo que verá realmente el usuario

Un token de color es solo una entrada. El fondo relevante es el color situado detrás de los glifos una vez resueltas las variables CSS, la opacidad, las capas, los degradados, las imágenes, la mezcla y el estado del componente. Una tarjeta declarada blanca puede estar bajo una capa translúcida y renderizarse azul pálido. Un texto declarado negro con alfa del 70% deja de ser #000000 después de componerse. Medir las declaraciones sin resolver esa cadena puede dar una respuesta segura a la pregunta equivocada.

• Identifica el componente, estado, viewport y tema exactos que se prueban.
• Resuelve el color del texto y todas las capas situadas detrás hasta obtener colores efectivos renderizados.
• Registra los tokens de origen junto con el primer plano y el fondo efectivos.
• Repite la prueba para hover, foco, selección, desactivado, error, tema oscuro y variantes responsive cuando cambie algún color.
• Trata degradados, fotografías, vídeo y superficies con patrones como intervalos de fondos, no como un único color muestreado.

Compara candidatos por ratio, no por tono o intuición

El ratio de contraste WCAG compara la luminancia relativa del color renderizado más claro con la del más oscuro. Va de 1:1 para luminancias iguales a 21:1 para negro contra blanco. Los nombres de tono, la luminosidad HSL y las impresiones personales no sustituyen este cálculo. Un azul saturado y un amarillo saturado pueden tener ambos 50% de luminosidad HSL y, sin embargo, producir luminancias y elecciones de texto radicalmente distintas.

Para texto normal, el Criterio de Conformidad 1.4.3 de WCAG 2.2 exige al menos 4.5:1 en nivel AA. El texto a gran escala tiene un umbral de 3:1 en ese criterio. El nivel AAA mejorado usa 7:1 para texto normal y 4.5:1 para texto grande. Compara el ratio sin redondear con el número requerido; redondea solo la etiqueta mostrada. Un 4.5:1 visible puede suspender si su valor completo es 4.48:1.

• Elige el objetivo de conformidad y la clase de texto antes de comparar candidatos.
• Calcula cada candidato contra el mismo fondo efectivo.
• Descarta los candidatos inferiores al umbral aplicable en vez de clasificarlos como casi aceptables.
• Entre los que aprueben, elige según la jerarquía, el sistema de marca y la legibilidad contextual.
• Conserva los valores medidos junto a la decisión de diseño para poder revisarla más adelante.

Opciones de negro y blanco comprobadas sobre fondos habituales

El negro y el blanco son buenos primeros candidatos porque uno de ellos siempre ofrece un contraste matemático fuerte sobre un fondo sRGB opaco, pero no son intercambiables. La tabla utiliza la fórmula de luminancia relativa de WCAG 2.2, compara valores con toda su precisión y muestra cuatro decimales. «Mejor» significa el mayor ratio de esos dos candidatos; no afirma que el componente resultante cumpla todos los requisitos de accesibilidad.

No te detengas en un selector automático entre negro y blanco

Un selector binario es una base segura para muchas muestras generadas, pero un producto suele imponer más restricciones. El negro puro puede resultar innecesariamente duro sobre una superficie de lectura casi blanca; el blanco puro puede enfatizar demasiado el texto secundario de un panel oscuro. El proceso correcto prueba los candidatos reales del sistema de diseño. Un neutro más suave solo es aceptable si su propio ratio medido supera el objetivo: derivarlo de un token negro que aprueba no demuestra nada.

• Enumera los tokens de primer plano permitidos para texto principal, secundario, interactivo, inverso y de estado.
• Calcula cada token contra el fondo resuelto en vez de modificar silenciosamente el fondo.
• Filtra por el umbral exigido y conserva después la jerarquía intencionada entre las opciones restantes.
• Si ningún candidato de marca aprueba, cambia el primer plano, el fondo o añade una superficie controlada tras el texto.
• Evita algoritmos que aclaren u oscurezcan continuamente un color de marca hasta superar un número; el resultado puede salir de la paleta revisada y suspender en otro estado.

const candidates = ["#17181C", "#4F46E5", "#FFFFFF"];
const threshold = 4.5;

const passing = candidates
  .map((foreground) => ({
    foreground,
    ratio: contrastRatio(foreground, background),
  }))
  .filter(({ ratio }) => ratio >= threshold)
  .sort((a, b) => b.ratio - a.ratio);

// Choose from `passing` by semantic role; do not round before filtering.

Transparencia, degradados y fotos necesitan una prueba de intervalo

Los colores alfa deben componerse antes de calcular la luminancia. CSS Color 4 define la composición alfa simple canal por canal. El color efectivo depende tanto del primer plano translúcido como de lo que haya debajo, por lo que un token como rgb(0 0 0 / 60%) no tiene por sí solo un único ratio de contraste. La opacidad de un elemento padre puede modificar tanto el texto como el fondo, y varias capas translúcidas deben resolverse en su orden de pintado.

• Compón el texto translúcido sobre el fondo efectivo y compara después el color de texto resultante con ese fondo.
• Compón capas y fondos translúcidos de abajo arriba antes de probar el texto.
• Para un degradado, comprueba el ratio mínimo en toda el área ocupada por cada línea de texto.
• Para fotos o vídeo, toma muestras representativas y desfavorables o introduce una capa opaca o translúcida controlada.
• Fija la dirección artística dinámica cuando sea posible; el resultado de contraste de una imagen hero no se transfiere a la siguiente.

El tamaño del texto cambia el umbral, no la evidencia renderizada

WCAG define el texto a gran escala según el tamaño y peso renderizados, no por un nivel de encabezado HTML ni por una etiqueta de una herramienta de diseño. Según el Criterio de Conformidad 1.4.3, el texto grande puede usar 3:1 en nivel AA, pero el cuerpo de texto suele necesitar 4.5:1. No promociones un texto a la categoría grande solo por ser negrita, importante o visualmente destacado. Comprueba el tamaño de fuente y el peso calculados del elemento real.

• Usa por defecto el umbral de texto normal.
• Aplica la excepción de gran escala solo después de confirmar el tamaño y peso renderizados.
• Repite la prueba cuando el CSS responsive reduzca la fuente en un viewport pequeño.
• Mide por separado texto de placeholder, ayuda, error, insignia y botón si utilizan tokens diferentes.
• Recuerda que controles inactivos, logotipos, texto decorativo e incidental tienen excepciones limitadas; una excepción no es un atajo de diseño general.

El ratio del texto tampoco certifica iconos, indicadores de foco, bordes de campos, gráficos u otra información visual. Contraste no textual tiene su propio ámbito y requisitos de 3:1 para los componentes de interfaz y objetos gráficos cubiertos. El color no debe ser la única vía para comunicar significado importante. El teclado, la semántica, el zoom, el reflujo y la usabilidad real requieren pruebas aparte.

Lista reproducible para elegir el primer plano

• Nombra el componente, idioma, tema, viewport, estado y estilo de texto exacto.
• Resuelve el primer plano final y todas las capas de fondo, incluidos alfa y overlays.
• Clasifica el contenido y elige el umbral AA o AAA aplicable.
• Calcula ratios con toda la precisión para cada candidato de primer plano permitido.
• Descarta los candidatos bajo el umbral antes de aplicar preferencias de marca o jerarquía.
• En fondos variables, comprueba la zona menos favorable ocupada por el texto.
• Verifica estados responsive e interactivos que cambien color, tamaño, peso o imagen.
• Registra colores de origen, colores efectivos, ratio, umbral, resultado y fecha de revisión.
• Continúa con contraste no textual, señales no basadas solo en color, semántica, teclado, zoom y revisión humana.

Este proceso escala porque el paso factual es determinista y la decisión de diseño permanece explícita. Color Atlas muestra ratios exactos para los colores del catálogo y mantiene las referencias W3C principales junto a la explicación. Usa esos números para eliminar pronto los candidatos que suspenden y examina después el texto elegido en el componente real. Un ratio válido es evidencia necesaria para el criterio probado, no una promesa de certificación de la página, el producto o la organización.