logomovo.
Open studio
← All guidesBrand Colors

Accessible Brand Colors: Contrast Beyond the Logo

Test brand colors for readable text and usable interface controls while keeping the logo’s visual character.

By LogoMovo Editorial Team · Published

Accessible brand color use means choosing foreground and background pairings that make text, controls, and meaningful graphics easier to perceive. This matters for people with low vision, color vision differences, and anyone using a display in difficult lighting. A brand palette can be expressive, but each web interface pairing needs to be checked in context.

A frequent source of confusion is the "logo exception." Under the W3C Web Content Accessibility Guidelines (WCAG 2.2), text that is part of a logo or brand name has no minimum contrast requirement under Success Criterion 1.4.3. This technical exception says nothing about trademark ownership or legal compliance. When the same colors are used for ordinary website text or controls, the relevant contrast criteria apply to those elements.

1. Contrast Basics: How Digital Legibility Works

In digital design, contrast is calculated as a relative luminance ratio between two adjacent colors, ranging from 1:1 (identical lightness, white on white) to 21:1 (maximum separation, black on white). Human visual acuity varies significantly based on age, ambient lighting, display quality, and color vision deficiencies such as deuteranomaly.

Small business owners often choose brand palettes on high-resolution monitors in dim offices. Problems arise when those colors meet real-world conditions: a customer reviewing an invoice on a phone outdoors, or an older user navigating a service page on an uncalibrated display.

2. Text and UI Thresholds Under WCAG 2.2

The World Wide Web Consortium (W3C) specifies contrast criteria in WCAG 2.2. This guide uses Level AA criteria as a practical design target. Legal requirements vary by jurisdiction and use case; WCAG conformance should not be described as a universal legal determination.

+--------------------------------------------------------------------------+
|                  WCAG 2.2 LEVEL AA CONTRAST BENCHMARKS                   |
+------------------------------------+-------------------------------------+
| ELEMENT TYPE                       | MINIMUM REQUIRED CONTRAST RATIO    |
+------------------------------------+-------------------------------------+
| Body text & normal copy (<18pt)    | 4.5:1 (WCAG SC 1.4.3)               |
| Large-scale text (>=18pt or 14pt B)| 3.0:1 (WCAG SC 1.4.3)               |
| UI controls & active borders       | 3.0:1 (WCAG SC 1.4.11)              |
| Essential graphical objects & icons| 3.0:1 (WCAG SC 1.4.11)              |
| Logos and trademarked marks        | EXEMPT (No minimum ratio required)  |
+------------------------------------+-------------------------------------+

Success Criterion 1.4.3: Contrast (Minimum)

WCAG Success Criterion 1.4.3 governs text and text images:

  • Normal Text (below 18pt regular or below 14pt bold): Requires at least 4.5:1 contrast against its background. For standard 16px body copy, this ensures comfortable reading without visual strain.
  • Large Text (at least 18pt / 24px regular, or 14pt / ~18.5px bold): Requires at least 3.0:1 contrast, as heavier stroke weights project greater visual mass.

Success Criterion 1.4.11: Non-Text Contrast

Success Criterion 1.4.11 governs interactive interface components and essential graphics:

  • UI Components: Boundaries required to identify active controls—including button perimeters, form field outlines, and focus rings—must meet at least 3.0:1 against adjacent backgrounds.
  • Graphical Objects: Standalone icons (such as search or telephone glyphs) and charts essential to understanding content require 3.0:1 contrast.

3. The Logo Exception: Why Brands Fail Beyond the Mark

The W3C accessibility guidelines incorporate a specific exclusion that is frequently misunderstood:

*"Text that is part of a logo or brand name has no contrast requirement."* — W3C WCAG 2.2 Success Criterion 1.4.3

The W3C explanation of non-text contrast describes when the particular presentation of a logo is considered essential. The exception concerns how the accessibility criterion is applied; it does not mean every other appearance of the same color pair is exempt.

Problems occur when a business assumes that because a color combination is permitted inside a logo, it is acceptable across an entire website. The logo exemption applies strictly to the mark itself. It does not protect:

  • Header navigation menus and text links.
  • Headline copy and service descriptions.
  • Primary call-to-action buttons ("Book Appointment", "Submit").
  • Contact form field borders, labels, and error notices.
  • Pricing tables, testimonials, or footer text.

If a logo uses soft amber lettering on cream, that logotype may fall under the exception. The same pairing used for ordinary body text must be measured against the applicable criterion. Its exact contrast ratio depends on the actual color values, so do not infer a number from color names alone.

4. Practical Palette Pairings: A Worked Example

Making a brand palette accessible does not mean abandoning vibrant colors. It requires establishing clear roles: using bright identity hues as accents while pairing dark and light shades for functional reading surfaces.

