A palette is a set of decisions about where colors go. A list of attractive swatches cannot tell you whether paragraph text is readable, a link is recognizable, or a warning stands apart from a normal card. Those questions become clearer when the colors are assigned jobs.
Describe the page before requesting colors
Tell ChatGPT what is fixed: existing logo colors, photography, light or dark background, and the kind of pages readers use most. A tutorial site with long articles needs a dependable reading surface; a short promotional landing page may use a stronger accent. Give the model the actual constraints, then ask for a small set of roles.
Help plan color roles for a WordPress tutorial site. The existing brand color is [hex value] and most pages have long text on a light background. Suggest one background, one primary text color, one action color, and one support color. Explain where each should appear. Give two candidate palettes and identify every text/background pair and button pair that must be checked for contrast. Do not claim a WCAG pass from visual judgment or invent measured contrast ratios.
If the existing brand color is weak for text, it can still appear as a border, illustration accent, or large decorative area. Do not force it into every role simply because it is on the logo.
Test combinations, not swatches
Put the proposed colors on a real page fragment: a paragraph with a link, a heading, a primary button, a card, and a warning message. Check each foreground/background combination separately. A button’s label may pass on its fill while a pale link fails on the page background.
For WCAG 2.2 Level AA, the W3C contrast guidance sets a 4.5:1 minimum for normal text and 3:1 for large text, with specific exceptions. Use a contrast checker for the rendered colors; ChatGPT’s estimate is not a measurement. Also inspect focus indicators and non-text controls under the relevant accessibility criteria.
Revise the role that failed
Suppose the action color works as a button background with white text but fails as a text link on white. The answer need not be an entirely new palette. Keep the button color and choose a darker link color, or use another visual cue for the link. Similarly, a support color may work for a card background while being too weak for its caption.
- Reading surface: Can long paragraphs be read without strain?
- Actions: Is the button label clear in default, hover, focus, and disabled states?
- Links: Can readers identify them in body text without guessing from color alone?
- Messages: Do warnings include words or icons, so meaning does not depend only on hue?
- Consistency: Does the same color mean the same thing across pages?
Save the decisions as a small system
Record each approved color with its role and the combinations that were checked. Apply those roles through the site’s theme styles or design tokens. When a new page needs a color, choose from the system first. Ask ChatGPT to critique a specific new use, but keep the measured contrast results and final visual decision in the human review.
