Accessible Color Combinations Library: 50 WCAG‑Tested Palettes with Downloadable Swatches

Overview

Contrast is a relationship between two colors, not a quality that belongs to one color by itself. A dark blue may work well as text on a pale surface but fail when placed on a mid-tone blue button. Test every important foreground-and-background pair in its actual context.

For a working WCAG 2 contrast review, use these thresholds as a starting point: normal-size text generally needs a ratio of at least 4.5:1 for AA and 7:1 for AAA. Large text generally needs at least 3:1 for AA and 4.5:1 for AAA. Interface components and meaningful graphical objects have separate considerations, so do not treat a passing text ratio as approval for an entire interface.

The library below uses a dark text or control color, a light background, a secondary color, and an accent. Ratios are reference values for the primary foreground/background pairing and should be rechecked in your chosen contrast checker before publication, especially when opacity, gradients, images, thin type, or font changes are involved. The secondary and accent colors are design roles, not automatic text recommendations.

50 accessible palette starting points

For downloadable swatches, copy each hex value into your design tool and export the collection as ASE for Adobe workflows, ACO for Photoshop color swatches, GPL for applications that support GIMP palettes, and SVG or PNG for visual references. Keep the hex list as the source of truth so every format can be regenerated after a color change. A palette preview is not a substitute for testing text over the exact production background.

Checklist by scenario

Websites and applications

• Assign explicit roles: text, surface, border, link, button, focus indicator, success, warning, and error.
• Test body text, headings, placeholder text, navigation, disabled states, and button labels separately.
• Check hover, active, focus, selected, and error states rather than testing only the default screen.
• Pair color with wording, icons, patterns, or position so meaning does not depend on color alone.

Branding and social graphics

• Choose one dependable dark color and one dependable light surface before adding expressive accents.
• Test the palette on small text, mobile screens, compressed images, and both light and dark surroundings.
• Document approved pairings instead of presenting a loose row of attractive swatches.

Posters and print

• Check the intended paper, ink, finish, and viewing distance with a proof.
• Do not assume that a screen-passing combination will reproduce identically in print.
• Prioritize hierarchy: title, essential details, call to action, and supporting information should remain distinguishable.

For a print-focused workflow, see the poster color palette guide. For digital canvas planning, the aspect ratio guide helps you test layouts at their intended size.

What to double-check

1. Actual contrast: Run the final hex, RGB, or CSS values through an accessible color palette checker. Recheck colors altered by opacity, overlays, gradients, or image backgrounds.
2. Text size and weight: Large text may use a different threshold, but thin or delicate lettering can be harder to read than its nominal size suggests.
3. Component boundaries: A button may need enough contrast against its surrounding surface, while its label needs contrast against the button fill.
4. Non-color cues: Links, warnings, selected items, and charts need labels, underlines, icons, patterns, or other cues where color alone could be ambiguous.
5. Export consistency: Compare ASE, ACO, GPL, SVG, and PNG previews against the original values. Name swatches by role as well as by hex value.
6. Licensing and ownership: The colors themselves do not create a license issue, but any accompanying vectors, textures, fonts, or illustrations may. Use the design asset licensing guide when adding other downloadable assets.

You can also use the broader accessible color combinations guide when building a complete UI color system rather than selecting a single pair.

Common mistakes

• Testing only the brand colors: Brand colors may be suitable for large areas or decoration but fail as small text. Create dedicated text and surface roles.
• Using a passing ratio as a complete accessibility review: Contrast does not assess keyboard access, focus visibility, wording, motion, reading order, or screen-reader behavior.
• Putting light text on a bright accent: Saturated yellow, orange, lime, and cyan often look strong as accents but need careful testing as text backgrounds.
• Ignoring states: A default button can pass while its hover, disabled, or focus version becomes difficult to see.
• Relying on a screenshot: Screenshots hide selectable text, responsive behavior, and the effect of real content. Test the implementation.
• Exporting without a source file: Keep a named master palette so a tool update or revised brand color can be distributed consistently.

When to revisit

Return to this library before each new website, app release, campaign, poster series, or seasonal content cycle. Recheck the palette whenever a brand color, typeface, component size, background image, or design tool changes. A small change to a button fill can alter its contrast with both its label and its surrounding surface.

Editors should refresh the reference calculations if WCAG thresholds, contrast-testing algorithms, or accepted testing guidance changes. Export instructions should be reviewed when major design tools add or remove palette formats. New seasonal and community-submitted palettes can be added quarterly, provided every proposed pairing is tested and its intended role is documented.

Before you publish, copy this one-page checklist into the project brief:

• □ Primary text and background pair tested.
• □ Large-text and normal-text results recorded.
• □ Links, buttons, borders, icons, and focus states checked.
• □ Hover, active, disabled, error, and success states checked.
• □ Meaning is not communicated by color alone.
• □ Light and dark surfaces, images, gradients, and overlays reviewed.
• □ Print proof or real-device review completed where relevant.
• □ ASE, ACO, GPL, SVG, and PNG exports match the master palette.
• □ Palette roles, contrast results, date, and tool used recorded.

Save the checklist with the palette files and revisit it after every substantial design change. For related color exploration, use the color palette generator guide or learn how to build a palette from an image without losing control of accessible pairings.