Jump to main content
Science Projects

Make a Color Detector App to Help Colorblind People

1
2
3
4
5
42 reviews

Abstract

Do you know anyone who is colorblind, or are you colorblind yourself? What if you could carry a device in your pocket that could identify colors for you? Many people already carry around the device they need to do this - a smartphone! Since phones have built-in cameras, you can make an app that uses the camera to identify colors. In this project you will use a program called MIT App Inventor that makes it easy for anyone, even with no programming experience, to design your own mobile app. 

Summary

Areas of Science
Computer Science
Human Biology & Health
Difficulty
Method
Engineering Design Process
Time Required
Short (2-5 days)
Prerequisites

None

Material Availability

Readily available

Cost
Very Low (under $20)
Safety

No issues

Credits
Ben Finio, PhD, Science Buddies
Science Buddies is committed to creating content authored by scientists and educators. Learn more about our process and how we use AI.
https://www.youtube.com/watch?v=EO67-HnE-Hw

Objective

Make a color detector app to help colorblind people identify colors using a smartphone. 

Introduction

Human color vision depends on our eyes' ability to detect red, green, and blue light using special cells called cones. Other colors that we perceive are made from combinations of these three primary colors - for example, red and green light combined make yellow (Figure 1). All three colors combined make white, and the absence of any light appears black. This process is called additive color mixing. It is different from subtractive color mixing - what you might be used to with using paint - where you get dark brown or black when you mix all the colors together. 

Additive color mixing wheelImage Credit: DemonDays64 / Creative Commons Attribution 4.0 International
Figure 1. Additive color mixing with red, green, and blue lights aimed at a white wall.

Some people have color blindness, also called color vision deficiency (CVD). Due to problems with how their cone cells function, they can have trouble telling apart certain colors. While many types exist, the most common type is red-green color blindness. People with normal color vision should see the number "74" in Figure 2, but people with red-green color blindness will have difficulty seeing the numbers.

An Isahara color test plate for red-green color blindness showing the number 74 in green on a red backgroundImage Credit: Shinobu Isihara / Public Domain
Figure 2. A red-green colorblindness test.

In this project, you will develop a mobile app that uses your phone's camera to take a picture, and lets the user tap on a spot on the picture to identify the color. To do this, you need to understand how screens (computers, TVs, phones, etc.) display color. Screens are made up of millions of individual pixels. Each pixel is usually made up of three subpixels - one red, one green, and one blue (Figure 3).

Close-up of red, green, and blue subpixels on a TV screenImage Credit: Ashkananisi7 / Creative Commons Attribution-Share Alike 4.0 International
Figure 3. Close-up of red, green, and blue subpixels on a TV screen.

The subpixels are so small and close together that the human eye cannot see them individually. Instead, the colors blur together and we see a single color controlled using the RGB color model. Each subpixel can have a value between 0 (off) and 255 (full brightness). So, for example, an RGB value of 255, 0, 0 means that the red subpixel is at maximum brightness and the green and blue subpixels are off. The resulting pixel will appear red. Since there are 3 subpixels, that means there are 255×255×255=16,581,375 possible colors! Many computer drawing and graphics programs will let you pick an exact color by using slider bars or entering numbers to select the R, G, and B values separately (Figure 4). 

Typical RGB slider bars in a computer graphics programImage Credit: Nicky Nouse / Public domain
Figure 4. An example of typical RGB slider bars in a computer graphics program, with the resulting orange-ish color on the right. 

While there are over 16 million colors in the RGB color space, not all of them have names. Table 1 shows 16 common color names, which were originally defined in the earlier days of computers when monitors could not display millions of colors. In this project, we will show you how to set up a basic color detector app that can tell the difference between red and green. Next, you'll choose additional colors from Table 1 or an extended list that you want your app to recognize. You can customize your app to help tell apart colors for various types of color blindness, match paint or fabric colors, or for any other specific application you're interested in! 

