For many users, color contrast can be the difference between accessing content effortlessly and being excluded. A button they can't read, text that blends into the background—these aren't just design flaws; they're barriers that limit usability and inclusion.

With TestParty's Contrast Color Picker, we imagine a world where this isn't an issue. Since over 40% of developers use React, we've forked and designed an open-source React component so any developer implementing a color picker can make it accessible by default.

This is the first version of what will become a constantly updated resource for the developer community.

How We Got Here

At TestParty, we've worked with teams who care deeply about accessibility, and we've seen how challenging it can be to ensure that colors not only look good but also meet the Web Content Accessibility Guidelines (WCAG) of having a 4.5:1 color contrast ratio.

One client, passionate about creating an inclusive product, found themselves bogged down in the process of identifying accessible color combinations. They were stuck switching between spreadsheets, contrast checkers, and design tools—making compliance a slow and fragmented journey.

Determined to make this easier, we first tried creating a spreadsheet of every possible color combination in Chakra UI, complete with contrast ratios and WCAG compliance flags. While helpful, it didn't solve the whole problem. Designers still had to visualize those colors elsewhere, adding extra steps to their workflow and slowing momentum. It wasn't just a one-off issue—it was a recurring bottleneck we'd seen across teams and industries.

With these challenges in mind, we developed the Contrast Color Picker, an open-source React component that transforms accessibility from a hurdle into an intuitive part of every workflow. React is used by over 40% of developers worldwide (Statista), so we extended the popular react-colorful library—already implemented in over 150k GitHub projects—to create a new accessible standard. This ensures developers can seamlessly incorporate accessible color pickers into their designs by default, without compromising ease of use or functionality.

Here's how it helps solve key challenges:

1. Real-Time Feedback: Instantly calculates contrast ratios for selected colors, eliminating trial and error.
2. Visual Context: Displays compliant color combinations directly on UI elements.
3. Multiple Color Formats: Supports Hex, RGB, HSL, and more, fitting seamlessly into any design system.
4. Team Alignment: Acts as a single source of truth for accessible colors, reducing miscommunication and delays.
5. Simplified Workflow: Combines testing and visualization in one tool, removing the need for external resources.

How It Works

Getting started with the TestParty's Contrast Color Picker is quick and simple. Here's what you need to do:

1) Install the Package: Use npm or yarn to install Contrast Color Picker in your project:

# Using npm
npm install @test-party/contrast-color-picker

# Using yarn
yarn add @test-party/contrast-color-picker

2) Set Up in Your IDE: Copy and paste the following example code into your project to see how it works:

import { useState } from 'react';
import { HexColorPicker } from '@test-party/contrast-color-picker';

function App() {
const [foreground, setForeground] = useState("#000000");
const background = "#ffffff"; // Static background color

return (
    <div>
    <h1>TestParty Contrast-Color-Picker</h1>
    <p>Pick a foreground to see real-time contrast analysis.</p>

    <HexColorPicker 
        color={foreground} 
        onChange={setForeground} 
        backgroundColor={background} 
    />

    <div
        style={{
        marginTop: "20px",
        padding: "10px",
        color: foreground,
        backgroundColor: background,
        border: "1px solid #ccc"
        }}
    >
        Preview: This is how your text will look!
    </div>
    </div>
);
}

export default App;

3) Run Your Application: Start your React application, and you'll be able to test foreground colors against a static background while seeing real-time contrast analysis.

Why It Matters

Our Contrast Color Picker isn't just a tool—it's a step toward making accessibility an integral part of how we build. We're shifting accessibility left. By simplifying contrast checks and integrating them into your workflow, it lets you focus on what truly matters: creating designs that include everyone.

Accessibility starts with the tools we choose. Try our Contrast Color Picker today and make every color count: https://www.npmjs.com/package/@test-party/contrast-color-picker.