“Color Blind Pal”, an app that can display color names for colorblind people on Mac

「Color Blind Pal」アプリアイコン
Updated : Sep 06, 2021

I will introduce “Color Blind Pal”, a Mac app that allows you to display the names of the colors used on the website and adjust the colors to make them easier to see even for people with color blindness.

It’s easy to use and free, so it’s recommended.

 

This page is written for the following people.

  • People who are creating or programming html or css, but are in trouble because they are colorblind and do not know the name of the color on the monitor.
  • People who are having trouble distinguishing the color coding of graphs and topographic maps used on websites.

 

App installation, initial settings

Click the link below to install from Apple’s App Store.

‎Color Blind Pal
‎Color Blind Pal allows people with color blindness or color deficiency to see the colors on their screen more clearly. It also lets developers see what their s...

 

After installing the app, open “System Preferences” and allow access to “Color Blind Pal” from “Security & Privacy” and then “Screen Recording” before launching.

Also, if “ColorBlindPal” is not registered in the application list, click the “+” button to register it.

Mac "System Preferences"

 

 

Also, register in “Login Items” from “Users and Groups” in “System Preferences” so that “Color Blind Pal” can be started automatically when you start your Mac.

Mac "System Preferences"

 

 

This is the end of installation and initial setup.

 

How to find out the colors on the screen

You can display the color name even if you use it as it is, but make it possible to display the color with the RGB and HSV numerical values ​​used in html and css.

Click the “Color Blind Pal” eyeball icon displayed in the menu bar and open “Preferences …” from the displayed menu.

アプリ「Color Blind Pal」のメニューバーのアイコン

 

When the “Preferences” screen opens as shown below, check the “Developer color values” pointed by the arrow.

After checking, this screen will close.

アプリ「Color Blind Pal」のメニューバーのアイコン

 

Now, let’s actually check the colors on the screen.

Click the “Color Blind Pal” eyeball icon displayed on the menu bar and open “Open Color Selector” from the displayed menu.

アプリ「Color Blind Pal」のメニューバーのアイコン

 

The following video is checking the colors on the screen with “Color Selector”.

When you specify the location with the mouse pointer, the color name and RGB / HSV numbers are displayed in a small window at the bottom right.

 

How to adjust to a color that is easy to see even if you are colorblind

There are three types of colorblindness:

If you don’t know what type you are, try changing the type settings as described below and see what they look like in the “Color Window”.

Name Description
Protanopia
  • Red is hard to see
  • 25% of colorblind people
Deuteranopia
  • Green is hard to see
  • 75% of colorblind people
Tritanopia
  • Blue is hard to see

 

So, here’s how to change the colorblind type setting.

Click the “Color Blind Pal” eyeball icon displayed in the menu bar and open “Preferences …” from the displayed menu.

アプリ「Color Blind Pal」のメニューバーのアイコン

When the “Preferences” screen opens as shown below, set the “Color blindness type” indicated by the arrow.

Once set, this screen will close.

If you do not know your type, set in the order of “Deuteranopia (hard to see green)” and “Protanopia (hard to see red)”, which will be explained later.

(Check how it looks in the “Open Color Window”.)

アプリ「Color Blind Pal」のメニューバーのアイコン

 

Now, let’s use the “Color Window”, which makes it easier to see even if you are colorblind.

Click the “Color Blind Pal” eyeball icon displayed on the menu bar to open the “Open Color Window” from the displayed menu.

アプリ「Color Blind Pal」のメニューバーのアイコン

 

The following is the display of the “Color Window”.

There are two places that the arrow points to.

  • Click “Actual” … Actual display mode
  • Click “Shift” … A mode that makes it easier for people with color blindness to see

The figure below shows the actual display mode by clicking “Actual”.

Mac app "ColorBlindPal"

 

On the other hand, the figure below shows a mode in which colorblind people can easily see by clicking “Shift”.

By the way, I am “Protanopia”, so it is difficult to see red, but the difference in color in the graph on the left is now clearly visible.

Mac app "ColorBlindPal"

 

That’s all for the explanation.

The part of the graph in the text uses the article of the following site.

配色のバリアフリー
情報の伝わりやすさは「資料の作り方」に大きく左右されます。本ページでは、伝わる資料を作るためのデザインルールやテクニックを紹介します。

 

Reference information

 

This is all for the articles on this page.

コメント

タイトルとURLをコピーしました