HomeCasa Accessible dark mode color palette with WCAG contrast checks
Design a dark mode palette with semantic tokens from your brand colors, a WCAG contrast table for every color pair, fixes for failing pairs and ready-to-use CSS. Designed for ChatGPT, Claude, Gemini and Microsoft Copilot. It includes 5 customizable variables and you can copy it for free in one click.
Advanced · Text · Pending editorial review
Prompt
Act as a design systems designer specializing in color and accessibility (WCAG 2.2).
Context:
- Brand colors (hex): {{brand_colors}}
- Product: {{product}}
- Dark mode base surface: {{surface}}
- Target conformance level: {{wcag_level}}
- Components the palette must cover: {{components}}
Deliverables:
1. Dark mode principles for this product: why to avoid pure black except on OLED screens, how to express elevation with lighter surfaces and how to desaturate brand colors so they do not vibrate.
2. A semantic token table with light and dark values: background, surfaces 1-3, primary, secondary and disabled text, borders, primary and its states (hover, pressed), focus ring, success, warning, error, info and their "on" colors (text placed on that color).
3. A contrast table per pair (text on background, text on surfaces, text on primary, borders and focus on background): ratio calculated with the WCAG 2.x relative luminance formula, the applicable requirement (4.5:1 normal text, 3:1 large text and non-text UI components; 7:1 and 4.5:1 at AAA) and the result.
4. For every failing pair, an alternative value that passes while keeping the brand intent.
5. Chart colors (4-6 series) that remain distinguishable on dark and do not rely on hue alone.
6. Implementation: CSS custom properties, prefers-color-scheme and a manual toggle with a saved preference.
Constraints:
- Show the formula and intermediate values. State clearly that the ratios must be verified with a contrast checker before approval.
- Never convey information by color alone; suggest icons or supporting text.
- If key colors are missing (for example, a brand error color), ask me first; do not present invented values as "official".
Format: token and contrast tables, a list of fixes and a CSS code block.How to use it
- Paste your brand colors as hex values. 2. Review the contrast table and confirm every ratio with a contrast checker. 3. Copy the CSS variables into your project and test the real interface in dark mode.
Usage example
Brand colors: #1E5EFF primary, #FF7A00 accent · Product: banking app · Surface: dark blue-gray · Level: AA.
Sample output
Contrast on the dark surface #141B2B
WCAG 2.x formula: ratio = (L1 + 0.05) / (L2 + 0.05), where L = 0.2126 R + 0.7152 G + 0.0722 B after linearizing each channel. Surface luminance: L ≈ 0.0111.
| Pair | Color L | Ratio | AA requirement | Result |
|---|---|---|---|---|
Primary text #E6EAF2 | 0.8208 | 14.3:1 | 4.5:1 | Pass |
Secondary text #A9B3C6 | 0.4475 | 8.1:1 | 4.5:1 | Pass |
Primary #1E5EFF as text | 0.1550 | 3.4:1 | 4.5:1 | Fail |
Adjusted primary #7FA2FF | 0.3757 | 7.0:1 | 4.5:1 | Pass |
Success #12B76A | 0.3504 | 6.6:1 | 4.5:1 | Pass |
White text on #1E5EFF button | — | 5.1:1 | 4.5:1 | Pass |
Fix: use #7FA2FF for links and brand text in dark mode; keep #1E5EFF only as a button fill with white text. Verify every ratio with a contrast checker before sign-off.
:root { --surface-1: #FFFFFF; --text: #101828; --primary-text: #1E5EFF; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--surface-1: #141B2B; --text: #E6EAF2; --primary-text: #7FA2FF;
}
}
[data-theme="dark"] { --surface-1: #141B2B; --text: #E6EAF2; --primary-text: #7FA2FF; }…
Key facts
- Category
- UI/UX design · Accessibility
- Output type
- Text
- Level
- Advanced
- Designed for
- ChatGPT, Claude, Gemini and Microsoft Copilot
- Verified in
- Pending editorial verification
- Variables
- Brand colors (hex), Product, Base surface, WCAG level and Components
- Language
- English
- Price
- Free, no sign-up
- Updated
- Nov 7, 2026
Frequently asked questions
Can I trust the contrast ratios the AI calculates?
Treat them as a draft. Language models can make arithmetic mistakes, so check every pair with a contrast tool before shipping.
Why not use pure black as the background?
White text on pure black can cause halation and eye strain, and it makes elevation hard to show. A very dark gray usually works better; pure black mainly makes sense for saving power on OLED screens.
What is this prompt for?
Design a dark mode palette with semantic tokens from your brand colors, a WCAG contrast table for every color pair, fixes for failing pairs and ready-to-use CSS.
Which AI tools does it work with?
It is designed for ChatGPT, Claude, Gemini and Microsoft Copilot. We have not verified it in these tools yet, so results may vary between them.
How do I customize the prompt?
Click “Customize” and fill in the variables (Brand colors (hex), Product, Base surface, WCAG level and Components). The text updates instantly and you can then copy it in one click. Values are stored only in your browser.
Do I need experience to use it?
It is advanced: it is meant for people with experience in the topic who can evaluate and adjust the result.
Is this prompt free?
Yes. Every HomeCasa Prompts prompt is free, with no sign-up or subscription. You can also use them in professional projects.
Can I trust the AI output?
Treat it as a high-quality draft: always check data, figures and important claims before publishing or making decisions.