Module 3.1: Branding and Accessibility: Finding the Balance

Your agency's brand matters. It signals professionalism, builds public trust, and helps residents identify official communications at a glance. But what happens when your brand colors don't meet accessibility standards? Do you abandon your identity — or find a smarter path forward?

The answer, fortunately, is neither. Most agencies can preserve the spirit of their brand while meeting WCAG 2.1 Level AA (Web Content Accessibility Guidelines, version 2.1, Level AA) contrast requirements. This article walks you through when and how to adapt your brand colors, how to build an accessibility-first palette, and a practical checklist you can use right now.

Why color contrast matters

Color contrast refers to the difference in luminance — or brightness — between a foreground color (usually text) and its background. When contrast is too low, text becomes hard to read for people who are blind or have low vision, people with color blindness, and anyone reading on a phone screen in bright sunlight.

WCAG 2.1 Success Criterion 1.4.3 sets the minimum contrast standard:

"The visual presentation of text and images of text has a contrast ratio of at least 4.5:1."

For large text — defined as 18pt or larger, or 14pt bold — the threshold drops to 3:1. These minimums apply to Level AA compliance, which is the standard required under ADA Title II for most government agencies.

The good news: WCAG explicitly carves out an exception for logotypes. Text that is part of a logo or brand name has no contrast requirement. That means your official seal and wordmark are not at risk — the rules apply to the body text, buttons, links, and interface elements that surround your brand.

When to modify brand colors

Not every brand color will fail a contrast check. Before making any changes, test what you actually have. Free tools like the WebAIM Contrast Checker let you enter two hex codes and instantly see your contrast ratio.

That said, here are the situations where modification is necessary.

Body text and captions. If your brand color appears as body text on a light or dark background and falls below a 4.5:1 ratio, you must adjust it for any public-facing digital content. WCAG 1.4.3 does not provide a workaround for this threshold.

Navigation links and buttons. Brand-colored call-to-action buttons are a common failure point. A medium-saturation blue or green that looks vibrant against white may still fail if the luminance difference isn't sufficient.

Informational overlays and lower-thirds. Video content presents a particular challenge. Text overlaid on video footage rarely has a predictable background, so brand-colored text without a solid backing almost always fails.

Icon-only UI elements. If your brand color appears in icons that convey meaning without accompanying text, those icons must also meet a 3:1 contrast ratio against their background (WCAG 2.1 Success Criterion 1.4.11: Non-text Contrast).

You do not need to modify your brand colors for decorative elements that carry no information — background textures, divider lines, and purely visual flourishes are excluded.

Brand adaptation strategies

Adapting your brand for accessibility doesn't mean starting from scratch. Most agencies use one of three approaches, and they aren't mutually exclusive.

Shift the shade, not the hue

The most common fix is simple: darken the color. If your brand blue is #4A90D9, try shifting it to #1A5FA8 or even #0D4A8A. You keep the "blue-ness" of your identity while increasing the contrast ratio. A darker shade of almost any color will pass on white backgrounds, and a lighter tint will pass on dark backgrounds.

This approach works particularly well for agencies with a single primary brand color. You maintain recognition while gaining compliance.

Create a parallel accessible palette

Some agencies define two palettes: the full brand palette (used for print, logos, and decorative applications) and an accessible digital palette derived from the primary palette. The accessible palette uses the same hues but at approved contrast-tested values.

For example:

• Brand green (print, logo): #5CB85C

• Accessible digital green (UI text, buttons): #2D7A2D

Both read as "your green." Only one passes WCAG for digital use.

Use brand color as accent, not carrier of meaning

Another strategy is to keep your original brand colors exactly as they are — but stop using them to carry text or critical information. Use them as borders, background washes, or decorative accents. Place your actual text in high-contrast black, white, or a tested neutral. Your brand color provides identity; your compliant text color provides readability.

This works especially well for agencies whose brand colors are in the mid-range — saturated but not dark enough to pass on their own.

Building an accessibility-first palette

If you're updating your brand guidelines or building a new visual system from the ground up, this is your opportunity to design accessibility in from the start rather than retrofitting it later.

Here's a practical approach.

