Build a palette from one colour, check real WCAG contrast math against it, and see how it holds up under colour blindness — not just a pass/fail badge, but why.
Read the CSS colours lessonEvery swatch shares the base colour’s saturation and lightness — only the hue rotates around the colour wheel.
Click a swatch to copy its hex code.
The same hue and saturation, lightness stepped from near-white to near-black.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
A ratio can pass WCAG and still be a real problem — two colours that are only distinguished by hue can become indistinguishable here, even with a fine numeric contrast.
The quick brown fox jumps over the lazy dog.
An approximation (a common web-simulator matrix applied to sRGB directly) — good enough to show a real problem, not a clinical diagnostic tool.
:root {
--color-base: #3366ff;
--color-scheme-1: #3366ff;
--color-scheme-2: #ffcc33;
--color-text: #111827;
--color-background: #ffffff;
}Relative luminance: #111827 (text) vs #ffffff (background) — the ratio is (lighter + 0.05) / (darker + 0.05).