OKLCH Studio
Accessible colour palettes (WCAG 2.2 + APCA verified)
These are concrete, ready-to-copy palettes for specific uses: an industry, a type of product, a kind of chart or a particular need such as low vision. The companion guide explains how to build a palette; this collection gives you finished ones, each with a light and a dark theme.
Every palette is generated by a program, not drawn by hand. Each page starts from a hue and chroma intent chosen for its use case, then the generator solves lightness in OKLCH, holding hue and chroma, until every declared pair meets its target. Hex values are the sRGB result after gamut mapping, and the OKLCH values shown are those of the final hex.
Each pair is verified with the same code as the contrast checker: the WCAG 2.x ratio decides pass or fail, and APCA Lc is shown beside it with its tier. Chart palettes are also tested for series contrast and for colour-blind separation with simulated protanopia, deuteranopia and tritanopia. If a target is ever missed, the build fails, so a failing palette cannot ship.
How to build an accessible palette →WCAG 2.2 vs APCA →Contrast checker →shadcn/ui themes in OKLCH →Tailwind AA data report →
Industries
Accessible color palette for healthcare (WCAG 2.2 verified)
AAA text · AA UI
Calm teal, restrained chroma and AAA body text for portals, clinics and patient forms.
Accessible color palette for fintech (WCAG 2.2 verified)
AAA text · AA UI
Trust blue, numeric-table-safe text and gain/loss colours that survive red-green colour blindness.
Accessible color palette for banking (WCAG 2.2 verified)
AAA text · AA UI
Deep navy, restrained gold and AAA primary colours for high-trust, form-heavy banking sites.
Accessible color palette for insurance (WCAG 2.2 verified)
AAA text · AA UI
Reassuring green, warm accent and AAA reading text for policy documents and claim flows.
Accessible color palette for government (WCAG 2.2 verified)
AAA text · AA UI
Pure neutrals, one blue accent and AAA throughout for public-sector services.
Accessible color palette for education (WCAG 2.2 verified)
AAA text · AA UI
Scholarly violet with a gold accent and AAA reading text for campuses, courses and portals.
Accessible color palette for e-learning for kids (WCAG 2.2 verified)
AAA text · AA UI
Bright, playful blue and orange for young learners, still verified at WCAG AA.
Accessible color palette for nonprofits (WCAG 2.2 verified)
AAA text · AA UI
Warm raspberry with teal support, built for donation flows and campaign pages.
Accessible color palette for legal (WCAG 2.2 verified)
AAA text · AA UI
Oxblood, brass and stone neutrals with AAA text for firm sites, articles and client portals.
Accessible color palette for real estate (WCAG 2.2 verified)
AAA text · AA UI
Copper, stone neutrals and a teal accent for listings, filters and property detail pages.
Accessible color palette for e-commerce (WCAG 2.2 verified)
AAA text · AA UI
Indigo trust colour, hot orange sale accent and verified stock and error states for shops.
Accessible color palette for travel (WCAG 2.2 verified)
AAA text · AA UI
Open sky blue with a vivid pink accent for search, booking steps and itinerary status.
Accessible color palette for restaurants (WCAG 2.2 verified)
AAA text · AA UI
Warm terracotta, olive and cream for menus, bookings and opening-hours pages.
Accessible color palette for news and publishing (WCAG 2.2 verified)
AAA text · AA UI
True neutrals, a strong link blue and a red accent for articles, bylines and breaking banners.
Accessible color palette for energy and utilities (WCAG 2.2 verified)
AAA text · AA UI
Teal-green and blue for bills, usage graphs and outage alerts that must be read at a glance.
Product & UI
Accessible color palette for SaaS dashboards (WCAG 2.2 verified)
AAA text · AA UI
Indigo and teal for dense dashboards: cards, tables, filters and status chips.
Accessible color palette for admin panels (WCAG 2.2 verified)
AAA text · AA UI
Steel blue and amber for internal tools: dense tables, bulk actions and permission badges.
Accessible color palette for mobile apps (WCAG 2.2 verified)
AAA text · AA UI
Violet and green on true neutrals for phones: outdoor-readable, with a verified dark theme.
Accessible color palette for design systems (WCAG 2.2 verified)
AAA text · AA UI
A semantic token set where every role pair is pre-verified, with four export formats.
Accessible color palette for forms and status messages (WCAG 2.2 verified)
AAA text · AA UI
Error, warning, success and info as text and badges, tested for colour-blind separation.
Accessible color palette for dark mode (WCAG 2.2 verified)
AAA text · AA UI
A dark-first theme verified role by role, with light mode alongside.
Accessible color palette for landing pages (WCAG 2.2 verified)
AAA text · AA UI
Bold magenta with a yellow accent: loud call-to-action colours that still pass.
Accessible color palette for documentation sites (WCAG 2.2 verified)
AAA text · AA UI
Quiet blue and green for long reading: AAA text, callouts, links and code blocks.
Data visualisation
Accessible chart colors: an 8-colour categorical palette
WCAG AA
Eight categorical series colours, 3:1 against the background and checked under simulated colour blindness.
Colorblind-friendly chart palette: six colours with a strict ΔE check
AAA text · AA UI
Six series colours held to a strict separation threshold under all three colour-blindness simulations.
Accessible heatmap and sequential colour scale: nine steps
WCAG AA
Nine blue-to-teal steps rising in lightness, each 3:1 against the background.
Accessible diverging colour scale: orange to blue in nine steps
WCAG AA
Orange to neutral to blue, nine steps, each 3:1 against the background and safe for red-green blindness.
Special needs
High contrast accessible colour palette for low vision (WCAG AAA)
WCAG AAA
Everything at AAA: near-black on near-white, vivid blue links, thick-edged borders and focus rings.
Colorblind-friendly colour palette for interfaces
AAA text · AA UI
Blue and orange UI colours with a status pair held to a strict separation threshold.
WCAG compliant colour palette: every pair verified at AA
WCAG AA
A neutral, no-nonsense AA baseline: 4.5:1 text, 3:1 components, light and dark.
ADA-oriented colour palette: conservative WCAG-based contrast
AAA text · AA UI
Conservative WCAG-based colours with AAA text and muted text, built for headroom.
FAQ
- What does verified mean here?
- Every colour pair a page lists was computed from its final hex value with the WCAG 2.x contrast formula, and the pass or fail decision uses the raw ratio. A build step fails if any pair misses its target. Verification covers colour contrast only, not a full accessibility audit.
- Which WCAG level do the palettes meet?
- All text pairs meet AA at 4.5:1 or better, and many target AAA at 7:1 for body text. Borders, focus rings and chart series meet the 3:1 of WCAG 1.4.11 Non-text Contrast. Each page states the target of every pair.
- Are the colour-blind checks a guarantee?
- No. They are simulations using the Machado et al. (2009) model, applied at full severity, and a minimum perceptual difference in OKLab is required between colours. They are a strong screening signal. WCAG 1.4.1 still asks you to pair colour with labels, icons or patterns.
- Can I change a colour and keep it accessible?
- Yes. Paste the pair into the contrast checker. If it fails, the Fix button moves OKLCH lightness while keeping hue and chroma until it passes, which is the same method the generator uses.
- Do the palettes work with Tailwind and shadcn/ui?
- Each page exports CSS custom properties, a Tailwind CSS v4 @theme block, shadcn/ui variables and design-token JSON, all generated from the verified values. See the shadcn/ui themes for comparison.