Components

Color Contrast

Validate WCAG 2.1 compliance for all theme color pairings. Accessible contrast ensures text is readable for all users, including those with visual impairments.

The Launch77 theme system pairs background and foreground tokens to meet accessibility standards. Check contrast ratios before customizing colors.

WCAG Standards

AA Standard (Minimum)

4.5:1 for normal text

Body text, labels, most UI content

3:1 for large text

18px+ regular or 14px+ bold text

AAA Standard (Enhanced)

7:1 for normal text

Highest accessibility level

4.5:1 for large text

18px+ regular or 14px+ bold text

Token Pair Contrast Ratios

All Launch77 theme token pairs and their current contrast ratios. Each pairing should meet at least AA standards (4.5:1).

Main page content

AAA

Contrast Ratio

17.87: 1

Enhanced contrast - exceeds all standards

Background

#FFFFFF

Foreground

#0F1729

Live Preview

The quick brown fox jumps

This is how the text looks on this background color.

--color-background+--color-foreground

Card surfaces

AAA

Contrast Ratio

17.87: 1

Enhanced contrast - exceeds all standards

Background

#FFFFFF

Foreground

#0F1729

Live Preview

The quick brown fox jumps

This is how the text looks on this background color.

--color-card+--color-card-foreground

Primary buttons and active states

AAA

Contrast Ratio

17.87: 1

Enhanced contrast - exceeds all standards

Background

#0F1729

Foreground

#FFFFFF

Live Preview

The quick brown fox jumps

This is how the text looks on this background color.

--color-primary+--color-primary-foreground

Accent elements

AAA

Contrast Ratio

16.32: 1

Enhanced contrast - exceeds all standards

Background

#F1F5F9

Foreground

#0F1729

Live Preview

The quick brown fox jumps

This is how the text looks on this background color.

--color-accent+--color-accent-foreground

Subtle UI elements

AA Large

Contrast Ratio

4.29: 1

Acceptable for large text only (18pt+ or 14pt+ bold)

Background

#F1F5F9

Foreground

#65758B

Live Preview

The quick brown fox jumps

This is how the text looks on this background color.

--color-muted+--color-muted-foreground

Secondary buttons

AAA

Contrast Ratio

16.32: 1

Enhanced contrast - exceeds all standards

Background

#F1F5F9

Foreground

#0F1729

Live Preview

The quick brown fox jumps

This is how the text looks on this background color.

--color-secondary+--color-secondary-foreground

Error states

AA Large

Contrast Ratio

3.62: 1

Acceptable for large text only (18pt+ or 14pt+ bold)

Background

#EF4343

Foreground

#FAFAFA

Live Preview

The quick brown fox jumps

This is how the text looks on this background color.

--color-destructive+--color-destructive-foreground

Common Contrast Issues

Example: Sidebar Hover State Issue

When --color-foreground and --color-primary are the same color, hover states can create contrast issues where text becomes unreadable.

Sidebar Color Issue Demo

Demonstrates the contrast problem with active menu items on hover

Issue Detected

Visual Demo

Unselected menu item (default):

Dashboard

Active menu item (default):

AAA
Components

Contrast: 17.87:1 - Enhanced contrast - exceeds all standards

Active menu item (on hover):

Fail
Components

Contrast: 1.00:1 - Insufficient contrast - fails WCAG standards

Technical Explanation

isActive && 'bg-primary text-primary-foreground hover:bg-primary/90'

✓ Active state uses primary + primary-foreground

'hover:bg-muted hover:text-foreground'

✗ Hover applies text-foreground to ALL items (including active)

Problem:

When --color-foreground and --color-primary are similar colors, the hover state creates dark text on dark background.

Current Color Values

primary

#0F1729

foreground

#0F1729

primary-fg

#FFFFFF

Why This Happens

The Sidebar component applies hover:text-foreground to all menu items. When an item is active (using bg-primary and text-primary-foreground), hovering changes the text color to foreground.

If foreground and primary are the same color, you get dark text on a dark background.

Current Implementation:

// In Sidebar.tsx (lines 277-278)
<SidebarMenuButton
  className={cn(
    'hover:text-foreground',  // ⚠️ Applied to ALL items
    isActive && 'bg-primary text-primary-foreground hover:bg-primary/90'
  )}
/>

Recommended Fix:

// Preserve text-primary-foreground on active+hover
<SidebarMenuButton
  className={cn(
    'hover:bg-muted',
    isActive
      ? 'bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground'
      : 'text-muted-foreground hover:text-foreground'
  )}
/>

Testing Custom Colors

Before Customizing Brand Colors

1. Check Contrast Ratios

Use the contrast checkers above to verify your custom colors meet WCAG AA standards (4.5:1 minimum).

2. Test All Token Pairs

Ensure each background token has sufficient contrast with its paired foreground token:

  • • primary + primary-foreground
  • • card + card-foreground
  • • muted + muted-foreground
  • • destructive + destructive-foreground
  • • etc.

3. Test Interactive States

Verify hover, focus, and active states maintain readable contrast. Pay special attention to components that combine multiple tokens (like the Sidebar example above).

Tools for Testing:

  • • Use browser DevTools to inspect computed colors in different states (hover, focus, active)
  • • Test with Chrome DevTools vision deficiency emulator (Rendering > Emulate vision deficiencies)
  • • Use online contrast checkers like WebAIM Contrast Checker