Home > Science & Technology > Top Tools To Make Color Blind Friendly Websites

Top Tools To Make Color Blind Friendly Websites

Color blindness is an inability to differentiate colors. This can be a major drawback for the one who is in the design field. Since the color theory is an important feature of a successful design, and lots of decisions are on the feeling and emotions. Above all, approx 18% of all males and 5% of females experience problems with color deficiency. That is to say, 1 of 25 users may not be able to see the website in its full beauty. For these viewers, the website may be messy and images may be unrecognizable.

Color Card

Normal vision is trichromatic, it means that most of us can match any color or tone by a mixture of three primary colors (red, green, and blue).

Dots 'N Doodles Weekly Special Old Holland & AS Plein Air Boards ...

There are a few simple tools to help ensure that your projects are colorblind-friendly.



1. Color Blindness Simulator

CanvasFlip - Colorblind Simulator Alternatives and Similar ...

The online Color Blindness Simulator is a quite popular tool as many people are looking for a way to simulate some form of color vision deficiency. The first version the Color Blindness Simulator was up and running now for many years and it was time to give it a fresh look and feel and some powerful new functionality.

Drag and drop your image or use the old-fashioned upload button.

Zoom in and out with incredible speed.

Use a lens to see the difference between the normal image and the chosen simulation.

Color-blindness-simulator as with the first version it is still possible to simulate all forms of color vision deficiency:

Anomalous Trichromacy

Protanomaly

Deuteranomaly

Tritanomaly

Dichromacy

Protanopia

Deuteranopia

Tritanopia

Monochromacy

Achromatopsia

Achromatomaly

There is also a very colorful initial image available which can be converted into the different types of color vision deficiencies. This way you don’t need to use your images.

2.Color Oracle

Manual Mac | Color Oracle

Color Oracle is an open-source project created by Bernhard Jenn and Nathaniel Vaughn Kelso. The website looks kind shady but this tool works. Some nice features include keyboard shortcuts, application agnosticism, and menu bar access.

Before publishing, you should check your work. Color Oracle and Sim Daltonism both let non-colorblind people simulate color blindness on their screens.

3. Colorblind WebPage Filter

Colorblind Filter

Colorblind Web Page Filter is a web-based tool where you can copy a URL and view a side-by-side. You can copy the filter URL, view them side-by-side in full-screen mode, and view 4 common types of color blindness.

4. Stark

Free Stark Figma Plugin | Figma Elements

Stark is a Sketch plugin that allows you to preview your work in 8 different types of color blindness. In addition to checking if your designs are colorblind-friendly, Stark also contrasts levels if you select two layers.

A spark is a new tool, but it’s really impressive and loves the ability to export.

5. Color Blind Check

Color Blind Test | Test Color Vision by Ishihara Test for ...

 With Color Blind Check you get a tool right in your hands which is easy to use and gives you instant feedback on your color vision abilities. It doesn’t matter what kind of color blindness you are suffering from, with this tool you’ll detect it and get detailed information about the severity and type of your vision deficiency.

This new kind of check offers a broad set of features :

Testing color vision deficiency in two to four minutes.

Quick CBC for testing color blindness in 30 to 60 seconds.

Simple to handle, no special instructions needed.

Pause, restart whenever needed during testing.

Cancel/stop during running tests.

Measuring type and severity of color vision deficiency.

Statistics of how many tests have been taken.

Direct link to most recent Color Blind Check results.

Direct link to highest Color Blind Check score.

Left-hand mode for easy testing.

6. Colorful

Download wallpaper 2560x1440 circles, colorful, arrows, rotation ...

Colorful is an application for mobile devices that provides a fast, easy, and handy way of recognizing colors. The application can assist a color-blind person in detecting colors both in a live video feed from a mobile device’s camera, a photograph that was taken previously, or saved from an email and even photos from various social networks (e.g. Facebook, Live). Colorful uses color interpretation and compensation algorithms and augmented reality technologies that may be integrated into almost every mobile smartphone device. It has won the WPAppItUp contest from Microsoft Corporation and was elected as the Editor’s choice.

Colorful boasts three major features that practically turn it into a one-stop-shop:

Recognize colors with 4 different naming levels, ranging from your basic colors (i.e. Red, Green, Blue, Yellow, etc.) and up to a full dictionary of 16.5 Billion color values (Hexadecimal notation).

7. HueVue: Colorblind Tools

HueVue: Colorblind Tools Alternatives and Similar Apps ...

HueVue is a color tool for the iPhone that helps people with color vision deficiencies (commonly referred to as color blindness) to identify, match, and coordinate colors. If you or someone you know has trouble with colors, or if you’re interested in cool color identification, matching, and coordination tool, then HueVue is for you!

8. ColorBrewer

ColorBrewer 2.0 – Color advice for cartography | Download ...

ColorBrewer, which gives you sequential, diverging, and categorical (sometimes called binary) palettes that are colorblind safe. You can use these and modify them to fit your style guide. “I try to find a good compromise between our colors, the colors that work in ColorBrewer, and the things that look good on the page,” Park said, noting that she’ll tinker with the colors in Illustrator until she’s happy with the palette. “Usually my trick is to tweak the shades a little bit so that the greens have a little bit more blue in them,” Park added. “But the problem with that is that if you’re greens get too blue then you start to look like you have a political map or the colors just don’t read as intuitively.”

ColorBrewer generates colorblind-friendly color palettes. NPR’s Katie Park starts with the colors here and then tweaks to find colors that look good on the page.

9. Gregor Aisch’s chroma tool

Six questions with... Gregor Aisch - Visualising Data

 Gregor Aisch’s chroma tool is also useful for optimizing your diverging color palettes. It can help you take two or more colors and generate a full scale of in-between values.

The chroma.js-powered Color Scale Helper is an easy way to generate sequential and diverging color palettes.

The great thing about picking a palette is that once you have it, you can use it again and again.

 

Taking a few minutes before publishing a project to make sure it’s colorblind-friendly is an easy way to make your work have a bigger impact.

All images belong to their respective owners.

Pradyumna Hegade
Pradyumna Hegade is an electronics engineer, multilinguist, speaker and writer. He's known for his love towards exploring, but is also crazy about anime, travelling and drawing!

Leave a Reply