A palette that looks beautiful in your design tool can still be unreadable for real users — low contrast text, or information conveyed by color alone, shuts out a meaningful slice of your audience. The good news: accessible and attractive are not in tension. With a little color theory and one number (the contrast ratio), you can have both.
Step 1 — Pick a base color and build harmony
Every palette starts with one color. From there, a harmony rule gives you a coherent set:
- Complementary — the hue opposite on the color wheel (base + 180°). Maximum contrast; great for calls-to-action.
- Analogous — neighbours (base ± 30°). Calm, cohesive, low tension.
- Triadic — three hues 120° apart. Balanced and vibrant.
- Monochromatic — one hue at different lightnesses. Clean and easy to keep accessible.
In the Color Picker, enter a base like #6D5DFC, pick a harmony, and grab the 11-step shade scale for your design tokens (background, surface, border, text). You can even use the screen eyedropper to sample a color from a brand asset or screenshot.
Step 2 — Understand contrast ratio
Contrast ratio measures the luminance difference between two colors, from 1:1(identical) to 21:1 (black on white). WCAG sets minimums:
| Text | AA (required by law in most regions) | AAA (enhanced) |
|---|---|---|
| Normal (< 18px / < 14px bold) | 4.5:1 | 7:1 |
| Large (≥ 18px / ≥ 14px bold) | 3:1 | 4.5:1 |
| UI components & graphics | 3:1 | — |
WCAG 2.1 Level AA is the bar referenced by the ADA (US), EN 301 549 (EU), and AODA (Canada), so it is the practical target for most projects.
Step 3 — Fix failing pairs
Here is where good-looking palettes trip up. A mid-gray like #999999 on white looks fine but gives only 2.85:1 — it fails AA for normal text. Nudge it darker to #767676 and you get exactly 4.54:1 (a bare AA pass); go to #595959 for 7:1 and you clear AAA. The Contrast Checker shows the exact ratio, the AA/AAA verdict for each text size, and suggests the nearest passing color so you do not have to guess.
Worked example: brand purple #6D5DFC as a button background with white text gives about 4.9:1 — it passes AA for normal text. The same purple as text on a white background is the same ratio, so it works for headings but is borderline for long body copy; darken it slightly for dense text.
Step 4 — Don't rely on color alone
Around 8% of men have a color-vision deficiency, most commonly red-green (Deuteranopia/Protanopia). If your only signal for "error" is red text, those users miss it. Pair color with an icon, label, or pattern, and use the Contrast Checker's color-blindness simulation to preview how your palette looks to affected users.
Why this helps SEO and UX together
Accessible contrast is both a legal/ethical baseline and a usability win — readable text lowers bounce and raises engagement. Accessibility is also increasingly a quality signal search engines care about. It costs almost nothing to get right when you check as you design.
Frequently asked questions
What contrast ratio should I aim for? Target AA (4.5:1 normal, 3:1 large) as a minimum; aim for AAA (7:1) on body copy where you can.
Do I need to check every color pair? Check every pair that actually renders as text-on-background or a meaningful UI element against its background. The Contrast Checker's palette matrix does this for a whole palette at once.
Is pure black on pure white best? It is the maximum 21:1, but many designers find it harsh; near-black (e.g. #1a1a1a) on off-white is comfortable and still well above AAA.
Related tools: Color Picker · Contrast Checker · Image Compressor