ULK - Accessible Color Themes & Palette

Actif

Partie intégrante d'ULK, ce système de couleurs offre un langage visuel cohérent et conforme WCAG 2.1 AA sur les sites institutionnels : une base neutre combinée à une couche d'identité chromatique.

Domaine: Color system Accessibility Design system
Outils: CSS variables Git WCAG checker
Chronologie: Construit parallèlement à ULK depuis 2022, maintenu et raffiné en continu.
Projets liés: ULK Design System ULK - Icon Library & Visual Language

Partie intégrante du design system ULK, ce système de couleurs offre un langage visuel cohérent et conforme WCAG 2.1 AA sur les sites institutionnels : une base neutre (clair/sombre) combinée à une couche d'identité chromatique.

Contexte

Construit parallèlement au système ULK, avec la même logique en trois itérations. La V3, actuelle, affine les bases neutres, introduit des palettes monochromes dédiées et systématise le nommage des tokens, pour un système plus robuste à mesure que le nombre de sites couverts augmente.

Structure & logique

Base neutre en light/dark mode, complétée par 13 variantes thématiques. Chaque thème combine deux identités colorées (primary et secondary), déclinées chacune en deux nuances, chargées via une couche de tokens CSS. Ces couleurs peuvent être surchargées localement (par exemple pour la charte d'un laboratoire), à condition de respecter la même logique de contraste : primary1/secondary1 avec le noir cassé propre au système, primary2/secondary2 avec une fonte blanche.

Catalogue de thèmes

13 thèmes nommés, de l'Industrie à l'Orange Sanguine, chacun pensé pour porter une identité tout en restant conforme aux contrastes WCAG 2.1 AA.

Cas d'usage

Utilisé sur l'ensemble des sites institutionnels Typo3 via ULK, ainsi que sur les interfaces mobile et desktop. Compatible avec les préférences système clair/sombre, et intégré au système de classes ULK. Chaque thème se charge via une couche de tokens CSS, sélectionnée par site ou par composant selon les besoins de marque.

Fonctionnalités accessibilité

Système de couleurs conçu avec les contrastes WCAG
Changement de fonte optionnel : Dyslexia, Luciole
Mode sombre et bascule de thème
Espacement et échelle typographique cohérents
Grille et composants responsives

Standards

Conformité WCAG 2.1 AA visée
Exigences RGAA françaises
Balisage compatible lecteurs d’écran avec HTML sémantique approprié

Collaboration & statut

Conçu et développé en autonomie sur les trois versions
Toutes inspirées de la charte graphique print de l'Université de Lille, avec un travail de contraste revu pour l'accessibilité web
Version 3 actuellement en cours, système actif et déployé sur plusieurs sites institutionnels