A powerful color contrast checker that validates accessibility compliance against WCAG 2.2 standards. Test any color combination using hex, named colors, RGB, HSL, or other formats. Instantly see if your colors meet AA (4.5:1 for normal text, 3:1 for large text) or AAA (7:1 for normal text, 4.5:1 for large text) contrast requirements. Generate color palettes using the modern OKLCH color space for perceptually uniform brightness, plus export ready-to-use CSS custom properties and Figma-compatible JSON tokens for your design system.

Provide developers with accessible, easy-to-use components that make building inclusive web applications simpler and faster, without compromising on customization or performance.

• WCAG 2.2 Compliance Testing: Real-time validation against AA and AAA standards
• Triple Category Analysis: Small text, large text, and UI components testing
• Universal Color Support: Hex, named colors, RGB, HSL, and other CSS color formats
• Share Color Combinations: Generate shareable URLs for team collaboration
• Persistent Storage: Color combinations automatically saved to localStorage
• Swap Colors: One-click color position swapping with accessibility announcements
• CSS Custom Properties: Export ready-to-use CSS variables with OKLCH color system
• Figma Integration: Generate Tokens Studio-compatible JSON following W3C standards
• OKLCH Color Palettes: Perceptually uniform color generation for design systems
• Cross-Tab Synchronization: Real-time updates across browser windows
• Pure Astro Architecture: Educational showcase of hand-built reactive systems
• Screen Reader Accessible: Comprehensive ARIA labels and live region announcements
• Keyboard Navigation: Full keyboard accessibility including modal interactions
• Modern CSS: Logical properties, relative color syntax, and CSS custom properties
• TypeScript Integration: Full type safety with comprehensive error handling
• Responsive Design: Works seamlessly across all device sizes
• Dark Mode Support: Automatic system preference detection
• Educational Value: Demonstrates advanced web development concepts without frameworks

• Real-time contrast ratio calculation with visual feedback
• Pass/fail badge system for intuitive WCAG compliance understanding
• Screen reader announcements for all color changes and interactions
• Keyboard-accessible color picker and text input synchronization
• Focus preservation during Astro view transitions
• High contrast visual indicators for pass/fail states
• Accessible modal dialogs with proper focus management
• Educational approach to teaching accessibility standards

Clone this project locally and run any of the following commands in your terminal:

The Accessible Astro ecosystem is a collection of projects that are designed to help you build accessible web applications. It includes:

• Accessible Astro Starter: Fully accessible starter for kickstarting Astro projects, with Tailwind.
• Accessible Astro Components: Library of reusable, accessible components built for Astro.
• Accessible Astro Dashboard: User-friendly dashboard interface with a login screen and widgets.
• Accessible Astro Launcher: Command palette/launcher component for Astro projects.
• Accessible Astro Docs: Comprehensive documentation for all Accessible Astro projects.
• Color Contrast Checker: WCAG-compliant color contrast checker with design system token generation.

Check out our roadmap to see what's coming next!

We welcome contributions to improve the Color Contrast Checker! You can help by:

1. Filing an issue
2. Submitting a pull request
3. Starting a discussion
4. Supporting on Open Collective

Your support helps us cover basic costs and continue building accessible solutions for the Astro ecosystem. By becoming a sponsor, you're not just supporting code – you're helping create a more inclusive web for everyone. Every contribution, big or small, helps maintain and improve these accessibility-focused tools.

We want to express our heartfelt gratitude to everyone who contributes to making the web more accessible:

• The Astro team for creating an amazing static site generator and the wonderful Starlight theme
• Our contributors who dedicate their time and expertise to improve these tools
• Our sponsors who help make this project sustainable
• The web community for embracing and promoting web accessibility
• You, the developer for choosing to make your projects more accessible

Together, we're not just building documentation or components – we're creating a more inclusive and accessible web for everyone. Every contribution, whether it's code, documentation, bug reports, or feedback, helps move us closer to this goal. ✨

Remember: Accessibility is not a feature, it's a fundamental right. Thank you for being part of this journey!