Accessibility
Designed for everyone
Accessibility isn't an afterthought — it's built into how we choose, pair, and apply colour. Our palette in OKLCH gives us perceptually uniform steps so contrast is predictable by design.
Contrast requirements
All text must meet WCAG 2.2 minimum contrast ratios. Use the lightness channel (L) in OKLCH to predict contrast — keep text at L ≤ 0.35 on backgrounds at L ≥ 0.92 to reliably hit 7:1.
AA — Normal text
4.5:1
Body copy, captions, and any text under 18px or 14px bold
AA — Large text
3:1
Headings at 18px+ regular or 14px+ bold, and UI components
AAA — Enhanced
7:1
Target for all body text. Our graphite-900 on white achieves this comfortably
Colour vision deficiency
Around 8% of males and 0.5% of females have some form of colour vision deficiency. Never rely on colour alone to convey meaning — always pair with labels, patterns, or icons.
Safe combinations
Ink + Ember
Blue/orange — universal safe pair
Ink + Supernova
Blue/yellow — high luminance contrast
Graphite + Ink
Lightness difference carries the signal
Cosmos + Ember
Distinct hue + luminance separation
Avoid without additional cues
Nebula + Pulse
Red/green — indistinguishable in protanopia
Pulse + Ember
Green/orange — merges in deuteranopia
Ink + Meteorite
Blue/purple — too close in tritanopia
Nebula + Ember
Red/brown — lost in protanopia/deuteranopia
How our palette appears under colour vision deficiency
Normal vision
Protanopia (no red)
Deuteranopia (no green)
Tritanopia (no blue)
Readability & dyslexia
An estimated 10% of people are dyslexic. High-contrast black on white can cause visual stress and letter-swimming. How we use colour — not just for text, but across surfaces, UI, and accents — directly affects readability.
Text & background pairings
The quick brown fox jumps over the lazy dog.
Recommended
Graphite-800 on Graphite-50
The quick brown fox jumps over the lazy dog.
Recommended
Graphite-800 on warm cream
The quick brown fox jumps over the lazy dog.
Avoid
Pure black on pure white
Using colour with dyslexic readers
Saturated colours increase visual noise. For any surface where reading is the primary task, favour muted tones from our 50–200 range. Reserve vivid 500+ shades for accents, not backgrounds behind text.
Dyslexia-friendly tints
These soft backgrounds reduce glare and visual stress. The British Dyslexia Association recommends warm off-whites and pale pastels.
Supernova-50
Warm cream — the most universally preferred tint
Horizon-50
Pale blue — calming, reduces visual fatigue
Pulse-50
Soft mint — gentle alternative for cool preference
Graphite-50
Neutral off-white — our default reading surface
Colours that increase visual stress
Highly saturated hues and harsh contrasts cause more difficulty. These are fine as small accents but should never be used behind body text.
Saturated reds
Most problematic — triggers visual stress and Meares-Irlen symptoms
Vivid greens
High chroma green causes letter-swimming for many readers
Bright limes
Vibrating effect against both light and dark text
Pure white surfaces
Glare creates "rivers" of white space between words
Saturation scale for reading contexts
Use lighter, lower-chroma variants from our palette when colour sits behind or near text. The further left on the scale, the more comfortable for sustained reading.
Ink
Supernova
Aurora
Accessibility checklist
A quick reference for every designer and developer working with the Lexonic palette.
- Use graphite-800 or graphite-900 for body text — never pure black
- Prefer graphite-50 or warm cream over pure white for long-form reading
- Use 50–200 tints behind text — reserve 500+ for accents and UI highlights
- Avoid saturated reds and bright greens behind or near body copy
- Never rely on colour alone — pair with icons, labels, or patterns
- Test all colour pairings against WCAG AA (4.5:1) minimum
- Target WCAG AAA (7:1) for body text wherever possible
- Use OKLCH lightness to predict contrast when building new components
- Provide at least 1.5× line height for body copy