Colorblind-Friendly Tools
Practical tools to help with color selection, contrast checking, and accessibility.
Color Contrast Checker
Contrast Ratio:21.00:1
WCAG AA (4.5:1 minimum)
WCAG AAA (7:1 minimum)
Preview:
Sample Heading
This is sample paragraph text to demonstrate how the color combination looks in practice. The contrast should be sufficient for comfortable reading.
Colorblind-Friendly Palettes
Blue-Orange
High contrast blue and orange palette
Viridis
Perceptually uniform color scale
Wong Palette
Paul Tol's colorblind-friendly palette
Traffic Light Alternative
Alternative to red-yellow-green
Blue-Orange Color Codes
#0173B2
#DE8F05
#56B4E9
#E69F00
Design Guidelines
Do
- Use high contrast ratios (4.5:1 minimum for normal text)
- Include patterns, textures, or shapes alongside color
- Use blue and orange instead of red and green
- Provide text labels for color-coded information
- Test your designs with colorblind simulation tools
- Use tools like Color Oracle or Coblis for testing
Don’t
- Rely on color alone to convey information
- Use red and green together without alternatives
- Choose colors that are too similar in brightness
- Use low contrast color combinations
- Assume everyone sees colors the same way
- Use color-coded legends without text labels
Color Identifier from Image
Open an image and click anywhere to identify the exact color. Get the color name, hex code, RGB, and HSL values — plus see how it looks through colorblind eyes. Runs entirely in your browser.
Try the Color Identifier →