The useful result
Produce a five-colour palette in which every text and background pair passes WCAG contrast.
- Produce a five-colour palette in which every text and background pair passes WCAG contrast.
An assistant will produce a lovely five-colour palette in seconds and describe it in poetic terms. It cannot tell you whether light grey text on white is readable for someone with low vision. That depends on the contrast ratio, a number you can measure.
The Web Content Accessibility Guidelines set the benchmark: at least 4.5:1 for normal text and 3:1 for large text, where large means 18 point or 14 point bold. Logos and purely decorative text are exempt. Use AI for ideas and a free checker for proof.
The examples below are illustrative exercises, not recorded results from any tool. Sources were checked on 24 October 2026; menus, limits and prices change, so confirm details on the linked pages.
Before you start
- A short description of your brand mood
- A free contrast checker (search for “WCAG contrast checker”)
- A note to record your final hex codes
Review evidence
Documentation-based review · 2026-10-24
Primary documentation and official guidance checked on 24 October 2026. Examples, checks and exercises are original illustrations, not recorded tool tests. Cover artwork is a conceptual illustration.
Ask for roles and hex codes, not just colours
Describe the mood in three words, the audience and where the colours will appear. Ask for five colours with hex codes, each with a role: background, body text, heading, primary button and accent. Roles tell you which pairs must be checked.
Suggest a five-colour palette for [brand or project] with a [three mood words] feel for [audience]. Give hex codes and a role for each: page background, body text, heading, primary button, accent. Also list every text-on-background pair I will use and mark which should be large text. Do not claim contrast ratios; I will measure them.Example / expected result
Illustrative example; not a recorded model result.
“Background #FFFFFF, body text #1F2937, heading #0F766E, button #0F766E with white text, accent #F59E0B.”
Check your result
You have five hex codes, each with a named role.
Measure every pair with a contrast checker
Enter each text and background pair into the checker. Normal text needs at least 4.5:1, large text at least 3:1. As a known example, mid-grey #999999 on white is about 2.85:1 and fails, while #767676 on white is about 4.5:1 and just passes. Record the ratio beside each pair.
Check your result
Every body-text pair is at least 4.5:1 and every large-text pair at least 3:1.
Fix failing pairs by changing one colour
For each failing pair, darken the text or lighten the background in small steps until it passes, then re-check. Keep text colours dark enough on your lightest background and test coloured buttons with their label colour. Save the final codes and the passing ratios as your palette note.
Check your result
Your palette note lists final hex codes and the measured ratio for each pair.
When it goes wrong
Contrast ratio is only one part of accessibility; colour alone should never be the only signal. Screens vary, so test on a phone. Logos and decorative text are exempt from the rule, but a logo that works as a control is not.
Make it your own
Choose a palette for a fictional café, measure all text pairs, fix any failures and write the final ratios in a note. Show it to someone who reads on a small phone screen.
Useful next resources
Sources and review
Last checked Oct 24, 2026. Features and account limits can change. Verify important results against your original material.
Did this help you complete your task?
Tell us what needs improving. No account or private output required.
Report incorrect information or a broken linkGenius Forges Editorial
Practical AI lessons with checked sources, labelled examples and human verification.
