Skip to main content

Customizing Widget Colors

Match the AllAccessible widget to your brand by customizing its color scheme. This guide shows you how to select colors, ensure accessibility complian

Written by Frank

Customizing Widget Colors

Overview

Match the AllAccessible widget to your brand by customizing its color scheme. This guide shows you how to select colors, ensure accessibility compliance, and create a cohesive look with your website.

Who This Is For

  • Designers matching widget to brand guidelines

  • Website owners personalizing appearance

  • Anyone wanting the widget to blend with their site

What You'll Learn

  • How to use the color picker

  • Which colors to customize

  • Ensuring accessible color contrast

  • Testing color combinations

Available Color Options

1. Background Color

What it controls: The main widget button background

Default: #2563eb (Blue)

Considerations:

  • Should match your primary or accent brand color

  • Must contrast with page background

  • Needs to be visible but not overwhelming

📷 Widget button showing background color

2. Icon Color

What it controls: The accessibility icon inside the button

Default: #ffffff (White)

Considerations:

  • Must contrast with background color (4.5:1 minimum)

  • Usually white or very light for dark backgrounds

  • Usually dark for light backgrounds

📷 Widget icon color examples

3. Hover Color

What it controls: Background color when user hovers over button

Default: #1e40af (Darker Blue)

Considerations:

  • Should be noticeable change from regular background

  • Typically a darker or lighter shade of background color

  • Indicates interactivity

📷 Widget hover state

4. Focus Color

What it controls: Outline color when button is focused (keyboard navigation)

Default: #059669 (Green)

Considerations:

  • Must be highly visible

  • Should contrast with both button and page background

  • Critical for keyboard users

📷 Widget focus state

How to Customize Colors

Method 1: Color Picker (Visual Selection)

Step 1: Access Widget Settings

  1. Dashboard → Sites → [Your Site] → Widget Settings

  2. Scroll to "Colors & Appearance" section

Step 2: Use Color Picker

  1. Click the colored square next to each color option

  2. Color picker popup appears

  3. Select your color by:

    • Clicking in the color spectrum

    • Dragging sliders

    • Using preset swatches

Step 3: Confirm Selection

  • Color updates in preview panel instantly

  • Text field shows hex value

  • Preview shows how it looks

📷 Color picker interface

Method 2: Hex Code Entry (Precise Colors)

For exact brand colors:

Step 1: Get Your Brand's Hex Codes

  • From brand guidelines document

  • From website CSS

  • From design tool (Figma, Adobe)

Example:

Primary Brand Color: #FF6B35

Step 2: Enter Hex Code

  1. Click in the text field next to color preview

  2. Type or paste hex code: #FF6B35

  3. Press Enter

  4. Preview updates automatically

