Tool / Colors + contrast
Color playground.
Pick a starting color. Build a palette. Find text that reads clearly.
Keep your text readable.
Compare white and CodeLab ink text against your primary color. The preview uses the stronger combination.
Good ideas. Working code.Small experiments. Clear, readable text.
—White text
—Ink text (#0b0b0c)
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. Ratios here use the exact colors before rounding. Read the contrast guide
Take the colors with you.
Copy these variables into your CSS, then use a color with var(--primary).
Click a swatch to copy its hex value.
TRY THIS
Make the starter your own. Copy a new primary color, open the coding playground, and replace #0057ff in the CSS.