Skip to main content
Back to Colors generators

Colors

Random Color with Contrast Preview

Used by developers, writers, and creators worldwide.

The random color with contrast preview generator produces hex colors and instantly shows how each one performs against both black and white backgrounds — contrast ratio included, no tab-switching required. Designers, front-end developers, and accessibility engineers use it to skip the copy-paste loop between color pickers and WCAG checkers. A color can look vibrant on screen and still fail the 4.5:1 AA threshold for normal text. Generate up to a custom count of colors at once, see the ratios calculated against #FFFFFF and #000000 side by side, and pull only the values that already pass. It's the fastest way to source accessible hex codes during early palette exploration.

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 Number of Colors input to how many hex values you want evaluated in one batch.
  2. Click Generate to produce that many random hex colors with their black and white contrast ratios.
  3. Scan the results for colors where at least one contrast ratio meets or exceeds 4.5:1 for normal text use.
  4. Copy the hex code of any passing color directly into your design tool or CSS stylesheet.
  5. Regenerate as many times as needed until you find colors that fit your palette and pass your target ratio.

Use Cases

  • •Auditing 12 candidate brand colors for WCAG AA compliance before presenting to a client
  • •Finding a passing accent color for a dark-mode Tailwind component when existing tokens all fail
  • •Generating accessible placeholder hex codes to populate a Figma design system token set
  • •Sourcing readable CTA button colors for an HTML email campaign without a separate contrast checker
  • •Quickly validating badge and tag colors in a Storybook component library against both backgrounds

Tips

  • →If you need a color that passes on both black and white, look for results where both ratios exceed 4.5 — these are rare but useful for versatile UI components.
  • →Generate a batch of 12 or more when building a data visualization palette; filter out any colors below 3:1 to ensure chart labels remain readable.
  • →Saturated mid-tone colors (think medium greens, purples, or oranges) almost never pass 4.5:1 on either background — skip them for body text and reserve them for decorative elements only.
  • →For dark-mode design, focus on the black-background column; a color that scores above 7:1 against black will comfortably meet AAA for dark interfaces.
  • →Once you find a passing hex, plug it into an HSL editor and shift only the lightness to create accessible tints and shades while keeping the same hue.
  • →Combine this generator with a font-size decision: if you plan to use text at 24px or above, a 3:1 ratio becomes acceptable, which opens up significantly more mid-range colors.

FAQ

what contrast ratio do I need to pass WCAG AA

WCAG AA requires at least 4.5:1 for normal text (under 18pt regular or 14pt bold) and 3:1 for large text. This generator calculates both ratios — against black and against white — so you can immediately see which pairing clears the threshold without doing any manual math.

why does a color pass on white but fail on black (or the other way around)

Light colors have high relative luminance, so they contrast more strongly against black. Dark colors do the opposite. Mid-range tones — a medium teal or a muted orange, for example — often fail both. If you need a single color that works on either background, look for values near the luminance extremes.

can I use the hex codes this generator outputs directly in CSS or Tailwind

Yes. Every result is a standard six-digit hex code you can paste straight into a CSS color property, a Tailwind arbitrary value like bg-[#a34f2c], or a Figma fill. No conversion needed — copy the hex and drop it in.