Skip to main content
Back to Colors generators

Colors

Accessible Color Pair Generator

Used by developers, writers, and creators worldwide.

The accessible color pair generator takes the guesswork out of WCAG compliance by producing verified foreground and background combinations at the contrast level you choose. Contrast failures are the most common accessibility defect found in web audits — and the most avoidable. Designers, developers, and content teams use this tool to skip manual ratio checks and get straight to building. Set your target level — AA (4.5:1) for standard body text, AA Large Text (3:1) for headings, or AAA (7:1) for high-stakes interfaces like healthcare dashboards. Use the Style input to steer results toward dark-on-light, light-on-dark, or colorful palettes, so pairs are compliant and visually coherent. Every result shows the exact contrast ratio alongside hex codes, ready for a compliance audit or client handoff.

Loading usage…

Free forever — no account required

How to use

  1. Choose your options above
  2. Click Generate
  3. Copy your result

Detailed instructions

  1. Set the WCAG Level dropdown to AA, AA Large Text, or AAA based on your compliance target.
  2. Choose a Style to filter results toward a visual tone that fits your project's aesthetic.
  3. Click Generate to produce a list of verified foreground and background color pairs with contrast ratios.
  4. Click a result to copy the hex codes, then paste them into your CSS, design file, or token library.
  5. If results don't match your palette direction, change the Style setting and regenerate until you find usable pairs.

Use Cases

  • •Setting body text and background tokens in a Tailwind or CSS custom-properties design system to meet WCAG AA
  • •Selecting button label and fill colors in a Figma component library before handing off to engineering
  • •Sourcing AAA-level pairs for a healthcare or legal application where maximum legibility is required
  • •Generating accessible heading colors for a Storybook component at the AA Large Text (3:1) threshold
  • •Finding compliant dark-on-light pairs for a government or public-sector web portal ahead of an accessibility audit

Tips

  • →Use AA Large Text for headings only — don't apply the relaxed 3:1 threshold to paragraph text, even if it's technically large.
  • →Generate a batch in AAA mode and filter by style: AAA pairs are a strict subset, so any AAA pair also passes AA if you later relax requirements.
  • →When matching brand colors, generate with a neutral Style first, then compare hues visually to find pairs closest to your brand's existing primaries.
  • →Always check generated pairs against a dark-mode background too — a pair that passes on white may fail on a dark grey surface (#1a1a1a is not the same as #000000).
  • →For data visualizations, run each category color against your chart's background separately; a palette that's accessible in isolation can fail when colors appear adjacent to each other.
  • →Save passing hex codes as CSS custom properties immediately — accessible palettes are easy to lose track of across multiple generated sessions.

FAQ

what contrast ratio do I need for WCAG AA compliance

WCAG AA requires at least 4.5:1 for normal body text (under 18pt regular or 14pt bold) and 3:1 for large text. AA is the level referenced in most accessibility laws, including the ADA and EN 301 549, so it's the right target for most public-facing websites and apps.

when should I use AAA instead of AA for color contrast

Choose AAA (7:1) when your content is critical or your audience includes users with significant visual impairments — think medical dashboards, legal documents, or emergency alerts. Most teams apply AAA selectively to body text and use AA for UI controls, since satisfying 7:1 across an entire palette is difficult.

can I paste these hex codes straight into CSS or a design tool

Yes. Each result gives you hex codes you can drop directly into CSS custom properties, a Tailwind config, or Figma's color styles. If you need RGB or HSL instead, run the hex through a color converter after generating — the contrast ratio stays valid regardless of format.