Accessible Color Palettes That Actually Look Good: WCAG-Compliant Hex Combos for 2024
Photo: TheLocalTemp, CC BY-SA 4.0, via Wikimedia Commons
Let's kill a persistent myth right now: accessible color design does not mean boring color design. For years, developers and designers treated WCAG compliance like a mandatory haircut — something you had to do, but nothing to be excited about. That thinking is outdated, and these palettes are proof.
The Web Content Accessibility Guidelines (WCAG) require a contrast ratio of at least 4.5:1 for normal text (AA standard) and 7:1 for AAA compliance. For large text (18pt+ or 14pt+ bold), AA drops to 3:1. These aren't arbitrary numbers — they're thresholds that ensure people with low vision, color blindness, or situational impairments (like reading a phone in direct sunlight) can actually use your site.
Below, we've put together eight ready-to-use palettes with exact hex codes, contrast ratios, and recommended use cases. Each one passes at minimum WCAG 2.1 AA. Several hit AAA. All of them look like something you'd actually want to ship.
How to Read These Palettes
Each palette includes:
- Background hex + Foreground hex pairings
- Contrast ratio (calculated per WCAG 2.1 relative luminance formula)
- WCAG compliance level (AA or AAA)
- Suggested use case
You can verify any of these ratios yourself using tools like WebAIM's Contrast Checker or our built-in color contrast tool here on HTML Color Code.
Palette 1: Clean Slate (Light Mode Professional)
| Role | Hex | Notes |
|---|---|---|
| Background | #FFFFFF |
Pure white |
| Primary Text | #1A1A1A |
Near-black, not harsh |
| Accent / Links | #005FCC |
Deep accessible blue |
| Secondary Text | #595959 |
Muted gray |
| Success State | #1D7A3A |
Dark accessible green |
Contrast ratios:
#1A1A1Aon#FFFFFF→ 18.1:1 (AAA ✅)#005FCCon#FFFFFF→ 7.0:1 (AAA ✅)#595959on#FFFFFF→ 7.0:1 (AAA ✅)
Best for: Corporate sites, SaaS dashboards, legal and financial platforms. This palette is the professional workhorse — clean, high-contrast, universally readable.
Palette 2: Midnight Focus (Dark Mode)
| Role | Hex | Notes |
|---|---|---|
| Background | #121212 |
True dark base |
| Primary Text | #E8E8E8 |
Soft white (easier on eyes than pure white) |
| Accent | #64B5F6 |
Light blue for dark backgrounds |
| Secondary Text | #A0A0A0 |
Subdued but readable |
| Warning State | #FFD54F |
Accessible amber |
Contrast ratios:
#E8E8E8on#121212→ 14.7:1 (AAA ✅)#64B5F6on#121212→ 7.5:1 (AAA ✅)#A0A0A0on#121212→ 5.9:1 (AA ✅)
Best for: Developer tools, code editors, productivity apps, and any interface where users spend extended time. Note that #A0A0A0 clears AA but not AAA — bump it to #B0B0B0 if you need full AAA compliance.
Palette 3: Evergreen (Nature & Wellness)
| Role | Hex | Notes |
|---|---|---|
| Background | #F4FAF5 |
Barely-there mint |
| Primary Text | #1B3A2D |
Deep forest green |
| Accent | #1A6B3C |
Rich accessible green |
| Secondary | #4A6B55 |
Muted sage |
| CTA Button | #0D5C2E |
Dark green on white |
Contrast ratios:
#1B3A2Don#F4FAF5→ 13.2:1 (AAA ✅)#1A6B3Con#F4FAF5→ 7.1:1 (AAA ✅)#4A6B55on#F4FAF5→ 5.4:1 (AA ✅)
Best for: Health and wellness brands, sustainable businesses, organic food platforms, environmental nonprofits.
Palette 4: Ember (E-commerce & Retail)
| Role | Hex | Notes |
|---|---|---|
| Background | #FFF8F2 |
Warm cream |
| Primary Text | #2C1810 |
Deep warm brown |
| Accent | #C0392B |
Bold accessible red |
| Secondary | #6B4226 |
Warm medium brown |
| Highlight | #E67E22 |
Orange (large text only) |
Contrast ratios:
#2C1810on#FFF8F2→ 17.4:1 (AAA ✅)#C0392Bon#FFF8F2→ 5.6:1 (AA ✅)#E67E22on#FFF8F2→ 3.1:1 (Large text AA ✅)
Important note on #E67E22: This orange only clears AA for large text (18pt+). Do not use it for body copy or small UI labels.
Best for: Retail, food brands, lifestyle e-commerce, boutique shops.
Palette 5: Arctic (Minimal / Tech)
| Role | Hex | Notes |
|---|---|---|
| Background | #F0F4F8 |
Cool light gray |
| Primary Text | #0D1B2A |
Almost black with blue undertone |
| Accent | #1565C0 |
Strong accessible blue |
| Borders / Dividers | #9EAAB8 |
Light blue-gray |
| Success | #2E7D32 |
Deep accessible green |
Contrast ratios:
#0D1B2Aon#F0F4F8→ 17.8:1 (AAA ✅)#1565C0on#F0F4F8→ 7.3:1 (AAA ✅)#2E7D32on#F0F4F8→ 7.0:1 (AAA ✅)
Best for: Tech startups, SaaS products, developer documentation, fintech apps.
Before & After: The Inaccessible Version Problem
It helps to see what not to do. Here are three common hex pairings that fail WCAG — and the accessible swaps that fix them without killing the vibe.
❌ Fail: Light gray on white
#AAAAAAon#FFFFFF→ 2.3:1 (fails all standards)- ✅ Fix:
#767676on#FFFFFF→ 4.5:1 (AA pass)
❌ Fail: Yellow text on white
#FFD700on#FFFFFF→ 1.4:1 (catastrophically low)- ✅ Fix:
#9A6700on#FFFFFF→ 4.6:1 (AA pass — same golden family, much darker)
❌ Fail: Trendy light blue on white
#87CEEBon#FFFFFF→ 1.8:1 (fails)- ✅ Fix:
#1565C0on#FFFFFF→ 8.0:1 (AAA pass)
The pattern is clear: it's usually not the hue that's the problem, it's the lightness. Darkening a color while keeping its hue almost always gets you to compliance without sacrificing your brand identity.
Tools to Test Your Own Hex Combos
Before shipping any color decision, run it through at least one of these:
- WebAIM Contrast Checker (webaim.org/resources/contrastchecker) — paste in two hex codes and get an instant ratio
- Colour Contrast Analyser (free desktop app from TPGi) — great for testing real screenshots
- Chrome DevTools — the accessibility panel flags low-contrast text directly in the browser
- Our contrast tool right here on HTML Color Code — enter any two hex values and see WCAG compliance status instantly
The Bottom Line on Accessible Hex Choices
About 26% of American adults live with some form of disability, according to the CDC. A significant portion of those involve vision. When you ship a low-contrast color palette, you're not just risking ADA compliance headaches — you're actively shutting people out of your content.
The good news is that accessible palettes don't require compromise. Every palette in this list was built to look current and intentional, not like a compliance checkbox. High contrast and good design have always been compatible — it just takes knowing which hex values to reach for.
Save these palettes, test your own combinations, and build something that works for everyone.