Colors & accessibility

TL;DR

CÉNIT uses a token-based color system. Your club’s primary color appears throughout the app, but the system automatically uses a high-contrast version of it for buttons and interactive controls to guarantee readability in both dark and light mode.

How brand colors work

When you set a primary color in Settings, the app applies it to highlights, active tabs, links, and accents. Two things to know:

• In dark mode, the system blends your color with the dark background. Very light colors (pastels, near-white) can lose contrast against dark surfaces — the text on top becomes hard to read.
• For buttons and interactive controls, the app always uses a guaranteed-contrast version of your primary color regardless of what you picked. This ensures WCAG AA readability (at minimum 4.5:1 contrast ratio) even if your brand color is light.

Choosing a primary color

There are no restrictions on what you can pick, but for best results:

• Prefer medium-to-dark saturated colors. A deep blue, a rich green, or a strong red all work well in both modes.
• Avoid very light colors (pastels, near-white, near-yellow) as your primary — they tend to disappear in dark mode and on white backgrounds in light mode.
• Test both modes after saving. Open the theme toggle and check that headings, active tabs, and buttons all look correct.

Light mode vs dark mode

The app ships in dark mode by default. When a user switches to light mode, color tokens automatically adjust — backgrounds become white, text becomes dark, and semantic colors (ok/warning/danger) shift to higher-contrast amber and red variants.

Your brand primary and secondary colors apply in both modes. The same caveat above applies: light colors that look fine in dark mode may wash out in light mode.

See Light / dark mode for how to toggle and Club branding for where to configure your colors.

Accessibility

The app meets WCAG AA contrast requirements across all controls:

• All buttons with white text use a contrast ratio ≥ 7.9:1.
• Status indicators (available / injured / recovering / suspended) have both color and a text label — color is never the only signal.
• Focus rings are visible on all interactive elements for keyboard and switch-access users.
• Error messages use role="alert" so screen readers announce them immediately.