Accessible Color Palettes

Inspiration is not accessibility certification

The four generated swatches are creative starting points. They are not pre-certified for accessibility, and no Vivid, Soft, or Nocturne palette is guaranteed to meet a particular contrast requirement without testing its actual use.

Accessibility depends on relationships: a foreground against a background, a control against adjacent colors, one chart mark beside another, and color together with labels and structure. A hex value cannot pass or fail in isolation.

What a contrast ratio describes

A contrast ratio compares the relative luminance of two colors. Relative luminance estimates perceived light output from the red, green, and blue channels rather than simply averaging their numeric values. Identical luminance produces a ratio of 1:1; the maximum for black and white is 21:1.

You do not need to calculate it by hand. Use a current browser accessibility panel or a reputable contrast checker, and enter the exact six-digit foreground and background hex values. If opacity, a gradient, an image, or a blend mode changes what is visible, sample and test the resulting color instead of the original chip.

WCAG 2.2 minimums to know

At WCAG 2.2 Level AA:

• normal text needs at least 4.5:1 contrast with its background;
• large text needs at least 3:1; and
• visual information needed to identify user-interface components and meaningful graphical objects generally needs at least 3:1 against adjacent colors.

“Large text” has a technical definition that depends on size and weight. Use the official large-scale text definition rather than guessing from appearance. The W3C's Understanding Contrast Minimum page explains the text criterion, exceptions, and rounding. The complete standard is WCAG 2.2.

A passing contrast pair does not make an entire website, document, or product conformant. Semantics, headings, alternatives for images, keyboard access, focus behavior, labels, error handling, motion, reading order, and other requirements still matter.

Audit the palette in context

1. Inventory every meaningful pair

List each foreground and background combination: body text, headings, links, button labels, icons, input borders, placeholders, focus indicators, chart marks, captions over images, and printed small type. Record the exact hex values rather than informal color names.

2. Test every interactive state

Default is only one state. Test hover, keyboard focus, active, selected, disabled, success, warning, and error states. If a state change is visible only because a button becomes a different color, add another cue such as an outline, icon, text, or shape.

3. Test the real type treatment

A pair that qualifies for large text may fail for body copy. Test the size and weight you will actually ship. Zoom the page, enlarge text, and check whether content clips, overlaps, or loses its colored container. Contrast and reflow are separate questions.

4. Remove color mentally—or literally

Look at a greyscale view. If categories, required fields, errors, links, or statuses become ambiguous, color is carrying too much meaning. Reinforce it with labels, underlines, patterns, icons, shapes, or consistent position.

Color-vision simulation can reveal likely collisions, but one simulation cannot represent every person's vision or prove accessibility. It is an inspection aid, not a certificate.

5. Check light and dark contexts separately

Do not assume that reversing the theme preserves contrast. A color used for text on white may need a different shade when placed on near-black. Images, shadows, translucent surfaces, and system high-contrast modes can create additional contexts.

6. Combine automated and human review

Automated tools calculate ratios and flag many common problems. Keyboard testing, magnification, screen-reader review, high-contrast settings, and feedback from people using the design reveal problems that a numeric checker cannot understand.

What the generated card does

For each displayed and exported swatch, the site calculates relative luminance and chooses either near-black #17191D or near-white #F7F8FA for overlaid text. That is a purposeful readability aid for the fixed card design.

It does not certify every external use of the swatch. Your project may use smaller type, a different weight, transparency, a photograph, or another background. Test its exact visible pair. If you modify the hex or switch mood, test again.

Adapt a failing combination

Keep the swatch and change the text neutral

Try #17191D and #F7F8FA against each generated hex, then measure. A dedicated neutral often protects readability better than using one palette color as text over another.

Move the color away from essential text

A low-contrast color can remain valuable as a large decorative field, illustration fill, generous border, or background texture while a separate neutral container holds the content. Accessibility does not require removing a favorite color; it may require changing its job.

Add a boundary

When a button, input, focus ring, or chart mark blends into its surroundings, add a measured contrasting border, outline, spacing gap, or container. Test the boundary against the adjacent color, not just the element's interior.

Adjust lightness deliberately

If the precise swatch must carry text or a control, create a darker or lighter functional derivative and test it. Document the new hex separately so collaborators do not confuse it with the original chart output. Preserve the original swatch for decorative use if that distinction matters.

Add redundant cues

A red-versus-green status needs text or icons. Chart series need labels, line styles, point shapes, or patterns. Links inside paragraphs usually need more than a subtle color shift. Required fields and errors need words that explain what to do.

Do not treat mood as an automatic fix

Soft raises the luminance of many swatches and Nocturne lowers it, so one can create a better starting pair with a chosen neutral. But the transformation applies to every color and does not target a WCAG threshold. Switching mood always creates new hex values that must be tested.

A compact worked process

Suppose a project uses one chart swatch as a card background and another as body text:

1. Test those exact two hex values.
2. If the pair fails, keep the background and test #17191D, then #F7F8FA.
3. If neither fits the visual direction, place the copy in a neutral panel and use the second swatch for a border or illustration.
4. Test headings, body copy, links, icons, and focus indicators separately.
5. View the card without color and confirm that its structure and meaning remain clear.
6. Repeat after any mood, opacity, background, or type-size change.

This sequence preserves the palette while refusing to sacrifice information.

Print and exported documents

WCAG's contrast formula addresses digital content, while printed output introduces paper, ink, lighting, dot gain, and production variation. A screen pass does not guarantee a legible print. Make a physical proof at final size on the intended stock, inspect it under realistic light, and check a greyscale copy.

An exported image or PDF also needs more than good color if it contains meaningful information. Consider text alternatives, document structure, reading order, selectable text, and a plain-text equivalent where appropriate. An image of a palette should not be the only place essential instructions exist.

Related guides

• Using Your Palette — assign practical color roles
• Mood Guide — understand how every hex changes
• Save, Share, and Print — prepare exports and physical proofs
• Color Reference Method — separate approximate labels from specifications
• Open the calculator — copy the exact rendered hex values

Corrections and contact

If a threshold, link, or description in this guide needs correction, email info@pantonebirthchart.com. Accessibility feedback is especially welcome.