Neurodiversity Training – Clear, Calm, Accessible
Use a strong dark blue background #1D3557 with off-white headings #F1FAEE and soft-teal body text #A8DADC for high contrast without glare. Links are underlined and keyboard-focusable.
Light Section (BG: #F1FAEE, H: #1D3557, Body: #333333)
This section uses a gentle off-white background for long reads. Headings in the brand dark blue keep recognition strong, while body text uses #333333 – easier than pure black for sustained reading. Links are underlined (colour is not the only cue).
Card on Light
Cards rest on white with a subtle border and shadow for separation without harsh contrast.
Another Card
Use lists for scannability:
- Min 16px body, line-height ≥ 1.5
- Limit palette to reduce cognitive load
- Buttons: clear labels, strong focus styles
Informational Band (BG: #457B9D, H: #F1FAEE, Body: ~#F7FDFD)
Great for highlights or stats. Keep body copy slightly softer than pure white to avoid sparkle on mid-blue.
Article / Blog (BG: #FFFFFF, H: #1D3557, Body: #444444)
For longer articles, you can nudge body copy to #444444 for even gentler contrast. Keep max line length around 60–75 characters, and use subheadings every few paragraphs.
Accessible Buttons
Primary on coloured backgrounds: #E63946 with off-white text. On white, consider a dark-blue button or an outlined style with clear focus.
Focus & Keyboard
All interactive elements must be keyboard-navigable. We use a high-contrast focus ring that’s visible on light and dark backgrounds.
Don’t Rely on Colour Only
Pair colour with another cue: underline links, add icons to alerts, use bold labels for states.
Ready to Talk?
A strong CTA band uses #E63946 with off-white text. The button shifts to the deepest navy #0D1B2A for reliable contrast and brand harmony.
Book a discovery call