Worked Example: Harborview Solar & Electric (Fictional)

Consider a fictional regional contractor, *Harborview Solar & Electric*, building an online scheduling page with two brand colors: Sunburst Amber (`#F5A623`) and Seafoam Teal (`#48BB78`).

+--------------------------------------------------------------------------+
|          HARBORVIEW SOLAR & ELECTRIC: SYSTEM CALIBRATION                 |
+-------------------+--------------------+----------------+----------------+
| ELEMENT           | PAIRING TESTED     | RATIO / STATUS | ACCESSIBLE FIX |
+-------------------+--------------------+----------------+----------------+
| Brand Logo Mark   | #F5A623 on White   | 2.03:1 (logo exception) | Retained as mark|
| Primary Button    | White on #F5A623   | 2.03:1 (FAIL for normal text) | Charcoal on #F5|
| Body Text         | #48BB78 on White   | 2.43:1 (FAIL) | Slate on White |
| Navigation Links  | #48BB78 on White   | 2.43:1 (FAIL) | Deep Marine Gr.|
| Card Accent Line  | #F5A623 Border     | Non-text (PASS)| Retained accent|
+-------------------+--------------------+----------------+----------------+

The Three-Part Solution

  1. Invert Button Text: White text on Sunburst `#F5A623` fails at 2.03:1. Swapping text to dark charcoal (`#1A202C`) produces an 8.05:1 ratio—above the Level AAA threshold for normal text while keeping the warm yellow button.
  2. Derive a Deep Functional Shade: Mid-tone Seafoam (`#48BB78`) cannot support normal text on white (2.43:1). Deriving a darker shade from the same hue family—Deep Marine Green (`#1C4532`)—achieves 10.79:1, providing a readable tone for links and headings.
  3. Reserve Bright Swatches for Accents: The bright Sunburst and Seafoam hues remain central to the identity through card borders, hero graphics, and background highlights where text contrast rules do not apply.

5. Practical Checks: Methods and Validation Tools

Validating contrast should occur during palette creation, preventing costly rebuilds after website launch. Small business teams can verify palettes using three practical methods:

  • Algorithmic Ratio Checks: Use the WebAIM Contrast Checker or built-in browser developer tools in Chrome and Firefox to calculate exact ratios and receive immediate pass/fail confirmations for text and UI components.
  • Grayscale and Vision Simulation: WCAG Success Criterion 1.4.1 prohibits using color as the sole visual means of conveying information. Review layouts in grayscale to confirm status tags remain distinct, and pair color cues with text labels or distinct icons.
  • Approved Pairing Matrix: Document permitted color combinations for designers and developers, specifying which foreground colors may sit on clean white backgrounds, light tinted cards, or dark hero sections.

6. Common Mistakes and Operational Trade-Offs

Small business teams frequently encounter predictable pitfalls when applying contrast standards:

  • White Text on Bright Buttons: White text on a bright brand button may fail the text contrast criterion. Compare the actual text and fill colors; a darker text color may work better.
  • Low-Contrast Form Placeholders: Light gray placeholder text inside form fields may fail text contrast checks. Keep a visible label as well as readable placeholder text.
  • Over-Correcting into Monotony: Accessibility does not require reducing a brand to black and white. Vivid brand colors can be featured prominently in display headlines, photography, video backgrounds, and decorative borders.
  • Unverified Palette Suggestions: A generated palette is an idea, not a measured pass. Check every color pairing used in the final interface.

7. Decision Checklist for Small Business Owners

Before finalizing brand colors or approving a website design, review these five requirements:

  1. [ ] Isolate the Logo: Confirm that while the logo emblem is exempt, all surrounding website text, navigation links, and controls meet WCAG standards.
  2. [ ] Verify Body Copy at 4.5:1: Confirm all normal body text (under 18pt) achieves at least 4.5:1 contrast against its backing.
  3. [ ] Check non-text components and large text: Check meaningful control boundaries and icons against the applicable 3:1 non-text criterion; check large text at 3:1 and ordinary button labels at the ordinary text threshold.
  4. [ ] Document an Approved Pairing Matrix: Provide your web designer or developer with explicit rules defining authorized foreground and background pairings.
  5. [ ] Run Non-Color Cue Checks: Confirm that form errors, hyperlinks, and status badges include text labels or icons rather than relying on color alone.

Next Steps: Building a Cohesive Brand System

Checking color pairings early can reduce rework and make the site easier to use. Contrast checks are one part of accessibility review; they do not guarantee that every customer can read every element.

As you develop your brand identity, use LogoMovo Tools to explore names and palette ideas. If you use LogoMovo Studio for logo directions, check the exported colors and every website pairing separately with an accessibility checker.

Ready to explore a logo direction?

Open studio ↗