Gestión del color CSS y accesibilidad de la pantalla
Gestiona espacios de color, pantallas de amplia gama, contraste y alternativas accesibles.
BotBrowser Team
Quieres la documentación estructurada de Plataforma?
Este artículo forma parte de la biblioteca editorial. Para pasos de configuración, material de referencia y actualizaciones continuas, entra en la sección de docs.
El color web es una cadena: el CSS nombra un espacio, el navegador convierte, la pantalla limita y las preferencias cambian la presentación. La accesibilidad depende del texto, fondo, estado y alternativa que la persona realmente ve.
Espacios y perfiles
rgb() suele usar sRGB; CSS moderno también nombra display-p3, lab y oklch. Un perfil relaciona canales con una condición de visualización, pero no garantiza que el dispositivo pueda mostrar cada valor. Separa intención de diseño y coordenadas. La especificación CSS Color 5 y la referencia MDN de color() describen el lenguaje, no una pantalla concreta.
Usa roles semánticos como --surface, --text y --focus-ring. Cada rol puede tener valor de amplia gama, alternativa sRGB y alternativa de colores forzados. La alternativa debe vivir junto al rol para no dejar componentes ilegibles.
Conversión color()
color(display-p3 1 0 0) solicita una coordenada en un espacio; el navegador la adapta al dispositivo y puede recortarla. @supports comprueba sintaxis, no una pantalla de amplia gama. Prueba gradientes, sombras, bordes y estados hover, focus, error y seleccionado.
Variabilidad de gama
Una imagen amplia puede verse intensa en una pantalla y moderada en otra. Luz ambiental, gestión del sistema y ajustes del navegador también influyen. No uses solo rojo y verde para estados: combina etiqueta, icono, patrón o posición. Zoom y tamaño de texto pueden cambiar la legibilidad aunque los colores no cambien.
BotBrowser admite recorridos autorizados de color, contraste y preferencias en pipelines documentados, pero no cambia la gama física de la pantalla ni certifica accesibilidad para cada dispositivo. Consulta BotBrowser Advanced features y revisa dispositivos reales y tecnologías de asistencia.
Contraste y accesibilidad
El contraste pertenece a un par y un estado. Comprueba texto, fondo, imágenes, overlays, foco, error, deshabilitado y seleccionado con estilos calculados. Una fixture determinista debe incluir título, cuerpo, enlace, foco y mensaje de error. Después usa zoom, colores forzados, teclado y lector de pantalla. Una ratio aprobada no garantiza que una letra fina o un patrón resulte cómodo.
Respeta prefers-contrast, colores forzados y prefers-reduced-motion. Conserva las preferencias sin crear perfiles del dispositivo.
Entrega alternativa
Empieza con sRGB o colores del sistema, añade amplia gama cuando sea posible y define reglas de alto contraste. Si una declaración falla, queda disponible la anterior. Si ninguna combinación cumple, muestra el mismo estado con texto e icono. Conserva selección, rango de gráfico, foco y texto de validación cuando cambia la paleta.
Registra contexto, sintaxis, valores elegidos, contraste, preferencia y limitación visible, sin guardar capturas o datos personales. Consulta la validación de versiones y la guía de compatibilidad.
Registro fijo
Congela revisión CSS, tabla de roles, alternativas, objetivo de contraste, fixtures y preferencias probadas. Conserva evidencia negativa: una declaración P3 puede parsearse y ser mapeada por la pantalla; un fixture puede requerir un una alternativa más oscura. La nota indica componentes, supuestos, alternativa y recuperación, sin prometer colores idénticos en cada monitor.
Repite la fixture al cambiar fuente, icono, imagen, sombra, webview, impresión o modo oscuro. Un cambio geométrico puede alterar contraste aunque los tokens sigan iguales. La secuencia es definir roles, convertir, probar gama, validar estados, conservar preferencias y fijar evidencia.
La intención de marca sobrevive con menos saturación.
El foco conserva un borde visible.
El estado de error incluye texto.
La selección tiene un indicador adicional.
La preferencia del sistema se respeta.
La impresión usa alto contraste.
Un webview puede cambiar el fondo.
La prueba registra el contexto.
Una captura no sustituye teclado.
La acción se conserva al cambiar colores.
La interfaz explica la limitación.
La fixture se repite tras actualizar.
La alternativa conserva etiquetas.
La revisión compara todos los estados.
La intención visual debe sobrevivir cuando baja la saturación. El foco conserva un borde visible y el error añade texto. La selección incorpora un indicador adicional. La preferencia del sistema se respeta sin crear un perfil. La impresión usa alto contraste y una webview puede aportar otro fondo. La prueba registra el contexto, conserva la acción y repite la misma fixture tras una actualización.
Fuentes públicas
Artículos Relacionados
Lleva BotBrowser de la investigación a producción
Usa estas guías para entender el modelo y después avanzar hacia validación multiplataforma, contextos aislados y despliegue de navegador preparado para escalar.