Start with your anchors. Every accessible palette needs at least one reliable dark tone and one reliable light tone. True black (#000000) and true white (#FFFFFF) have a contrast ratio of 21:1 — far beyond what's required. Most agencies choose off-black and off-white for a softer look while still maintaining excellent contrast.

Build your primary brand color around a tested target. If you're choosing a new brand color, test it against your intended backgrounds before committing. Pick the hue you love, then find the specific shade within that hue that passes 4.5:1 on your standard backgrounds. Lock that value into your guidelines.

Define your text colors explicitly. Don't leave text color to chance or developer preference. Your guidelines should specify: default body text color, heading color, link color (including hover and visited states), and text on dark backgrounds. Each should have its contrast ratio documented.

Document your do-not-use combinations. Specify which color pairings are off-limits. For instance, if your brand yellow (#F5C518) fails on white, say so explicitly. "Brand yellow is for print and decorative digital use only. Do not use for text on light backgrounds."

Test every combination at both text sizes. A color pairing that fails at normal text size (4.5:1 required) might still pass for large text (3:1 required). Document both thresholds so your team knows exactly what's allowed where.

Government-specific considerations

Government communications often include elements that require extra attention.

Meeting agendas and slide presentations. Many agencies brand their public meeting materials with colored headers and backgrounds. Run every slide template through a contrast checker before distributing. A branded header with light-colored text on a medium-tone background is one of the most common failures agencies encounter.

Video lower-thirds. When a city council member's name and title appears on screen during a meeting broadcast, that text must meet contrast requirements. A best practice is to always use white or black text on a solid brand-colored band, rather than text directly over video footage.

Captions. Caption text has its own standards — the FCC requires that caption presentation meet baseline legibility requirements, and many caption delivery systems use fixed colors (typically white text on black background) precisely because this combination reliably meets contrast requirements regardless of the underlying video content.

Digital signage and public kiosks. If your agency operates public-facing screens in city hall, courthouses, or transit facilities, those displays fall under the same accessibility requirements as your website. Apply your accessible digital palette consistently.

Real-world example: adapting a city's brand

Consider a hypothetical mid-sized city whose brand uses a warm terracotta red (#C0392B) as its primary color. This shade has a contrast ratio of 4.6:1 against white — just barely passing for normal text, with no room for error.

The city's communications team makes three decisions:

1. They darken the primary to #A93226 for all text and button applications, bringing the contrast ratio to 5.8:1 and creating a safer margin.

2. They keep the original #C0392B exclusively for logos, print materials, and decorative borders.

3. They add the combination "#C0392B on white for text" to their list of prohibited pairings in the digital style guide.

Result: every document and webpage passes WCAG 1.4.3. The city's visual identity is intact. Staff have clear, documented rules to follow without guessing.

MediaScribe integration

When your agency uses MediaScribe to deliver captions and video content at public meetings, your brand colors most commonly appear in the MediaScribe mobile viewer — the interface residents see when they scan a QR code to follow along on their phones. MediaScribe's branding settings allow agencies to configure header font, logo, accent color, and font color within the viewer interface. To update these settings, navigate to Settings → Mobile Branding, then select the branding config you want to edit (your agency may have more than one). From the Header tab, you can adjust the Header Accent Color and Header Font Color fields. Test your chosen hex values using a contrast checker before saving, and document the tested values in your agency's accessibility palette for future reference.

Brand and accessibility compliance checklist

Use this checklist when reviewing any public-facing digital communication — web pages, videos, presentations, or digital signage. A printable version of the checklist can be downloaded here.

Contrast ratios

• [ ] All normal-size body text meets a 4.5:1 contrast ratio against its background

• [ ] All large text (18pt+ or 14pt+ bold) meets a 3:1 contrast ratio

• [ ] All meaningful icons and UI controls meet a 3:1 contrast ratio (WCAG 1.4.11)

• [ ] No brand-colored text appears on brand-colored backgrounds without testing

Video and captions

• [ ] On-screen text overlays (lower-thirds, title cards) use a solid backing color

• [ ] Caption text meets legibility standards — avoid colored captions on variable backgrounds

• [ ] Slide presentations use tested color combinations for all text

Brand palette documentation

• [ ] Your style guide specifies which color values are approved for digital text use

• [ ] Prohibited pairings are documented explicitly

• [ ] Contrast ratios are recorded next to each approved combination

• [ ] Accessible digital palette values are distinct from print-only values

Ongoing compliance

• [ ] New templates are tested before staff distribution

• [ ] Vendor-provided materials (presentations, promotional graphics) are reviewed before publication

• [ ] A designated staff member owns palette documentation and updates

Key takeaways

• WCAG 2.1 Level AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text — these apply to digital content, not logos.

• Most brand colors can be made accessible by darkening the shade while preserving the hue.

• Building a parallel "accessible digital palette" gives your team clear, testable rules without abandoning your brand.

• Video content requires special attention — lower-thirds and slide text are common failure points.

• Document everything: contrast ratios, approved pairings, and prohibited combinations should all live in your style guide.