Color Tutorials
[Author: Bill Fischer]
These tutorials are suitable for persons with a basic knowledge of Photoshop.
Photopea is a web-based Photoshop-like tool that can also work when used in conjunction with The Skiltide extension (external link). Photopea cannot check for CMYK print-ability, however (but that is only a small part of the tutorials).
Photophobia
It is defined as an abnormal sensitivity to light, especially of the eyes, and is reported in most all forms of migraine and many neuro-ophthalmic disorders. Persons with this condition can experience discomfort and flickering from images and text with high value contrast (over 16:1 ratio). They will often use accessibility features on digital devices that dim the brightness or convert screens to grayscale.
Quick Tip Regarding Black & White Color Combinations
To design within the maximum contrast ratio of 16:1, use these color settings:
Almost Black (#222222) with White (#ffffff)
Almost White (#E0E0E0) with Black (#000000)
Adjusting An Existing Image
This example demonstrates how shifting colors toward blue and yellow can improve the color experience for persons with color-blindness.
Number 1: Original Image
Although this image was created utilizing the universal color palette. The color choices did not result in a colorful image for color-blind persons as shown below.
Number 2: Adjusted Image
In this image, the colors were adjusted towards blue and yellow. These colors resulted in a colorful image for color-blind persons as shown below..
Original Image Colorblind & Grayscale Simulations
Red-green color-blind simulation
Yellow-blue colorblind simulation
Grayscale simulation
Adjusted Image Colorblind & Grayscale Simulations
Red-green color-blind simulation
Yellow-blue colorblind simulation
Grayscale simulation
Adjustment Tools Used
I-See-U Universal Color Palette: was used to ensure CMYK printing quality as well as control the attention factor for colors across all color-abilities.
WebAIM Color Contrast Checker: was utilized to darken some of the lines to meet the WCAG 3:1 contrast ratio that I felt was necessary to ensure they read as 'signal'. An outline was added around the parts of the figure that had a sub-par contrast ratio, and the WebAIM Color Contrast Checker was utilized to ensure that it would be high enough to meet the WCAG 3:1 ratio standard.
Photoshop deuteranopia proof set-up: preview was used to adjust all of the colors to maximize the color-experience for red-green colorblindness.
Photoshop Hue and Saturation color adjustment layer: was used to check grayscale quality for persons with photophobia that would be inclined to use grayscale filters.
Silktide Chrome extension: was used to check the quality of the color experience for yellow-blue color blindness.