Swipe left to see more
Swipe left to see more
  Name Red Green Blue
  White 255 255 255
  Silver 192 192 192
  Gray 128 128 128
  Black 0 0 0
  Red 255 0 0
  Maroon 128 0 0
  Yellow 255 255 0
  Olive 128 128 0
  Lime 0 255 0
  Green 0 128 0
  Aqua 0 255 255
  Teal 0 128 128
  Blue 0 0 255
  Navy 0 0 128
  Fuchsia 255 0 255
  Purple 128 0 128

Table 1. 16 basic named colors in the RGB color space.

Terms and Concepts

Questions

Bibliography

Materials and Equipment

Experimental Procedure

Download PDF of Procedure
This project follows the Engineering Design Process. Confirm with your teacher if this is acceptable for your project, and review the steps before you begin.

Getting Started with App Inventor

If you have never used App Inventor before, follow these steps. If you are already familiar with App Inventor, skip to the next section.

  1. Follow the instructions on the Setting Up App Inventor page to set up your computer and phone for designing and testing apps.
    1. We recommend Option 1 (phone and Wi-Fi connection). You can wait to do step 3 of this process until after you have started creating your app in the next section.
    2. You can use Option 4 (phone and USB cable) if you have difficulty connecting to Wi-Fi. 
    3. We do not recommend trying this project with Option 2 (Chromebook) or Option 3 (emulator).
  2. Read the Designer and Blocks Editor page for an overview of the App Inventor interface. Refer back to this page if you have trouble finding features when following the instructions below.
  3. Follow the Beginner Tutorials to learn how to use App Inventor.

Creating a Basic Camera App

When making an app (or any piece of software), it is usually best to develop and test it one piece at a time. This makes it easier to identify any problems. This section will show you how to create a basic app that takes a picture and displays it on your phone's screen. We will add color picker functionality in the next section.

  1. Create a new project in App Inventor and give it a name. You can leave the Toolkit and Theme options set to Default.
  2. In the Designer tab, select your phone type from the drop-down menu (Android or iOS).
  3. Add the following components to the Viewer:
    1. A canvas (under Drawing and Animation in the Palette)
    2. A button (under User Interface in the Palette)
    3. A camera (under Media in the Palette)
  4. Use the Properties pane to adjust the appearance of your canvas and button. Figure 5 shows an example, but the exact design of your app is up to you. 
    1. The default canvas is very small. It will eventually display a picture, so try making it bigger.
    2. Change the button text to something that will make more sense to the app user, like "Take Picture."
    3. Note that the camera component will appear at the bottom of your screen under "Non-visible components," so you cannot adjust its appearance in the Viewer.
App Inventor viewer screenshot with a canvas and a take picture buttonImage Credit: Ben Finio / Science Buddies
Figure 5. Layout for a basic app with a "take picture" button and a canvas to display the picture.
  1. Switch to the Blocks tab and build the program shown in Figure 6. The blocks you need can be found under "Screen1" in the blocks pane.
    1. The when Button1.Click block is under Button1.
    2. The call Camera1.TakePicture block is under Camera1.
    3. The when Camera1.AfterPicture block is under Camera1.
    4. The set Canvas1.BackgroundImage to block is under Canvas1.
    5. The get image block is available by hovering over the word image in the when Camera1.AfterPicture block.
app inventor code for basic camera appImage Credit: Ben Finio / Science Buddies
Figure 6. Blocks for basic camera app.
  1. Set up the app on your mobile device. Our instructions here are based on Option 1 from the Setting Up App Inventor page.
    1. In App Inventor on your computer, select Connect→AI Companion.
    2. Open the MIT App Inventor Companion app on your phone.
    3. Tap the "scan QR code" button.
    4. Hold your phone up to your computer screen and scan the QR code.
    5. Wait for the app to load on your phone. You should see a screen like Figure 7.
