For my final project at Flatiron School, I’m building a mobile calendar diary application for kids with React Native and it’s been a challenging yet mostly enjoyable endeavor. I’m learning React Native on the fly and also thinking about how to make the app easy to use for my end users, elementary and middle-school students. A fun feature I decided to incorporate is the ability to select your “color mood” for the day. I can associate how I’m feeling through colors and thought it could be another way for the students to express themselves.
Once a student selects their color, it changes the background entry component to that selected color. And once the entry is submitted, a circle with the background color set to the chosen color appears over the date in the calendar view. Then the selected color is stored as a string with its hexadecimal color.
Hexadecimal Color
A hexadecimal color is specified as: #RRGGBB - RR (red), GG (green), and BB (blue) are hexadecimal integers between 00 and FF which specify the intensity of the color. Hexadecimal colors are supported on all browsers and the values can be easily stored as strings in a database, which appealed greatly to me. Of course, there are other ways to store color values but this works for me.
Now comes the fun part. As I initially had the date’s default color set to black, it would create too much contrast when the selected color was dark. Not a good user experience and definitely not site accessible.
I needed a way to determine when to use black or white text depending on the brightness provided with the selected color. Then I came across W3C's resources for ensuring that the foreground and background color combinations provide adequate contrast. Site accessibility is something I haven't thought too much about in my coding journey but it is far too important to not and I aim to make products that are user inclusive.
YIQ & Color Brightness
To determine color brightness the hex value can be converted to an RGB value which is then converted to a YIQ value, a color space used by the National Television System Committee color TV system. YIQ conversion happens by multiplying the Red value by 299, the Green value by 587, and the Blue value by 114, adding up the results of each, and then dividing by 1000.
The range for color brightness difference is 125. If the brightness is greater than 125, I want to use black text, and if it's less than 125 I would select white text.
And here it is implemented in my app with a variety of selected colors:
It's something that may seem small but it will ensure a more pleasant user experience for all.
Resources
W3C Color Contrast
YIQ
HEX Colors
Top comments (1)
Love how you walked us through the though process! Pretty neat how the hexadecimal math works too.