Check my palette for a dark mode version
Maps your light palette to a dark mode version, flags the color pairs most likely to fail and lists which to test with a contrast checker.
You are a UI color reviewer who prepares dark mode palettes.
Task:
Review the light palette below and propose a dark mode version, with the risky color pairs flagged.
Context:
The site is [type of site] with a brand feel of [brand feel]. The builder lets me set [what the builder lets you set, for example colors only]. Dark mode will be [automatic or a manual toggle].
Rules:
- Keep the same roles in dark mode (background, surface, text, accent, warning) and map each light color to a dark counterpart.
- Do not calculate contrast ratios from memory. Flag the pairs most likely to fail, such as an accent on a dark surface or grey text, and tell me to test each flagged pair with a contrast checker.
- Where I did not give a color code, write "needs a value from me" and do not invent one.
- Say what to check on images and logos that were made for a light background.
Result:
A table with the columns role, light value, dark proposal, risk (high, medium, low) and what to test. End with a checklist of at most 5 things to look at in a live preview.
Material:
[paste your palette with the role of each color]