Chromatic — Color Contrast Tool

Web Content Accessibility Guidelines (WCAG) 2.1

WCAG 2.1 compliant means a website or digital content meets the Web Content Accessibility Guidelines (WCAG) 2.1, an international standard by the W3C for making content accessible to people with disabilities, focusing on principles like Perceivable, Operable, Understandable, and Robust (POUR), with Level AA being the common target for legal compliance (like under the ADA) for features like alt text, keyboard navigation, and sufficient color contrast.

Table of Contents

• Getting Started
• Features
• How to Use
  • Setting a Background Color
  • Choosing Text Colors
  • Using Custom Text Colors
  • Swapping Colors
  • Color Blindness Simulation
  • Exporting Colors
  • Sharing Your Palette
• Understanding WCAG Contrast Levels
• Supported Color Formats
• Keyboard Shortcuts
• Tips & Best Practices

Getting Started

Simply open index.html in any modern browser. No installation or build process required.

chromatic/
├── index.html
├── style.css
├── script.js
└── README.md

Features

How to Use

Setting a Background Color

1. Type a color in the "Background Color" input field

   • Use any supported format (see Supported Color Formats)
   • Example: #3b82f6, rgb(59, 130, 246), or blue

2. Or use the color picker — Click the colored square to the left of the input

3. Click "Apply Background" or press Enter

The preview panel will update with your chosen background, and suggested text colors will be generated automatically.

Choosing Text Colors

Once you've set a background color, the Suggested Text Colors section displays up to 6 accessible color options:

• Colors are sorted by contrast ratio (highest first)
• Each suggestion shows:
  • Color swatch
  • HEX code
  • WCAG level badge (AAA, AA, or FAIL)
  • Contrast ratio

Click any suggestion to apply it as the text color. The selected card will show a checkmark.

Using Custom Text Colors

If the suggestions don't match your brand or preference:

1. Enter your desired color in the "Custom Text Color" input
2. A real-time warning will indicate:
   • ✅ Good Contrast — Meets WCAG AA (4.5:1+)
   • ⚠️ Limited Contrast — Only meets AA for large text (3:1+)
   • ❌ Low Contrast — Does not meet accessibility standards
3. Click "Apply Text Color" to use it anyway

Swapping Colors

Need to quickly invert your color scheme?

1. Click the "Swap" button next to "Suggested Text Colors"
2. The background and text colors will be exchanged
3. New suggestions will be generated for the new background

Color Blindness Simulation

Test how your color combination appears to users with color vision deficiencies:

Click any filter button to preview. Click "Normal Vision" to return to standard view.

Exporting Colors

Export your color palette in multiple formats:

1. Click the "Export" button in the header
2. Choose your format:
   • CSS — CSS custom properties (variables)
   • SCSS — Sass variables
   • Tailwind — Tailwind config extension
   • JSON — Complete data including WCAG compliance
3. Click "Copy" to copy the code to your clipboard

Example CSS Export

:root {
  /* Contrast ratio: 12.63:1 */
  --background-color: #1a1a2e;
  --text-color: #ffffff;
  
  /* RGB values */
  --background-rgb: 26, 26, 46;
  --text-rgb: 255, 255, 255;
}

Sharing Your Palette

Share your exact color combination with teammates:

1. Click the "Share" button in the header
2. A URL is copied to your clipboard
3. Anyone opening the link will see your exact colors

URL format: https://yoursite.com/?bg=#1a1a2e&text=#ffffff

Understanding WCAG Contrast Levels

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios:

Large text is defined as:

• 18pt (24px) or larger for regular weight
• 14pt (18.66px) or larger for bold weight

Badge Meanings

Supported Color Formats

Chromatic accepts a wide variety of color formats:

Keyboard Shortcuts

All color suggestions and copyable values are fully keyboard accessible.

Tips & Best Practices

For Designers

1. Start with your brand color as the background, then pick from suggestions
2. Test with color blindness filters before finalizing
3. Aim for AAA when possible — it's better for everyone, not just users with disabilities
4. Consider context — UI elements may need higher contrast than decorative text

For Developers

1. Use the CSS export with custom properties for easy theming
2. Copy the JSON export for programmatic access to all values
3. Bookmark combinations using the share URL
4. Check both light and dark modes — swap colors to test inverse schemes

Common Mistakes to Avoid

• ❌ Using light gray text on white backgrounds
• ❌ Relying solely on color to convey information
• ❌ Ignoring large text requirements (they're more lenient!)
• ❌ Testing only on high-quality monitors

Browser Support

Chromatic works in all modern browsers:

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

Credits

Built with ❤️ by ponITech

Free to use everywhere.

License

MIT License — Use freely in personal and commercial projects.