HomeCasa Paleta de modo oscuro accesible con comprobación de contraste WCAG
Diseña una paleta de modo oscuro con tokens semánticos a partir de tus colores de marca, tabla de contraste WCAG por pareja de colores, correcciones de los fallos y código CSS listo. Pensado para ChatGPT, Claude, Gemini y Microsoft Copilot. Incluye 5 variables personalizables y se copia gratis en un clic.
Avanzado · Texto · Pendiente de revisión editorial
Prompt
Actúa como diseñador de sistemas de diseño especializado en color y accesibilidad (WCAG 2.2).
Contexto:
- Colores de marca (hex): {{colores_marca}}
- Producto: {{producto}}
- Superficie base del modo oscuro: {{superficie}}
- Nivel de conformidad objetivo: {{nivel_wcag}}
- Componentes que debe cubrir la paleta: {{componentes}}
Entregables:
1. Principios del modo oscuro para este producto: por qué evitar el negro puro salvo en pantallas OLED, cómo expresar la elevación con superficies más claras y cómo desaturar los colores de marca para que no vibren.
2. Tabla de tokens semánticos con valor claro y oscuro: fondo, superficies 1-3, texto principal, secundario y deshabilitado, bordes, primario y sus estados (hover, pressed), anillo de foco, éxito, aviso, error, información y sus colores «on» (texto sobre ese color).
3. Tabla de contraste por pareja (texto sobre fondo, texto sobre superficies, texto sobre primario, bordes y foco sobre fondo): ratio calculado con la fórmula de luminancia relativa de WCAG 2.x, requisito aplicable (4,5:1 texto normal, 3:1 texto grande y componentes no textuales; 7:1 y 4,5:1 si el nivel es AAA) y resultado.
4. Para cada pareja que falle, un valor alternativo que cumpla manteniendo la intención de marca.
5. Colores para gráficos (4-6 series) distinguibles en oscuro y sin depender solo del tono.
6. Implementación: variables CSS, prefers-color-scheme y conmutador manual con preferencia guardada.
Restricciones:
- Muestra la fórmula y los valores intermedios del cálculo. Indica claramente que los ratios deben verificarse con una herramienta de contraste antes de aprobarlos.
- No transmitas información solo con color; propone iconos o texto de apoyo.
- Si faltan colores clave (por ejemplo, el color de error de marca), pregúntame antes; no los inventes como «oficiales».
Formato: tablas de tokens y contraste, lista de correcciones y bloque de código CSS.Cómo usarlo
- Pega tus colores de marca en hexadecimal. 2. Revisa la tabla de contraste y comprueba cada ratio con un verificador de contraste. 3. Copia las variables CSS a tu proyecto y prueba la interfaz real en modo oscuro.
Ejemplo de uso
Colores de marca: #1E5EFF primario, #FF7A00 acento · Producto: app bancaria · Superficie: gris azulado oscuro · Nivel: AA.
Resultado de ejemplo
Contraste sobre la superficie oscura #141B2B
Fórmula WCAG 2.x: ratio = (L1 + 0,05) / (L2 + 0,05), con L = 0,2126 R + 0,7152 G + 0,0722 B tras linealizar cada canal. Luminancia de la superficie: L ≈ 0,0111.
| Par | L del color | Ratio | Requisito AA | Resultado |
|---|---|---|---|---|
Texto principal #E6EAF2 | 0,8208 | 14,3:1 | 4,5:1 | Cumple |
Texto secundario #A9B3C6 | 0,4475 | 8,1:1 | 4,5:1 | Cumple |
Primario #1E5EFF como texto | 0,1550 | 3,4:1 | 4,5:1 | No cumple |
Primario ajustado #7FA2FF | 0,3757 | 7,0:1 | 4,5:1 | Cumple |
Éxito #12B76A | 0,3504 | 6,6:1 | 4,5:1 | Cumple |
Texto blanco sobre botón #1E5EFF | — | 5,1:1 | 4,5:1 | Cumple |
Corrección: usa #7FA2FF para enlaces y texto de marca en oscuro; mantén #1E5EFF solo como fondo de botón con texto blanco. Verifica todos los ratios con un comprobador de contraste antes de aprobar.
:root { --surface-1: #FFFFFF; --text: #101828; --primary-text: #1E5EFF; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--surface-1: #141B2B; --text: #E6EAF2; --primary-text: #7FA2FF;
}
}
[data-theme="dark"] { --surface-1: #141B2B; --text: #E6EAF2; --primary-text: #7FA2FF; }…
Datos clave
- Categoría
- Diseño UI/UX · Accesibilidad
- Tipo de resultado
- Texto
- Nivel
- Avanzado
- Pensado para
- ChatGPT, Claude, Gemini y Microsoft Copilot
- Verificado en
- Pendiente de verificación editorial
- Variables
- Colores de marca (hex), Producto, Superficie base, Nivel WCAG y Componentes
- Idioma
- Español
- Precio
- Gratis, sin registro
- Actualizado
- 07/11/2026
Preguntas frecuentes
¿Puedo fiarme de los ratios de contraste que calcula la IA?
Úsalos como borrador. Los modelos pueden equivocarse en cálculos numéricos, así que verifica cada pareja con una herramienta de contraste antes de llevarla a producción.
¿Por qué no usar negro puro como fondo?
El texto blanco sobre negro puro puede producir halos y fatiga visual, y dificulta mostrar la elevación. Un gris muy oscuro suele funcionar mejor; el negro puro tiene sentido sobre todo para ahorrar energía en pantallas OLED.
¿Para qué sirve este prompt?
Diseña una paleta de modo oscuro con tokens semánticos a partir de tus colores de marca, tabla de contraste WCAG por pareja de colores, correcciones de los fallos y código CSS listo.
¿Con qué herramientas de IA funciona?
Está pensado para ChatGPT, Claude, Gemini y Microsoft Copilot. Todavía no lo hemos verificado en estas herramientas, por lo que los resultados pueden variar entre ellas.
¿Cómo personalizo el prompt?
Pulsa «Personalizar» y rellena las variables (Colores de marca (hex), Producto, Superficie base, Nivel WCAG y Componentes). El texto se actualiza al instante y después puedes copiarlo con un clic. Los valores se guardan solo en tu navegador.
¿Necesito experiencia para usarlo?
Es de nivel avanzado: está pensado para personas con experiencia en el tema que sepan evaluar y ajustar el resultado.
¿Este prompt es gratis?
Sí. Todos los prompts de HomeCasa Prompts son gratuitos, sin registro ni suscripción. Puedes usarlos también en proyectos profesionales.
¿Puedo fiarme del resultado de la IA?
Úsalo como un borrador de calidad: revisa siempre datos, cifras y afirmaciones importantes antes de publicarlos o tomar decisiones.