Screenshot of basic camera app before taking a pictureImage Credit: Ben Finio / Science Buddies
Figure 7. Screenshot of basic camera app before taking a picture.
  1. Tap the "Take Picture" button and take a picture with your phone's camera. The picture should now display in the canvas (Figure 8).
    1. Note: depending on your mobile device, the picture may appear rotated by 90 degrees. Detecting the image orientation and rotating it to be vertical is more complicated than it seems at first, so it is OK to leave the image sideways for this project.
  2. If needed, adjust the size of your canvas and re-test your app before you move to the next section.
Basic camera app after taking a pictureImage Credit: Ben Finio / Science Buddies
Figure 8. The camera app after taking a picture.

Detect RGB Color Values

In this section, you will add functionality to your app to let the user tap on the image and get the RGB color value of that pixel.

  1. Go back to the Designer tab. You will need to add six labels (under "User Interface" in the palette).
    1. Labels are boxes that display text, but unlike buttons, you cannot click on them (and they are different from text boxes, which allow the user to input text).
    2. Three of the labels will just display the text "R," "G," and "B."
    3. The other three labels will display the corresponding numeric RGB values.
    4. How you arrange the labels in the app is up to you.
      1. The example in Figure 9 uses three "HorizontalArrangement" layout features (under "Layout" in the Palette) to put the labels next to each other.
      2. You can adjust the appearance and location of your labels and arrangements in the Properties pane.
Six labels arranged in three rows and two columns in the appImage Credit: Ben Finio / Science Buddies
Figure 9. Six labels, arranged in three rows using three HorizontalArrangement elements to put them side by side in pairs.
  1. In the Properties pane, you can change the default text that displays for each label by editing the "Text" field. 
    1. For example, Figure 10 shows the text for Label1, Label3, and Label5 from Figure 9 changed to "R:", "G:", and "B:" respectively.
    2. You do not need to change the text for labels 2, 4, and 6, because it will automatically be overwritten later with the RGB pixel values. 
default label text changed to R, G, and BImage Credit: Ben Finio / Science Buddies
Figure 10. Default label text changed.
  1. You may wish to change the default names of your components in the Components pane so they are easier to identify when you are writing your program.
    1. You can do this by selecting a component in the Components pane and then clicking the Rename button.
    2. For example, Figure 11 shows the HorizontalArrangement1 component renamed to "RedLabels" and the corresponding labels (originally Label1 and Label2) renamed to "Red" and "RedValue" respectively.
    3. You can make similar changes to the other components and labels. 
components renamed in components paneImage Credit: Ben Finio / Science Buddies
Figure 11. Components renamed in the components pane. 
  1. Look at the code shown in Figure 12. This code does several things:
    1. Detects where the user touches the canvas.
    2. Gets the RGB pixel values and stores them in separate variables called red, green, and blue. 
    3. Updates the RedValue, GreenValue, and BlueValue labels to show the corresponding RGB values.
  2. Go back to the Blocks tab. Build the code shown in Figure 12. This code is more complicated than what you did in the previous section, so take your time! Watch the video tutorial if you need help finding the individual blocks, but here is a quick reference:
    1. The when Canvas1.Touched block is under Canvas1.
    2. The initialize local name to block is under Variables. Click the gear icon to add more than one variable by dragging an additional name block and snapping it into the local names block.
    3. The select list item block is under Lists.
    4. The blank 0 block for a constant number is under Math.
    5. The split color block is under Colors.
    6. The call Canvas1.GetPixelColor block is under Canvas1.
    7. The get x and get y blocks are available either by mousing over the x and y variables in the when Canvas1.Touched block, or under Variables.
    8. The set Value.Text to blocks are available under the corresponding labels (this is why it helped to rename them earlier!).
color picker codeImage Credit: Ben Finio / Science Buddies
Figure 12. Color picker code to detect and display RGB pixel value.
  1. Test your app again.
    1. If you left the app open, it may have automatically updated to include your new code. If not, you may need to close the App Inventor Companion and re-scan a new QR code.
    2. You should now be able to take a picture, and tap anywhere on the picture to display the RGB pixel values (Figure 13).
