Improving Color Contrast for Better Accessibility — NADI Health App

3 min readOct 12, 2022

Background

I joined NADI Health as a Senior UI Designer. At the beginning of my design observations, I found that the designs that had been made contained some inconsistencies in the UI Design rules, ranging from visual hierarchy, contrast, consistency, etc. One of the issues I would like to address in this case study is improving color contrast for better accessibility

Problem Statement

In the application of good contrast, the use of two good colors to make good contrast must have at least a 1:7 contrast value with a foreground color of 1 and a background color of 7. Meanwhile, after checking the contrast, the main color is Tiffany Blue (#28DAD1) as the background color and White (#FFFFFF) as the foreground color only gets a value of 1.74:1 which is not enough for the expected contrast value.

Objective

Improving Color Contrast for Better Accessibility

Improving Color Contrast

By looking at the results of checking the previous color contrast. Here I’ve decreased the brightness from Tiffany Blue (#28DAD1) to Bangladesh Green (#0F615D). From the decrease in color brightness that has been done, I get a good contrast value from 1.74:1 to 7.27:1 so that the use of Bangladesh Green as the foreground color and White as the background color gets the expected contrast.

Design Improvement Results

From the results of the previous color improvement, I revamped the UI design that was previously made.

Usability Testing

After revamping the previous design, I checked using usability testing with a total of 30 users with the following conditions:

15 people have partial or total color blindness.
15 people have normal eyes.

With have 4 parameters:

1 → Very bad 😭
2 → Bad 🙁
3 → Good 😀
4 → Very good 😍

Before

After

The results of the Usability Testing above prove that the improvements that have been made have a positive impact on the user and help the user to see and read all the information more clearly.

Conclusion

The results of this improvement prove that the use of good and correct contrast can help the user to see and read all the information properly. This also makes the objectives of the company itself can be conveyed well to the user and makes the user experience much better.