Color Palette & Contrast Checker
Create complementary, analogous, and triadic palettes from a base color. Each swatch includes approximate WCAG contrast ratios for black and white text.
Build a color palette
Contrast ratios are calculated against opaque sRGB swatches. Check your final text/background pairs and do not use color alone to communicate meaning.
What this tool helps with
Choosing coordinated colors and checking readable text contrast can slow down web and interface design.
How to use it
- Choose a base color or enter a six-digit HEX value.
- Select a complementary, analogous, or triadic harmony.
- Copy a swatch and check its displayed black/white contrast ratio before using it.
Requirements
A modern browser with JavaScript enabled. Color calculations run locally.
Limits and privacy
The contrast ratios use the WCAG relative-luminance formula for opaque sRGB colors. This is a planning aid; verify final foreground/background pairs and do not rely on color alone to communicate meaning. Inputs are processed locally in this browser. The site does not provide an upload endpoint for this tool.
Frequently asked questions
Does the tool upload my color choices?
No. Color calculations happen in this browser tab.
Which palette types are included?
Complementary, analogous, and triadic hue rotations.
Does the ratio guarantee accessibility?
No. Check the actual text size, weight, background, UI state, and applicable accessibility criteria in the finished design.
Step-by-step guide
Build a color palette and check text contrast →