Day 150 - Creating A Design System • Color Contrast

This is the fifth post on the Design System series that I was doing and fourtunately or unfortunately this will be the last post in this 150 day streak of my writing a blog post a day.

Breaking The 150 Day Streak

From now on I will be writing one post a week maybe but will not stop writing. Current post of mine are not that much helpful and I know that but all I was trying to do was just making a habit of writing something and in doing so learn something new.

Because of this writing everyday and on some programming and computer related stuff I think I have learned alot mostly about Operating Systems and Web Development. Now that aside lets get back to Design System.

Color Contrast

This post wasupposed to be about Grid & Layout but now I am thinking of doing it about Colors again. The reason I am doing this about colors agian is beacuse of color contrast. In this Day 146 I choosed colors for this design system but I choosed them randomly without even thinking about the color contrast issue.

Recently while researching for different Design Systems and how they do the selection of colors and do research on designing different elements of the web I came along this article by W3 which states that there must be a contrast of 4.5:1 for it to have "enough contrast between text and its background so that it can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology)". So I checked my colors with contrast checking tool on the web and most of the colors which I randomly selected were not meeting the requirement except for the purple color.

So before going anywhere else I decided to first correct all the colors and their contrast so that they look good and also accessible for all. Following are the colors that I previously had.

$gray: #8d99ae;
$red: #ec4740;
$green: #28a745;
$blue: #0087e6;
$yellow: #ffbd00;
$orange: #ff6d00;
$purple: #7400b8;
$pink: #bf36b4;

Contrast Checking & New Colors

Next what I did is one by had the color copied on to the Color Contrast Checker and altered the colors slightly so that they meet the contrast requirment of 4.5:1.

Now these are the new colors that I will be including in the Design System but you see here that not all the colors match the ratings of 4.5:1 that I mentioned above. That is because that the colors that do not match the ratings are light colors like yellow and orange and gray. This is becuase majority of the users use the light theme with white backgorund applications and it would be not a good design to use a light color on a white background. You wouldn't even see the color.

What's Next

So that's it for now and probably for some days. I wanted to end this a few weeks ago already but also not wanted to. Right now if you had to look at the commit history of this blog you would see that most of the post of that day were not updated on the day they were supposed to. That because It was getting difficult for me to write every day and also spend time on other projects.

So from now on I will be (for now) writing a blog and week or two and spend more time on building something useful and learn new things in doing so. See You Soon.