Skip to main content

Color vision & contrast demo

Explore how a symbol stands out against a colored background. This illustration is not a validated color blindness test and does not give a screening result.

Grayscale removes hue. It is not a simulation of any specific color vision deficiency.

Symbol: #E76F51 · Background: #2A9D8F

What this example can tell you

The shape may become easier or harder to distinguish when you switch colors or remove hue. That illustrates why interfaces should use labels and shapes as well as color. Your screen settings also affect the image.

Looking for a color blindness test?

This page cannot tell whether your color vision is typical or identify a deficiency. For an assessment, an eye care professional can use appropriate color vision tests. Read the National Eye Institute guide to color vision testing.

Testing guide

How to explore the color contrast example

This educational example compares a triangle with its background. It is not an Ishihara plate, a validated screening, or a medical assessment.

Use these patterns as visual checks or browser estimates. Understand the limits or record your monitor checks.

Best for

  • Exploring color and brightness contrast.
  • Understanding why a design should not rely on color alone.

How to run the test

  1. 1Choose a color pair.
  2. 2Switch the grayscale comparison on and off.
  3. 3Compare the shape visibility without treating it as a health result.

How to read the result

There is no pass or fail score.

Different displays and settings can change the appearance.

Grayscale does not simulate a specific color vision deficiency.

Related tools and guides

Frequently asked questions

Can this diagnose color blindness?

No. These color pairs have not been validated for screening. An eye care professional can assess your color vision using appropriate tests.

Why is there no score?

A score on unvalidated patterns could give false reassurance or unnecessary concern. This page is an illustration only.