ULK - Accessible Color Themes & Palette

Actief

Part of ULK, this color framework provides a consistent, WCAG 2.1 AA-compliant visual language across institutional websites: a neutral base combined with a color identity layer.

Domein: Color system Accessibility Design system
Gereedschap: CSS variables Git WCAG checker
Tijdlijn: Gebouwd parallel aan ULK vanaf 2022, voortdurend onderhouden en verfijnd.
Gerelateerd: ULK Design System ULK - Icon Library & Visual Language

Part of the ULK design system, this colour framework provides a consistent, WCAG 2.1 AA-compliant visual language across institutional websites: a neutral base (light/dark) combined with a colour identity layer.

Context

Built alongside the ULK system, following the same three-iteration logic. The current V3 refines the neutral bases, introduces dedicated monochrome palettes, and systematises token naming — for a more robust system as the number of covered sites grows.

Structure & logic

Neutral base in light/dark mode, completed by 13 thematic variants. Each theme combines two colour identities (primary and secondary), each declined in two shades, loaded via a CSS token layer. These colours can be locally overridden (for a lab's branding, for instance), provided the same contrast logic is respected: primary1/secondary1 against the system's off-black, primary2/secondary2 against white.

Theme catalog

13 named themes, from Industrie to Orange Sanguine, each designed to carry an identity while remaining WCAG 2.1 AA compliant.

Use cases

Used across all institutional Typo3 sites via ULK, as well as on mobile and desktop interfaces. Compatible with system light/dark preferences, and integrated with the ULK class system. Each theme loads via a CSS token layer, selected per site or component according to branding needs.

Accessibility features

Colour system designed with WCAG contrast in mind
Optional font switch: Dyslexia, Luciole
Dark mode and theme toggling
Consistent spacing and typographic scale
Responsive grid and components

Standards

WCAG 2.1 AA compliance target
French RGAA requirements
Screen-reader-compatible markup with appropriate semantic HTML

Collaboration & status

Designed and developed independently across all three versions
All inspired by the University of Lille's print visual identity, with contrast reworked for web accessibility
Version 3 currently in progress, system active and deployed across multiple institutional sites