Color & accessibility tools
Color work on the web splits between picking colors that work together and making sure they work for everyone who views them. Converting a design color between formats, building a palette of tints and harmonies from one base color, and checking that text stays readable against its background are separate tasks that come up in nearly every UI, and getting any one of them wrong shows up immediately once the page ships.
The Color converter shows one color in seven formats at once, including HEX, RGB, HSL, HSV, CMYK, Lab and OKLCH, so you're not guessing at conversions between design tools. For accessibility, the Color Contrast Checker verifies foreground and background pairs against WCAG thresholds, while the APCA contrast calculator applies the newer APCA perceptual model for a closer read on readability. The Color Blindness Simulator compares colors and images side by side under simulated vision models, catching palette choices that fail color-blind users.
5 tools
All Color & Accessibility tools
-
Color Blindness Simulator
Compare colors and images with simulated vision models side by side
-
Color converter
See one color in seven formats: HEX, RGB, HSL, HSV, CMYK, Lab and OKLCH
-
Color palette generator
Build color harmonies and tints from a base color with CSS export
-
Color Contrast Checker
Verify text foreground and background color contrast against WCAG
-
APCA contrast calculator
Calculate APCA perceptual contrast for readable text on screens
Color & Accessibility tools FAQ
WCAG's contrast ratio is a simple luminance formula that treats light and dark text asymmetrically in ways that don't match perception well. APCA models perceptual contrast more closely. The Color Contrast Checker covers WCAG thresholds, and the APCA contrast calculator applies the newer APCA model to the same pair of colors.
Simulating vision deficiencies is the only reliable way to check, since color-blindness affects color perception in ways that aren't visible by just looking at the original. The Color Blindness Simulator compares colors and images side by side under several simulated vision models.
OKLCH is designed to be perceptually uniform, so changing its lightness value doesn't shift how saturated a color looks the way HSL sometimes does. The Color converter shows the same color in OKLCH alongside HEX, RGB, HSL, HSV, CMYK and Lab so you can compare them directly.