Creating Accessible Color Palettes for Your Website Brand

Learn how to build a brand color palette that looks great and meets accessibility standards so your WordPress website is readable for all visitors.

Why Accessible Color Palettes Matter

Your brand colors do more than make your website look good. They affect readability, usability, and whether visitors with visual impairments can actually use your site. An accessible color palette balances brand personality with clear contrast between text and background.

Compass Production designs with accessibility in mind, but this guide helps you understand the basics so future updates stay on-brand and compliant.

Key Terms to Know

• Contrast ratio: A number that describes how different two colors are in brightness. Higher ratios mean easier-to-read text.
• WCAG: Web Content Accessibility Guidelines. These define minimum contrast levels.
• AA level: The most common accessibility target for business websites.
• AAA level: A stricter standard, ideal where maximum readability is needed.

WCAG Contrast Requirements (Quick Reference)

• Normal text (body copy): At least 4.5:1 contrast ratio (AA).
• Large text (18px+ regular or 14px+ bold): At least 3:1 (AA).
• UI elements and icons (buttons, form fields, etc.): At least 3:1 against adjacent colors.

Step 1: Start from Your Existing Brand Colors

If you already have brand colors (from a logo or print materials), start there. List:

• 1–2 primary brand colors
• 1–3 secondary or accent colors
• Current background color (often white or very light gray)

Note the HEX codes for each color (for example, #0055A4). These are what you will test for contrast.

Step 2: Define Functional Color Roles

Instead of thinking only in terms of “blue” or “green,” define what each color will do in your interface.

• Primary action color: Main buttons and key calls-to-action.
• Secondary action color: Less important buttons or links.
• Background colors: Page background, section backgrounds, cards.
• Text colors: Main body text, headings, muted text, links.
• Feedback colors: Success (green), warning (yellow/orange), error (red), info (blue).

Each role needs enough contrast against the colors it sits on (usually a background color).

Step 3: Test Color Contrast

Use an online contrast checker (for example, search for “WCAG contrast checker”) and test pairs of colors you plan to use together:

1. Enter the background color HEX code.
2. Enter the text or foreground color HEX code.
3. Check that the ratio meets at least 4.5:1 for normal text.

What You Should See

The contrast checker should show:

• A numeric ratio (for example, 5.2:1).
• Pass/Fail indicators for WCAG AA and AAA for normal and large text.

If a pair fails, adjust either the text color or background color until it passes.

Step 4: Build Accessible Text Color Pairs

For each main background you use on the site (for example, white, light gray, dark footer), define approved text colors that pass contrast checks.

Example Setup

• Background: #FFFFFF (white)
  • Body text: #222222 (very dark gray) – passes 4.5:1
  • Muted text: #666666 – check that it still passes 4.5:1
  • Links: #0055A4 – verify contrast with white
• Background: #111827 (dark footer)
  • Body text: #F9FAFB (near white)
  • Links: #38BDF8 (light blue)

Document these combinations in your brand guidelines so anyone editing the site knows which colors are safe to use.

Step 5: Design Accessible Buttons and Links

Buttons must be readable and clearly identifiable as interactive elements.

Button Contrast Rules

• Text vs button background: At least 4.5:1 for normal text.
• Button vs surrounding background: Aim for at least 3:1 so the button stands out.

Practical Button Setup

• Primary button
  • Background: your primary brand color
  • Text: white or very dark gray (whichever passes contrast)
• Secondary button
  • Background: transparent or light gray
  • Border: primary color
  • Text: primary color (check contrast with page background)

Step 6: Plan States and Hover Styles

Interactive elements need visible states: default, hover, active, and disabled. Each state must remain accessible.

For Links

• Use underline or a clear style difference from body text.
• On hover, change color and/or underline, but keep contrast above 4.5:1.

For Buttons

• Hover: Slightly darker or lighter shade of the button color.
• Active (pressed): A stronger shade change plus maybe a subtle shadow change.
• Disabled: Lower contrast is acceptable, but avoid using only color to indicate disabled state; also reduce opacity or add a pattern.

Step 7: Apply Colors in WordPress and Elementor

Once your palette is defined, set it up in WordPress so editors can reuse it consistently.

Set Global Colors in WordPress

1. Go to Dashboard ? Appearance ? Editor (Site Editor).
2. Click Styles (the half-filled circle icon).
3. Select Colors.
4. Add your brand colors under Palette (for example, Primary, Secondary, Accent, Background, Text).
5. Update your theme to save the palette.

Set Global Colors in Elementor

1. In the WordPress dashboard, go to Templates ? Theme Builder and open any template with Elementor.
2. In Elementor, click the hamburger menu (top left) ? Site Settings.
3. Click Global Colors.
4. Define colors for:
   • Primary (main brand color)
   • Secondary
   • Text / Body
   • Accent or Call to Action
5. Click Update to save.

What You Should See

When editing any page with Elementor:

• The color picker should show your named global colors at the top.
• Buttons, headings, and text that use global colors will update automatically if you later adjust the global palette.

Step 8: Document Your Accessible Palette

To keep your brand consistent, create a simple one-page reference that includes:

• Each color swatch with its HEX code and role (for example, “Primary Button Background”).
• Approved text/background pairs with contrast ratios.
• Examples of correct and incorrect usage (for example, “Do not use light gray text on white backgrounds”).

Share this with anyone who edits your WordPress content so new pages stay accessible.

Common Mistakes to Avoid

• Using your logo color for body text without checking contrast.
• Relying only on color to show required fields or errors in forms.
• Using very light gray text for a “minimal” look that becomes unreadable.
• Changing colors ad hoc on individual pages instead of using global styles.

When to Ask Compass Production for Help

Contact Compass Production if:

• You want us to validate your palette against WCAG standards.
• You need help updating global colors without breaking existing layouts.
• You are planning a rebrand and want accessibility baked into the new design system.

With a well-planned accessible color palette, your website will be easier to read, more inclusive, and more consistent across every new page you publish.

Video