app with camera and RGB color picker functionalityImage Credit: Ben Finio / Science Buddies
Figure 13. App with camera and pixel RGB value identifier.
  1. If you want to make adjustments to your app based on your testing, such as the size, position, or font of the labels, make changes before you move to the next section.

Identify Named Colors

The previous section showed you how to build an app that displays the RGB value of a pixel in an image. This section will show you how to add very simple code to identify whether a color is more red or more green. This app could help a red-green colorblind person tell the difference between red and green, but it will not work with other colors. Expanding the code to more accurately classify more colors is up to you!

  1. Add another label in the Designer (Figure 14). Give it a descriptive name in the Components pane, like "ColorName."
A label for displaying color name added to the interfaceImage Credit: Ben Finio / Science Buddies
Figure 14. A label added to display the color name.
  1. Look at the code in Figure 15. This code compares the red and green values for the selected pixel.
    1. If the red value is greater, it changes the text in the ColorName label to "Red."
    2. Otherwise, it changes the text in the ColorName label to "Green."
  2. In the Blocks tab, add the blocks shown in Figure 15.
    1. The if then else block is available under Control.
    2. The comparison _ > _ block is available under Math. Use the drop-down menu to switch from the equals sign to the greater than sign.
    3. The get red block is available by mousing over red in the initialize local red to block (the same applies to green). You can also right-click an existing get red block and select Duplicate.
    4. The set ColorName.Text to block is available under the ColorName label (or whatever you named it).
    5. The blank text block " " is available under Text.
code with if/else statement to compare red and greenImage Credit: Ben Finio / Science Buddies
Figure 15. Code with if/else statement to compare red and green pixel values. 
  1. Test your app again (reconnect/re-scan the QR code if necessary).
    1. Take a picture that has both red and green objects in it.
    2. Tap the red object. Does your app correctly identify the selected pixel as "red"?
    3. Tap the green object. Does your app correctly identify the selected pixel as "green"?
    4. What happens if you tap an object that is another color, like blue or yellow?
  2. The simple code in Figure 15 may work if you already know an object is either red or green. For a person who is red-green colorblind and does not have trouble identifying other colors, this may be sufficient. However, the code only compares the red value to the green value, and completely ignores the blue value. This means, for example, that it will incorrectly report the color purple (RGB values 128, 0, 128) as red because the red value is greater than the green value. 
  3. Using the values in Table 1, can you expand your program to avoid misidentifying certain colors, or to correctly identify more colors?
    1. Can you include the blue value in the condition for your if statement to avoid incorrectly identifying purple as red or teal as green? 
    2. You may want to identify ranges for each color. For example, an RGB value of 250, 0, 0 probably appears very close to true "red," even though it is not exactly 255, 0, 0. 
    3. To combine multiple conditions in an if block, you can use the and and or blocks under Logic. You can learn more about those blocks here: MIT App Inventor Logic Blocks. Figure 16 shows one potential example that checks if the red value is greater than 200, the green value is less than 100, and the blue value is less than 100. According to these criteria, you could classify the color "Crimson" from this extended colors table (RGB values 220, 20, 60) as "red," but purple (RGB values 128, 0, 128) would not be classified as red.
multiple condition if statementImage Credit: Ben Finio / Science Buddies
Figure 16. An if statement with multiple conditions.
  1. Continue iteratively testing and improving your app. For ideas about other features you can add, see the Variations section.
icon scientific method

Ask an Expert

Do you have specific questions about your science project? Our team of volunteer scientists can help. Our Experts won't do the work for you, but they will make suggestions, offer guidance, and help you troubleshoot.
Post a Question

Global Goals

The United Nations Sustainable Development Goals (UNSDGs) are a blueprint to achieve a better and more sustainable future for all.

