CREATIVE CODING

Final proposal | Color contrast generator

7 min readDec 8, 2021

| Table of contents|

01 Introduction
02 Process
03 Color contrast checker for seniors in p5.js
04 R.G.B background & font color checker in Arduino
05 Combine two idea
06 Prototype Design
07 Testing & Conclusion
00 Reference

| Keywords |

Accessibility design, Elder tech, Low vision, Applied physical computing, p5.js, Arduino, Color sensor, R.G.B.

| Introduction |

In my 1st semester in NYU, I am researching about digital technology for seniors. Although people’s digital demand has rapidly increased due to the coronavirus, many of digital products now develop for majority users who mostly 10–50’s. For me, senior(+65) needs to use more digital product. However, There are not many digital product aim for minorities and seniors. The main reason I would like to work on this project is not enough to contrast color. Because the effect of aging on vision, seniors is less able to make out low contrast color combinations

| Process |

Theory

W3C published a recommended minimum contrast ratio(A) of 4.5:1 between text and solid background behind the text. Also, According to eldertech.org, they recommend that designer who develop digital product for senior need to provide a minimum contrast ratio of 7:1 between text and background.

How to calculate colour contrast (B)

Contrast is calculated using “relative luminance”, which is defined as:

“The relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white.”

The relative luminance can be calculated from any colour code (like HEX or RGB).

How to get the L(relative luminance) in RGB color (C)

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

The formula (D) Link

(L1 + 0.05) / (L2 + 0.05)

Visual

Here is my proposal sketch for my midterm.

There is mouse click button on down right corner can change text and background. I am not sure there is color api for senior(+65), if there is, I would like to use for this project. When the function generator both colors, you will know HEX number of this color so that you can get the source for usage. And, Ratio calculator appeal the number of the ratio. Result function enable to pass if the ratio# in above the 7:1 or fail if the ratio # is below 7:1.
Please check my digital sketch proposal below.

Fail : color ratio <4.5
Moderate : 4.5: 1 ≤ color ratio < 7:1
Pass : color ratio ≥ 7:1

The importance of choosing font for seniors (E)
Helvetica, Arial

Color for Text
Important — 7:1 (Result, RGB, L)
Less important — 4.5:1 (Description)

p5.js

The random() Function — p5.js Tutorial
Adding text variables — p5.js Tutorial
MouseClicked — p5.js Tutorial
Else and Else if, AND and OR — p5.js Tutorial

Math.round()(Professor Cotter helped me out) — JavaScript | MDN

Midterm final

Midterm p5.js link

| Color contrast checker for seniors in p5.js |

One of the feedback I received from the last midterm test was that instead of randomly selecting the color, I entered the color myself. After the midterm exam, we learned a lot about the concept of input in p5.js through the class. This concept was once again organized through scott’s video(F). Surprisingly, during the midterm exam, I tried a lot to try and failed, but this time I succeeded easily.

Adding input function(A)
P5.js — — Link click

Test video — — Link click

| R.G.B background & font color checker |

My second project was to make an rgb color picker using arduino. There was no difficulty in making a simple color picker because many people have already made it, so it is easy to find the reference(G). However, the Arduino nano ble33 that we use at school could not be connected continuously due to an unknown error, so I used an Arduino micro instead. It took a considerable amount of time to buy all the supplies, and also had to do soldering-iron for a more stable connection at each part. Also, There are a lot oftechnical problems. Since the value of RGB sensors on the market was a fairly large number, the process of converting it to 0–255, which is the human visual range, was not very understandable at first. Also, through this opportunity, I learned that the conditions for measuring light include not only simple color value, but also quantity and temperature of light. That part I couldn’t quite understand, so I simply converted the three colors of R G B from 0 to 255.

Concept

My professor Andrew helped me a lot in designing this product. Since my product has to detect the font and background color separately , Andrew recommended that each button operate for each color; font and background After he draw the logic, it is not difficult to make an Arduino R.G.B color picker.

Materials List
Arduino Pro Micro — soldering-iron need
TCS34725 RGB Sensor — soldering-iron need
16 x 2 LCD Panel — soldering-iron need
Push-button
2 x 10K Resistors
3 x 220Ω Resistors
470Ω Resistor
RGB LED
7 Pin Female Header Strip (Cut to Length)
10K Potentiometer
Breadboard & Jumpers

Arduino
R.G.B raw value change to 0–255
Arduino code — — Link click

Below is a demonstration video.

Test Background and font color picker

Test video — — Link click

Arduino serial monitor
R1, G1, B1 → Button A → Background color
R1, G1, B1 → Button A → Background color

| Color pick& contrast cal for seniors |

Concept
In my third stage, I wanted to combine two product(p5.js and Arduino) I developed to work simultaneously. I wanted to make a product that the color picker picked font color and background color and calculates those to colors in p5.js. I spent numerous times at this stage.My friend who work at Xr lab, He suggested that Instead of each button sending a separate serial signal, a total of 6 signals (r1, g1, b1, r2, g2, b2) are sent at once. Only the first three digits are related to first button(background color) and the second button is to remaining signals digits are related to second button which is for font color. In p5.js, the designer can designate the signal location where I want it to use, so I found out that it doesn’t matter although there are multiple signals.

Arduino code — — Link click

Receiving data and apply the contrast ratio calculation

P5.js — — Link click

Arduino + p5.js

Test video — — Link click

| Prototype Design |

Again, there are many examples of 3d printers for color picker. Instead of creating from scratch, I want it to add extra button for my font color picker button. Please see my initial sketch below.

| Testing & Reflection |

There is one thing I learned after making the RGB color picker. The color accuracy was quite poor. It is because I have given up on the two conditions mentioned above (quantity and temperature of light). In order to get a more accurate result, I decided to stop 3D prototyping until these two conditions were introduced. Also, I have a desire to make the design of this RGB color picker more ergonomic. Fyi, I decided to do a delivery volunteer for seniors during this winter vacation, and I want to ask them with a simple chart to see how much color affects the recognition rate. Lastly, in the next semester, I wanted to know how much the size and spatial arrangement of information affect the information recognition rate while user watch the screen.