Home » Topics »

Colorblind Web Page Filter Colorblind Web Page Filter

Use the Colorblind Colorlab to select safe colors earlier in the design process.

Visual design Accessibility

Visit site »

UX Lift newsletter

Join with hundreds of other creatives and get a roundup of the best UX articles, resources and tools every week.

Get the newsletter

Related articles

Stop using Material Design text fields!

Although it is common on the web, and is in some of the images below, you should never make visible form fields without a visible label.

Visual designAccessibility

Leonardo

Create beautiful, accessible, and adaptive color systems using contrast-ratio based generated colors.

Visual designAccessibility

Accessible color palette builder

This is a tool to help designers build color palettes with combinations that conform with accessibility standards.

Visual designAccessibility

Accessible Colours

We evaluate your color combination using the WCAG 2.0 guidelines for contrast accessibility. If your combination does not meet the guidelines, we find the closest accessible combination by modifying the color lightness.

Visual designAccessibility

Pa11y

Here at Pa11y, we think making the web more accessible improves it for everyone. So we publish a range of free and open source tools to help designers and developers make their web pages more accessible:

Visual designAccessibility

Color Safe

Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.

Visual designAccessibility

Colorblind Web Page Filter

Use the Colorblind Colorlab to select safe colors earlier in the design process.

Visual designAccessibility

Designing accessible colour systems

Color contrast is an important aspect of accessibility. Good contrast makes it easier for people with visual impairments to use products, and helps in imperfect conditions like low-light environments or older screens.

Visual designAccessibility

Accessible brand colors

This tool shows you how ADA compliant your colors are in relation to each other. By adding your brand’s colors on the right, you can generate a chart to see how they can be used together for accessibility, and find similar colors that work better.

Visual designAccessibility

Colorable

Take a set color palette and get contrast values for every possible combination – useful for finding safe color combinations with predefined colors and includes pass/fail scores for the WCAG accessibility guidelines.

Visual designAccessibility