Design group Agenty zmin are the main enthusiasts of accessible design in Ukraine. They base their projects on the principles of universal design, which include equality and accessibility. In this article designer Alex Kolodko shared some tips on testing design and color accessibility for people with visual impairments.
About 8% of men and 0.5% of women are born with some type of color blindness. Therefore, any site layout should be checked for accessibility for color-blind users, especially when red and green are used simultaneously.
Adobe Photoshop, Illustrator and InDesign have a built-in function, which allows to check layout in terms of two most common types of color blindness: View / Proof Setup / Color Blindness Protanopia and Deuteranopia type. For your convenience it is possible to add a hotkey to enable these modes in Edit / Keyboard Shortcuts.
Besides Adobe, you can also turn to more versatile program Color Oracle. There are versions for MacOS, Windows and Linux. It runs independently of other applications and turns anything that is shown on the screen to the color blindness mode.
This is a program created specifically for MacOS.
Sketch + Stark
For those who design interfaces using Sketch, there is a Stark plugin. This plugin allows to check how contrasting two colors are.
There is a widespread misconception that yellow font on black background (or any other particular color combination) is universally accessible and readable. Science proves that it is a total bullshit.
Light Reflectance Value
Light reflectance value (LRV) is an ability of particular surface to reflect light. The higher LRV, the more light is being reflected, the brighter the color. Readability of a text depends on one thing: the difference of font and background LRVs. The bigger the difference, the higher contrast and legibility of the text.
This difference (D) is measured according to the following formula:
D= [(B1 — B2) / B1] x 100
(where B1 stands for LRV of the light color and B2 is LRV of the dark color)
For example, LRV of blue color (RAL 5013) is 3, and LRV of white color is 88. According to the formula, we can measure their contrast:
D = (88−3)/88 × 100% = 97%.
Now let’s calculate the difference between yellow and black colors’ LVRs. LVR of black color (Traffic Black 9017) equals 2, while LVR of the most acid yellow (RAL Sulfur Yellow) is 71.
D = (71−2)/71 × 100% = 97%.
As you can see, there is no difference whatsoever.
According to The Americans with Disabilities Act accessibility guidelines (ADAAG), minimum recommended contrast for texts and pictograms is 70%. It is not a strict requirement, though: with some colors 60–70% can work just as well.
How to calculate LRV
There is a simple calculator at Asi Signage. However, the palette is limited to a small variety of colors, and it is not quite obvious how they correspond to the colors of RAL or Pantone palettes.
Approximate LRVs for RAL, Pantone and other palettes can be found at e-paint.co-uk.
One more example by Designworkplan with simple matrix for comparison of basic colors.
In the previous picture, some colors with low contrast difference appear to be more readable than other colors with a bigger difference. But it is not correct to compare RBG and LRV. RGB is an additive color model that reproduces the image with the help of the light of the screen. LRV describes the brightness of light that is reflected from the colored surface (this more applies to a subtractive model, such as CMYK). It’s like comparing an image on a screen to the same image on a paper media.
Nuances of fonts perception
Black font on the white background and white font on the black background have the same LVR difference. However, the perception of these fonts is not the same: white font on the black background appears more bold than black on the white.
For instance, FS Millbank font has two separate versions for light and dark background (taking into account inner glow of the letters).
Remembering this is a good idea, when you’re choosing fonts for the project.
P.S. One more unscientific method of measuring color contrast
Turn image into black and white, check brightness contrast. The bigger difference, the better legibility.