This project explores topics key to Good Health and Well-Being: Ensure healthy lives and promote well-being for all at all ages.
This project explores topics key to Reduced Inequalities: Reduce inequality within and among countries.

Variations

  • So far, there is no way to tell exactly where you tapped on the image. Can you add something (like a dot or crosshair) so the user knows exactly where they clicked? Hint: add an ImageSprite (available under Drawing and Animation) to your canvas in the Designer. You can then control the location of the spite in the Blocks tab using the set SpriteName.X to and set SpriteName.Y to blocks.
  • There are other ways to convert RGB color values to named color. One alternative to the threshold method described in the procedure is to calculate the distance in three-dimensional space between the selected color and the named colors, and choose the closest named point. Can you implement this method instead?
  • RGB is not the only color system. Hue saturation lightness (HSL) and hue saturation value (HSV) are two alternatives where it can be easier to convert a single value (the hue) to a named color. However, App Inventor does not have a way to automatically detect HSL/HSV values, only RGB. Can you look up how to convert RGB values to HSL or HSV and also display these values in your app? Which set of values is easier to convert to a named color?
  • Can you modify the app to let the user select two points in the image simultaneously to compare their values?
  • Recruit colorblind volunteers for real-world testing of your app. Can you get their feedback and use it to make improvements?
  • Can you design a color-detector app for another purpose, like matching paint or fabric colors?
  • How do lighting conditions affect the RGB values detected by your app? Try taking pictures of the same objects under different conditions (outdoors, indoors under diffuse ambient light, with direct artificial lighting, etc.).

Careers

If you like this project, you might enjoy exploring these related careers:

Computer Software Engineer
Career Profile
Are you interested in developing cool video game software for computers? Would you like to learn how to make software run faster and more reliably on different kinds of computers and operating systems? Do you like to apply your computer science skills to solve problems? If so, then you might be interested in the career of a computer software engineer. Read more
Optometrist
Career Profile
Optometrists are the primary caretakers of our most important sense—vision. They diagnose and detect problems not only with vision, but with the health of the eye and the whole body. Based on their diagnoses, they prescribe glasses, contact lenses, and medications; refer patients to ophthalmologists for surgery; or develop treatment plans, like vision therapy, to help correct for deficits in depth perception. Their work helps people live better at every stage of life. Read more
Software Quality Assurance Engineer & Tester
Career Profile
Software quality assurance engineers and testers oversee the quality of a piece of software's development over its entire life cycle. Their goal is to see to it that the final product meets the customer's requirements and expectations in both performance and value. During the software life cycle, they verify (officially state) that it is possible for the software to accomplish certain tasks. They detect problems that exist in the process of developing the software, or in the product itself.… Read more
Occupational Therapist
Career Profile
Think of all the things you do as you go about your day, like putting on your shoes, buttoning your shirt, turning on a faucet, typing on a keyboard, going grocery shopping, picking up laundry, making a sandwich, or using a spoon. Now imagine trying to maintain your independence if an injury or illness made it difficult for you to use your hands, move your arms, or even walk. Occupational therapists are the healthcare providers who help people regain independence by developing or restoring… Read more

News Feed on This Topic

 
, ,

Cite This Page

General citation information is provided here. Be sure to check the formatting, including capitalization, for the method you are using and update your citation, as needed.

MLA Style

Finio, Ben. "Make a Color Detector App to Help Colorblind People." Science Buddies, 22 Aug. 2024, https://www.sciencebuddies.org/science-fair-projects/project-ideas/CompSci_p075/computer-science/color-detector-app-for-colorblind-people. Accessed 18 June 2026.

APA Style

Finio, B. (2024, August 22). Make a Color Detector App to Help Colorblind People. Retrieved from https://www.sciencebuddies.org/science-fair-projects/project-ideas/CompSci_p075/computer-science/color-detector-app-for-colorblind-people


Last edit date: 2024-08-22

Explore Our Science Videos

Quick Links X
Top
Free science fair projects.