Skip to content

Conversation

@mattpodwysocki
Copy link
Contributor

Summary

Implements a comprehensive color contrast checker that validates color combinations against WCAG 2.1 accessibility standards.

Key Features

  • Accurate WCAG 2.1 Calculations: Uses official relative luminance and contrast ratio formulas with gamma correction
  • Multiple Color Formats: Supports hex (#RGB, #RRGGBB, #RRGGBBAA), rgb/rgba, and CSS named colors
  • WCAG AA & AAA Validation: Checks against both conformance levels
  • Font Size Awareness: Separate requirements for normal and large text
  • Actionable Recommendations: Provides specific guidance when contrast fails
  • Offline Processing: No API calls required

Implementation Details

  • Extends BaseTool for offline operation
  • Color parsing supports:
    • 3-digit hex: #RGB
    • 6-digit hex: #RRGGBB
    • 8-digit hex with alpha: #RRGGBBAA
    • RGB/RGBA functional notation: rgb(r, g, b), rgba(r, g, b, a)
    • 20+ CSS named colors: black, white, red, blue, etc.
  • Implements WCAG 2.1 relative luminance calculation with gamma correction
  • Calculates contrast ratio: (L1 + 0.05) / (L2 + 0.05)
  • Full Zod schema validation for inputs and outputs

WCAG 2.1 Requirements

  • WCAG AA: 4.5:1 for normal text, 3:1 for large text
  • WCAG AAA: 7:1 for normal text, 4.5:1 for large text

Testing

  • 28 comprehensive test cases covering:
    • Tool metadata validation
    • Maximum contrast (21:1 for black/white)
    • WCAG AA compliance (pass/fail scenarios)
    • WCAG AAA compliance (pass/fail scenarios)
    • All color format support (hex, rgb, rgba, named)
    • Error handling for invalid colors
    • Default parameters
    • Recommendation generation
    • WCAG requirements output
    • Real-world color combinations

All tests passing ✅

Documentation

Added comprehensive README documentation with:

  • Parameters and default values
  • Color format support
  • WCAG requirements
  • Return value structure
  • Example prompts for users

Use Cases

This tool enables:

  • Design systems to validate accessible color palettes
  • Map style designers to ensure text labels are readable
  • Compliance checking for WCAG 2.1 standards
  • Quick accessibility validation during development

Related PRs

Part of the offline validation tools initiative:

🤖 Generated with Claude Code

Implements a comprehensive color contrast checker that validates
color combinations against WCAG 2.1 accessibility standards.

Key features:
- Calculates contrast ratios using WCAG 2.1 algorithm
- Supports multiple color formats (hex, rgb, rgba, named colors)
- Validates against WCAG AA and AAA levels
- Separate requirements for normal and large text
- Provides actionable recommendations when contrast fails
- Full luminance calculation with gamma correction

The tool extends BaseTool for offline operation (no API calls).
Uses the official WCAG 2.1 relative luminance and contrast ratio
formulas to ensure accurate accessibility measurements.

Color format support:
- 3-digit, 6-digit, and 8-digit hex colors (#RGB, #RRGGBB, #RRGGBBAA)
- RGB and RGBA functional notation
- CSS named colors (black, white, red, blue, etc.)

WCAG requirements:
- AA: 4.5:1 (normal text), 3:1 (large text)
- AAA: 7:1 (normal text), 4.5:1 (large text)

Test coverage: 28 comprehensive test cases covering all features
including maximum contrast, WCAG AA/AAA compliance, all color formats,
error handling, default parameters, recommendations, and real-world
color combinations.

Documentation: Added comprehensive README documentation with
parameters, color format support, WCAG requirements, return values,
and example prompts.

Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
@mattpodwysocki mattpodwysocki requested a review from a team as a code owner January 8, 2026 21:00
mattpodwysocki added a commit that referenced this pull request Jan 9, 2026
…roduction prompt

Adds comprehensive style quality validation capabilities:

Skill:
- Created mapbox-style-quality skill document (390+ lines)
- Pre-production checklist and validation best practices
- Guidance on expression validation, GeoJSON validation, and accessibility
- Optimization strategies and workflow recommendations
- Integration patterns for Git hooks, CI/CD, and code review

Prompt:
- Created prepare-style-for-production prompt
- Orchestrates validation workflow using 5 quality tools:
  * validate_expression_tool - Validate expressions in filters/paint/layout
  * validate_geojson_tool - Validate GeoJSON sources
  * check_color_contrast_tool - WCAG accessibility compliance
  * optimize_style_tool - Remove redundancies and optimize
  * compare_styles_tool - Compare versions (implicit in workflow)
- Configurable WCAG level (AA/AAA) and optional optimization skip
- Generates comprehensive quality report with deployment readiness assessment

Testing:
- 15 test cases for PrepareStyleForProductionPrompt
- All 386 tests passing
- Updated prompt registry tests

Documentation:
- Updated README with new skill listing
- Added prompt documentation with usage examples
- Cross-referenced skill and prompt

Related PRs:
- PR #50: validate_geojson_tool
- PR #51: validate_expression_tool
- PR #52: compare_styles_tool
- PR #53: check_color_contrast_tool
- PR #54: optimize_style_tool

Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant