Use this guide to identify packages in the "By Package" chart without relying on color.
Each package has a unique combination of color, pattern, and width:
Visual Signature:
- Color: Blue (#4477AA)
- Pattern: ━━━━━━━━━━━━ (Solid)
- Width: 3px (Thickest)
- How to Identify: The thickest solid blue line
Visual Signature:
- Color: Red (#EE6677)
- Pattern: ━ ━ ━ ━ ━ ━ (Dashed)
- Width: 2.5px
- How to Identify: Dashed red line with medium dashes
Visual Signature:
- Color: Green (#228833)
- Pattern: ············ (Dotted)
- Width: 2.5px
- How to Identify: Dotted green line with small dots
Visual Signature:
- Color: Yellow (#CCBB44)
- Pattern: ━··━··━··━·· (Dash-dot)
- Width: 2.5px
- How to Identify: Yellow line with long dash followed by dot
Visual Signature:
- Color: Cyan (#66CCEE)
- Pattern: ━━ ━━ ━━ ━━ (Long dash)
- Width: 2px
- How to Identify: Cyan line with long dashes
Visual Signature:
- Color: Purple (#AA3377)
- Pattern: ━····━····━···· (Dash-dot-dot)
- Width: 2px
- How to Identify: Purple line with dash followed by two dots
Visual Signature:
- Color: Orange (#EE7733)
- Pattern: ━··━·━··━· (Mixed)
- Width: 2px
- How to Identify: Orange line with varied dash-dot pattern
Visual Signature:
- Color: Grey (#BBBBBB)
- Pattern: ━━ ━━ ━━ (Medium dash)
- Width: 2px
- How to Identify: Grey line with medium-length dashes
Visual comparison of all patterns:
Solid: ━━━━━━━━━━━━━━━━━━━━
Dashed: ━━ ━━ ━━ ━━ ━━
Dotted: · · · · · · · · · · ·
Dash-dot: ━━━ · ━━━ · ━━━ ·
Long dash: ━━━━ ━━━━ ━━━━
Dash-dot-dot: ━━ · · ━━ · · ━━ · ·
Mixed: ━━ · ━ · ━━ · ━ ·
Medium dash: ━━━ ━━━ ━━━ ━━━
How colors appear without red perception:
| Package | Original Color | Perceived Color |
|---|---|---|
| openadapt | Blue | Blue (unchanged) |
| openadapt-ml | Red | Brown/grey |
| openadapt-capture | Green | Yellow/grey |
| openadapt-evals | Yellow | Yellow (unchanged) |
| openadapt-viewer | Cyan | Cyan (unchanged) |
| openadapt-grounding | Purple | Blue/purple |
| openadapt-retrieval | Orange | Yellow/green |
| openadapt-privacy | Grey | Grey (unchanged) |
Distinction: Even with red removed, line patterns make all lines distinguishable.
How colors appear without green perception:
| Package | Original Color | Perceived Color |
|---|---|---|
| openadapt | Blue | Blue (unchanged) |
| openadapt-ml | Red | Red/orange |
| openadapt-capture | Green | Brown/grey |
| openadapt-evals | Yellow | Yellow/orange |
| openadapt-viewer | Cyan | Blue/purple |
| openadapt-grounding | Purple | Purple (unchanged) |
| openadapt-retrieval | Orange | Orange (unchanged) |
| openadapt-privacy | Grey | Grey (unchanged) |
Distinction: Line patterns ensure clarity even without green.
How colors appear without blue perception:
| Package | Original Color | Perceived Color |
|---|---|---|
| openadapt | Blue | Green/grey |
| openadapt-ml | Red | Red (unchanged) |
| openadapt-capture | Green | Green (unchanged) |
| openadapt-evals | Yellow | Pink/red |
| openadapt-viewer | Cyan | Green |
| openadapt-grounding | Purple | Red/pink |
| openadapt-retrieval | Orange | Red (unchanged) |
| openadapt-privacy | Grey | Grey (unchanged) |
Distinction: Line patterns remain clearly different.
How the chart appears with complete color blindness:
| Package | Perceived Color | Primary Identifier |
|---|---|---|
| openadapt | Light grey | Thick solid line |
| openadapt-ml | Medium grey | Dashed pattern |
| openadapt-capture | Medium grey | Dotted pattern |
| openadapt-evals | Light grey | Dash-dot pattern |
| openadapt-viewer | Light grey | Long dash pattern |
| openadapt-grounding | Medium grey | Dash-dot-dot pattern |
| openadapt-retrieval | Medium grey | Mixed pattern |
| openadapt-privacy | Grey | Medium dash pattern |
Distinction: With no color at all, 8 distinct line patterns ensure complete accessibility.
The legend shows:
█ openadapt ← Click to hide/show
█ openadapt-ml ← Each entry is interactive
█ openadapt-capture ← Box shows line color/pattern
... (etc)
How to Use:
- Click any package name to toggle visibility
- Hidden packages appear grayed out
- Hover shows pointer cursor
- Legend boxes match line patterns in chart
Hover over any data point to see:
┌─────────────────────────────────┐
│ Dec 2025 │ ← Date
│ ● openadapt: 123 downloads │ ← Package & count
│ ● openadapt-ml: 45 downloads │ ← With color indicator
│ ● openadapt-capture: 67 downloads│
│ ... │
│ Total: 235 downloads │ ← Sum across all
└─────────────────────────────────┘
When you hover over a line:
- Active line: Full opacity, emphasized
- Other lines: Fade to 20% opacity
- Effect: Easy to trace which line you're examining
In achromatopsia mode (no color), rely on patterns:
- Look for the solid thick line → openadapt
- Look for distinct dots → openadapt-capture
- Look for long dashes → openadapt-viewer
- Use tooltips to confirm
To focus on specific packages:
- Click all packages except the one you want
- Hidden packages disappear from chart
- Click again to restore
Not sure which line is which?
- Hover over any data point
- Tooltip shows all package names
- Other lines fade, making active line obvious
The legend boxes show line patterns:
- Compare legend pattern to chart line
- Match the pattern visually
- No color needed for identification
Scientific basis for color choices:
- Research-Based: Designed by color scientist Paul Tol
- Peer-Reviewed: Published in scientific literature
- Tested: Validated with colorblind users
- Maximum Distinction: Optimized for all CVD types
| Color | Hex | RGB | Notes |
|---|---|---|---|
| Blue | #4477AA | rgb(68, 119, 170) | Safe for all CVD types |
| Red | #EE6677 | rgb(238, 102, 119) | Distinct from green |
| Green | #228833 | rgb(34, 136, 51) | Avoids red confusion |
| Yellow | #CCBB44 | rgb(204, 187, 68) | High contrast |
| Cyan | #66CCEE | rgb(102, 204, 238) | Unique hue |
| Purple | #AA3377 | rgb(170, 51, 119) | Distinct from blue |
| Orange | #EE7733 | rgb(238, 119, 51) | Warm accent |
| Grey | #BBBBBB | rgb(187, 187, 187) | Neutral |
All colors meet WCAG AA standards for contrast:
- Against white background: ≥4.5:1
- Against dark chart background: ≥3:1
- Between colors: ≥3:1
Use this checklist when testing:
- Can identify openadapt by thick solid line
- Can distinguish dashed from dotted lines
- Can see difference between dash patterns
- All 8 lines look visually different
- Legend click toggles package visibility
- Legend hover shows pointer cursor
- Hover highlighting works smoothly
- Tooltips show package names clearly
- Protanopia: All lines distinguishable
- Deuteranopia: All lines distinguishable
- Tritanopia: All lines distinguishable
- Achromatopsia: All lines distinguishable
- Can use chart without seeing color
- Patterns provide sufficient distinction
- Tooltips confirm line identification
- Legend helps isolate packages
A: End-of-line labels would require an additional Chart.js plugin (chartjs-plugin-datalabels). The current approach works with built-in Chart.js features and provides excellent accessibility through the combination of patterns, widths, interactive legend, and enhanced tooltips.
A: Yes! Line patterns and widths provide distinction without any interaction. Hover and tooltips are additional aids, not requirements.
A: Tooltips show all packages at that data point. You can also use the legend to hide packages and isolate specific lines.
A: Yes! Touch events work similarly to hover events. Tap any data point to see tooltips. Tap legend items to toggle visibility.
A: Yes! Patterns scale with the chart and remain visible at all standard zoom levels (50%-200%).
- Best colorblind simulation tools
- Smooth hover animations
- Recommended for testing
- Good accessibility inspector
- Reliable pattern rendering
- Alternative testing option
- Native canvas rendering (fastest)
- No built-in CVD simulation
- Use Chrome DevTools for testing
- Chromium-based (same as Chrome)
- Built-in accessibility features
- Good testing option
When printing the chart:
- Color Printer: Tol Bright colors print well
- Black & White: Line patterns remain visible
- Grayscale: Patterns ensure distinction
The PyPI download charts use a multi-layered accessibility approach:
- Color: Tol Bright palette (colorblind-safe)
- Pattern: 8 unique dash patterns
- Width: Varying line thickness (2-3px)
- Interactive: Click legend to toggle
- Tooltips: Package names and counts
- Highlighting: Hover to emphasize
Result: Fully accessible without relying on color perception alone.
For detailed implementation: See ACCESSIBILITY_IMPROVEMENTS.md For testing procedures: See COLORBLIND_TESTING_GUIDE.md For data verification: See DATA_VERIFICATION_REPORT.md