🎨 Contrast Fix

Overview

The Contrast Fix feature automatically adjusts text colors in JobTread schedule views to ensure optimal readability. Using the WCAG (Web Content Accessibility Guidelines) contrast formula, it dynamically enhances text visibility against various background colors in Month, Week, and Day schedule views.

Key Features

• WCAG Compliant - Uses industry-standard contrast ratios for accessibility
• Automatic Adjustment - Works in real-time as content changes
• Current Date Highlighting - Makes today's date stand out in schedule views
• Smart Detection - Analyzes background colors and adjusts text accordingly
• No Configuration Needed - Works automatically once enabled
• Mutually Exclusive - Automatically disabled when using Dark Mode or Custom Theme

Getting Started

Prerequisites

• JT Power Tools extension installed in Chrome
• Access to any JobTread page

Enabling the Feature

1. Click the JT Power Tools extension icon in your Chrome toolbar
2. Locate the "Contrast Fix" toggle
3. Toggle it ON - the switch will turn blue
4. Navigate to any JobTread page (especially schedule views)
5. Text colors will automatically adjust for better readability

How It Works

WCAG Contrast Formula

The feature uses the WCAG 2.0 relative luminance formula to calculate contrast ratios:

1. Detects the background color of text elements
2. Calculates the luminance (brightness) of the background
3. Determines the optimal text color (black or white) for maximum contrast
4. Applies the calculated color automatically

Real-Time Updates

Contrast Fix uses a MutationObserver to monitor the page for changes:

• Detects when new content loads (e.g., navigating between dates)
• Watches for color changes in existing elements
• Automatically recalculates and applies contrast fixes
• Updates within milliseconds for a seamless experience

Where It Works

Schedule Views Only

Contrast Fix is specifically designed for JobTread schedule views:

• Month View - Enhanced readability for monthly schedule overview
• Week View - Clear visibility in weekly schedule layout
• Day View - Optimal contrast for daily schedule details

What Gets Enhanced

Within schedule views, Contrast Fix improves:

• Task Cards - Text is always readable regardless of task color
• Date Headers - Current date highlighting with enhanced contrast
• Time Labels - Clear visibility of time slots
• Resource Names - Easy to read team member assignments

Visual Examples

Before Contrast Fix

• Light gray text on yellow background (hard to read)
• White text on light blue background (low visibility)
• Dark text on dark green background (poor contrast)

After Contrast Fix

• Black text on yellow background (clear and readable)
• Black text on light blue background (high visibility)
• White text on dark green background (excellent contrast)

Current Date Highlighting

How It Works

When viewing schedule pages, Contrast Fix adds special highlighting to today's date:

1. Detects the current date from your system
2. Finds the corresponding date cell in the schedule
3. Applies a distinctive background color
4. Ensures text remains readable with contrast adjustment

Benefits

• Quickly orient yourself in long schedule views
• Never lose track of today when planning ahead
• Visual anchor point when scrolling through weeks or months

Best Practices

When to Use Contrast Fix

Ideal Scenarios:

• Working in bright environments with screen glare
• Using custom task colors in JobTread that may have poor default contrast
• Team members with visual impairments or color blindness
• Long work sessions where eye strain is a concern
• Projecting schedules in meetings for better visibility

When Not to Use

You might prefer to disable Contrast Fix if:

• You want to use Dark Mode or Custom Theme instead
• You prefer JobTread's default color scheme
• You find the current date highlighting distracting

Compatibility

Works With

• Schedule Drag & Drop - Text remains readable while dragging tasks
• Text Formatter - Formatted text maintains good contrast
• Quick Job Switcher - No conflicts
• Budget Hierarchy Shading - Complements the shading feature

Mutually Exclusive With

• Dark Mode - Dark Mode has its own contrast optimizations
• Custom Theme - Custom Theme includes intelligent contrast handling

Troubleshooting

Text Colors Not Changing

Solution:

• Verify the feature is enabled in the extension popup
• Check that Dark Mode and Custom Theme are both disabled
• Refresh the JobTread page (Ctrl/Cmd + R)
• Clear browser cache and reload

Colors Look Wrong

Solution:

• The algorithm chooses either black or white for optimal contrast - this is intentional
• If you prefer specific colors, try Custom Theme instead
• Check your monitor's brightness and contrast settings

Current Date Not Highlighted

Solution:

• Ensure you're viewing a schedule page (not dashboard or budget)
• Check that your system date and time are correct
• Try navigating to a different date and back to today
• Refresh the page

Performance Issues

Solution:

• The feature is lightweight, but if you notice slowness, try disabling it temporarily
• Close other browser tabs to free up resources
• Update Chrome to the latest version
• Report performance issues on GitHub with your Chrome version and system specs

Technical Details

Luminance Calculation

The WCAG formula for relative luminance:

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

Where R, G, and B are the linearized red, green, and blue values.

Contrast Ratio

The contrast ratio between two luminance values:

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

Where L1 is the lighter color and L2 is the darker color.

Decision Threshold

The feature uses a luminance threshold of 0.5:

• If background luminance > 0.5: Use black text
• If background luminance ≤ 0.5: Use white text

Accessibility Benefits

WCAG Compliance

By using the WCAG formula, Contrast Fix helps meet accessibility standards:

• Level AA - 4.5:1 contrast ratio for normal text
• Level AAA - 7:1 contrast ratio for enhanced accessibility

Who Benefits

• Users with low vision or color blindness
• Anyone working in bright or dim environments
• Users with eye strain or light sensitivity
• Teams creating accessible workflows

Related Guides

• Dark Mode - Alternative theme for reducing eye strain
• Custom Theme - Create your own color scheme with contrast controls
• Budget Hierarchy Shading - Works well with Contrast Fix
• Installation & Setup - Get started with JT Power Tools