color palettesField notes.
Practical ideas for choosing colors, giving them purpose, and making sure the words stay readable.
Give every color a job. ↗
Turn a five-color palette into a useful website system, with explicit roles, a worked example, contrast checks and CSS tokens.
02 / MethodologyWhat a contrast ratio actually tells you. ↗
Understand how we calculate WCAG 2.2 contrast, normal and large text thresholds, exact pass/fail decisions and what the tool cannot verify.
03 / Working with dark colorBuild a dark palette with intention. ↗
Use a worked dark website palette to choose backgrounds, surfaces, readable text and button labels. Includes exact contrast examples and common mistakes.
04 / Working with light colorSoft colors. Clear words. ↗
Use pastel fills without losing readable text. A worked Rosewater palette shows which roles suit pale colors and which pairings need a darker anchor.
05 / TroubleshootingKeep the color. Fix the pairing. ↗
A practical workflow for failing text contrast: identify the pair, change its role, adjust the foreground and verify the actual exported hex color.
06 / A complete worked exampleOne brand. Two considered themes. ↗
Keep a fixed brand hex while building light and dark website tokens. A worked #6750A4 example with actual contrast checks, repair tradeoffs and paired-theme CSS.