Color Palette + Contrast Checker

How to Use the Color Contrast Checker

1. Generate a palette — pick a harmony mode, click Generate, and lock colors you love.
2. Click any swatch to copy its hex code for your CSS or design tool.
3. Check contrast: set your text and background colors in the checker below.
4. Read the grades — green AA means your body text is accessible; AAA is the gold standard.
5. Preview real text rendered in your exact colors before you commit.

A color contrast checker belongs in your workflow at two moments: when choosing brand colors, and when reviewing any design before it ships. Thirty seconds here prevents the most common accessibility lawsuit trigger on the web.

Features That Set This Tool Apart

• Four harmony modes. Analogous, complementary, triadic, plus a wild random mode for exploration.
• Lockable swatches. Keep the colors you love while regenerating the rest around them.
• Click-to-copy hex. Every swatch copies instantly; “Copy All” grabs the full palette.
• True WCAG 2.1 math. Relative luminance and contrast ratios computed exactly per spec — not estimates.
• Four grades at once. AA, AAA, AA Large, and AAA Large, each with its threshold shown.
• Live text preview. See headings and body copy in your colors, not just numbers.
• Private. Everything computes locally in your browser.

WCAG Contrast Ratios, Demystified

WCAG (Web Content Accessibility Guidelines) defines contrast as a ratio from 1:1 (identical colors) to 21:1 (black on white). For normal body text, AA requires 4.5:1 and AAA requires 7:1. Large text — 18pt (24px) or 14pt (18.66px) bold and up — gets relaxed thresholds: 3:1 for AA, 4.5:1 for AAA. Logos and purely decorative elements are exempt, but everything a user must read is not. The W3C’s technique G18 documents exactly how the ratio is calculated from relative luminance.

These numbers are not arbitrary bureaucracy — they map to real human vision. Roughly 1 in 12 men has some color vision deficiency, and far more people browse in bright sunlight, on dimmed screens, or with aging eyes. A 4.5:1 ratio is the point where text stays legible for the vast majority of those situations. This color contrast checker uses the identical luminance formula the guidelines specify, so a passing grade here means a passing grade in any audit tool. Aim for AA everywhere as the legal baseline; push key content toward AAA where your palette allows it.

Building Palettes That Stay Accessible

• Start with text pairs, not swatches. A beautiful five-color palette is useless if no combination passes AA. Check your body-text pair first — it is the pair your users will stare at the longest.
• Design in pairs. Every text color needs an assigned background; “it works on white” is not a system.
• Use lightness, not just hue. The easiest accessible palettes pair dark text on light tints or light text on dark shades of the same hue.
• Reserve pure decoration. Borders, dividers, and large graphics can use low-contrast colors — text cannot.
• Test the states. Hover, focus, disabled, and placeholder text all need checking, not just the default state. Disabled buttons are the most common offender — faded gray text on a faded gray background fails almost every time.
• Dark mode is a second palette. Flipping backgrounds without re-checking ratios is how dark modes ship broken.

Contrast Mistakes Designers Keep Making

• Gray-on-white body text. #999 on white is 2.85:1 — it fails AA badly, yet it ships everywhere. Use #595959 or darker.
• Placeholder as label. Light placeholder text fails contrast and vanishes when typing — use real labels.
• Brand color as text. Your vibrant brand blue may pass as a button background with white text, but fail as text on white. Check both directions.
• Trusting the mockup. Design tools on calibrated monitors lie; the ratio does not. Verify with a color contrast checker, not your eyes.
• Forgetting focus states. Keyboard users navigate by focus rings — invisible focus is a failed experience.
• One check, then done. Palettes drift as products evolve. Re-check whenever colors change.

Contrast Pro Tips

Test both light and dark themes — a pair that passes on white can fail badly on dark backgrounds. Remember the large-text exception: WCAG requires 3:1 for text over 18pt (or 14pt bold) instead of 4.5:1, which gives headlines more design freedom. Check interactive states too — placeholder text, disabled buttons, and hover colors are the most common real-world failures. Never rely on color alone to convey meaning; pair it with an icon or label for color-blind users. Finally, verify contrast on actual devices, because screen brightness and blue-light filters shift perceived ratios.

Color Contrast Checker: Frequently Asked Questions

What is a good contrast ratio for text?

Aim for at least 4.5:1 for normal text (WCAG AA) and 7:1 for AAA. Large text — 24px, or 18.66px bold and larger — needs 3:1 for AA. This color contrast checker grades all four thresholds live, so you can see exactly where your color pair stands instead of guessing from how it looks on your screen.

How is the contrast ratio calculated?

Per the WCAG specification: each color’s relative luminance is computed from its red, green, and blue channels (with more weight on green, matching human vision), then the ratio is (lighter + 0.05) / (darker + 0.05). The result ranges from 1:1 to 21:1. This tool implements that exact formula — the W3C technique G18 reference linked above documents it.

Do I need AAA or is AA enough?

AA is the legal and practical baseline — it is what the ADA, the European Accessibility Act, and most procurement policies reference. AAA is the enhanced tier: admirable for body text where achievable, but the guidelines themselves note it cannot apply to all content and all designs. Ship AA everywhere; reach for AAA on critical reading text.

Does this work for dark mode?

Yes — contrast math is direction-agnostic. Enter your light text color and dark background and the ratio computes identically. Dark mode actually makes checking more important, because teams often flip backgrounds without re-verifying pairs. Use the swap button to test both directions of any pair in one click.

Are my colors uploaded anywhere?

No. Palette generation and every contrast calculation happen in your browser with plain JavaScript — no network requests at all. Your brand colors never leave your device, which makes this safe to use for unreleased products and client work under NDA.

Related Free Tools

• Image Compressor — optimize the images your palette will sit beside.
• Meta Title & Description Generator — make your accessible pages discoverable too.
• QR Code Generator — high-contrast QR codes scan more reliably.
• All Free Tools — browse the complete collection of free tools on GetAnythingPro.

Accessible color is not a constraint on good design — it is what makes good design actually work for everyone. Use this color contrast checker to generate palettes you love and verify every text pair before it ships. Your future self, defending the design in an accessibility audit, will thank you.