RandomA11y for accessible color combinations

Tool powered by RandomA11y on RandomA11y.

Browse RandomA11y for WCAG contrast-safe pairs and accessible color combinations. Generate random foreground and background sets.

What is RandomA11y?

RandomA11y at https://randoma11y.com/ is an accessible color combination explorer: it surfaces foreground and background pairs filtered for common WCAG color contrast expectations so you can browse or generate random sets without hand-calculating every ratio. Teams use it for accessible palette inspiration before they map roles in a design system or theme file. This page includes the public app next to /colour-contrast-checker and /accessible-brand-colors so you can shortlist pairs and re-validate in your real UI.

What you can do in the tool

Discovery and handoff for contrast-aware color work on randoma11y.com.

  1. Browse accessible color combinations: Explore a large catalog of pairs that already pass common contrast bars for digital text.

  2. Generate random contrast-safe pairs: Refresh candidates when you need new accessible palette directions for prototypes.

  3. Copy values into your stack: Paste hex or other outputs from the live site into Figma variables or CSS when exposed.

  4. Seed light and dark themes: Use pairs as starting points before you expand into full semantic token sets.

  5. Pair with dedicated checkers: Follow up on /colour-contrast-checker for final QA on the type sizes and weights you ship.

How to use RandomA11y

Treat suggestions as a first pass, then validate in product context.

  1. Match real text styles

    Compare candidates at the font size and weight you use in production, not only defaults.

  2. Test worst-case backgrounds

    Re-check pairs on images, gradients, or tinted surfaces where contrast can drop.

  3. Name semantic tokens

    Map accepted colors to roles like text.primary and surface.default before handoff.

  4. Regression-test after tweaks

    Small hue shifts can break related pairs—retest critical screens when themes change.

Tips for accessible color in UI

Contrast ratios help; perceived readability and brand tone still need review.
  • 01

    Check non-text elements

    Icons, borders, and focus rings may need separate WCAG graphics checks.

  • 02

    Balance brand and accessibility

    A passing pair can still feel off-brand—adjust saturation while keeping ratio targets.

  • 03

    Document AA vs AAA goals

    Note which text styles require which level so future edits stay intentional.

  • 04

    Respect system settings

    Forced-colors and high-contrast modes can change how pairs render—test on target OS settings.

Who RandomA11y is for

Anyone who needs many contrast-safe options without building spreadsheets from scratch.

  • Product and marketing designers

    Prototype landing pages where text must stay readable on first review.

  • Indie and startup teams

    Ship accessible color defaults without a dedicated color specialist.

  • Developers theming UIs

    Seed themes with pairs more likely to pass automated contrast checks in CI.

  • Design system triage

    Explore accent hues that still fit WCAG color contrast rules beside existing tokens.

Benefits of using RandomA11y

Embedding keeps accessible inspiration beside the rest of your color toolkit.

  • Faster ideation than manual math

    Iterate on feel while first-pass contrast is already in range.

  • Consistent with checkers

    Jump to /colour-contrast-checker for deeper controls when needed.

  • Single tab for reviews

    Stakeholders open the tool during calls instead of cloning private files.

  • No upstream changes

    This site does not modify RandomA11y; behavior stays on randoma11y.com.

Frequently Asked Questions

Quick answers about this tool—open a question to read more.