Supported Formats:

  • #FF6B35 (6-digit hex)

  • #F63 (3-digit hex shorthand)

  • FF6B35 (without #)

Ensuring Accessible Color Contrast

Why Contrast Matters

WCAG Requirements:

  • Minimum (Level AA): 4.5:1 contrast ratio for normal text

  • Enhanced (Level AAA): 7:1 contrast ratio

Your widget needs accessible contrast too!

Checking Your Color Combinations

Background vs. Icon Color:

Must have at least 4.5:1 contrast ratio

Good Combinations:

  • ✅ Dark blue background (#2563eb) + White icon (#ffffff) = 8.6:1

  • ✅ Black background (#000000) + Yellow icon (#ffff00) = 19.6:1

  • ✅ Orange background (#FF6B35) + White icon (#ffffff) = 4.7:1

Bad Combinations:

  • ❌ Light gray (#cccccc) + White icon (#ffffff) = 1.4:1 (too low!)

  • ❌ Yellow (#ffff00) + White (#ffffff) = 1.07:1 (barely visible)

  • ❌ Red (#ff0000) + Black (#000000) = 5.2:1 (good) but avoid red/black for color blind users

Using Contrast Checkers

Free Tools:

How to Use:

  1. Enter your background color

  2. Enter your icon color

  3. Tool shows contrast ratio

  4. Aim for 4.5:1 or higher

📷 Contrast checker tool

Brand Color Matching

Getting Your Brand Colors

Method 1: From Brand Guidelines

Primary: #2563eb
Secondary: #10b981
Accent: #f59e0b

Method 2: From Your Website

  1. Right-click on branded element → Inspect

  2. Look at Computed styles

  3. Find background-color or color property

  4. Copy hex value

Method 3: Color Picker Browser Extension

  • Install ColorZilla or similar

  • Click on any color on your site

  • Copy hex code

Recommended Color Schemes

Professional/Corporate

Conservative and trustworthy:

  • Background: #1e3a8a (Navy Blue)

  • Icon: #ffffff (White)

  • Hover: #1e40af (Lighter Navy)

  • Focus: #10b981 (Green)

Contrast: 11.2:1 ✅

Creative/Modern

Bold and eye-catching:

  • Background: #7c3aed (Purple)

  • Icon: #ffffff (White)

  • Hover: #6d28d9 (Darker Purple)

  • Focus: #f59e0b (Orange)

Contrast: 8.2:1 ✅

Minimalist/Clean

Subtle and refined:

  • Background: #6b7280 (Gray)

  • Icon: #ffffff (White)

  • Hover: #4b5563 (Darker Gray)

  • Focus: #2563eb (Blue)

Contrast: 5.7:1 ✅

Healthcare/Medical

Calming and professional:

  • Background: #0891b2 (Teal)

  • Icon: #ffffff (White)

  • Hover: #0e7490 (Darker Teal)

  • Focus: #059669 (Green)

Contrast: 4.9:1 ✅

E-Commerce/Retail

Energetic and inviting:

  • Background: #dc2626 (Red)

  • Icon: #ffffff (White)

  • Hover: #b91c1c (Darker Red)

  • Focus: #eab308 (Yellow)

Contrast: 5.9:1 ✅

Non-Profit/Community

Warm and welcoming:

  • Background: #ea580c (Orange)

  • Icon: #ffffff (White)

  • Hover: #c2410c (Darker Orange)

  • Focus: #0891b2 (Teal)

Contrast: 5.3:1 ✅

Testing Your Color Choices

Visual Testing Checklist

Before Saving:

  • Preview looks good in dashboard

  • Colors match brand guidelines

  • Contrast ratio is 4.5:1 or higher

  • Hover state is noticeably different

  • Focus state is highly visible

After Saving (1 hour later):

  • Test on actual website

  • Check on white backgrounds

  • Check on dark backgrounds

  • Test on colored page sections

  • Verify mobile appearance

Color Blindness Testing

Test with simulators:

Common Issues:

  • Red/Green combinations (deuteranopia)

  • Blue/Yellow combinations (tritanopia)

  • Low contrast for monochromatic vision

Solution: Ensure 4.5:1 contrast regardless of color blindness type.

Common Color Mistakes

❌ Insufficient Contrast

Problem: Light icon on light background or dark on dark

Example:

  • Background: #93c5fd (Light Blue)

  • Icon: #ffffff (White)

  • Contrast: 2.1:1 (FAILS!)

Solution: Use darker background or darker icon color

❌ Too Many Colors

Problem: Using 5+ different colors

Keep it simple:

  • ✅ 2-3 colors maximum

  • ✅ Variations of same color (light/dark shades)

  • ❌ Rainbow effect (unprofessional)

❌ Clashing with Page Design

Problem: Widget stands out awkwardly

Example:

  • Website: Pastel pink theme

  • Widget: Bright neon green

Solution: Match website's color palette or use neutral colors

❌ Red/Green Only Differentiation

Problem: Using red and green as only distinction

Bad for: 8% of men with red-green color blindness

Solution: Add shape or icon differences, not just color

Advanced Color Techniques

Using Brand Color Variables

If you have brand variables:

/* Your brand stylesheet */
:root {
  --brand-primary: #2563eb;
  --brand-secondary: #10b981;
  --brand-accent: #f59e0b;
}

In AllAccessible:

  • Background: Use --brand-primary value (#2563eb)

  • Hover: Use slightly darker shade

  • Focus: Use --brand-secondary value (#10b981)

Complementary Color Selection

Use color wheel relationships:

  • Analogous: Colors next to each other (harmonious)

  • Complementary: Opposite colors (high contrast)

  • Triadic: Three equally spaced colors (balanced)

Tools:

Seasonal Color Updates

Change colors for campaigns:

  • Holiday themes (December: red/green)

  • Awareness months (October: pink for breast cancer)

  • Brand campaigns (match campaign colors)

Remember: 1-hour propagation time, so plan ahead!

Troubleshooting Color Issues

Issue: Colors Look Different on Live Site

Possible Causes:

  1. Monitor calibration: Colors vary by screen

  2. Browser rendering: Slight variations between browsers

  3. Color profile: sRGB vs Display P3

Solution:

  • Test on multiple devices

  • Use widely compatible colors

  • Avoid edge cases (very bright or very saturated)

Issue: Widget Hard to See

Cause: Insufficient contrast with page background

Solution:

  • Ensure button background contrasts with page

  • Add shadow/glow if needed (automatic)

  • Choose more contrasting color

Issue: Changes Don't Appear

Cause: Cache propagation

Solution:

  • Wait full 60 minutes

  • Clear browser cache

  • Test in incognito mode

Color Accessibility Resources

Contrast Checkers:

Color Blindness Simulators:

Color Palette Generators:

Related Articles

Last Updated: October 2025
​Minimum Contrast Required: 4.5:1 (WCAG Level AA)
​Update Propagation: Up to 1 hour

Related Articles
Did this answer your question?