Free Color Blindness Test Online

👁️ Free Color Blindness Test: Check Your Color Vision Online

Do you see colors the same way everyone else does? Whether you want to test your color contrast sensitivity, challenge your friends to see who has “Eagle Eyes,” or check if you have trouble distinguishing subtle hues, our color blindness test online offers a quick, interactive way to test your eyes.

How to Take the Test:

  1. Click Start Test to begin the 30-second countdown.
  2. Scan the grid and click the single tile that has a slightly different shade.
  3. Every correct answer increases the grid size and makes the shade difference subtler.
  4. Try to score 25+ points before time runs out!
Free color blind test online

👁️ Color Vision Test

Tap the box with the slightly different shade. You have 30 seconds!

/* Base Container */ #sc-color-test-app { background: #ffffff; border-radius: 16px; padding: 24px 16px; max-width: 440px; width: 100%; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; box-shadow: 0 8px 25px rgba(0,0,0,0.06); border: 1px solid #eaeaea; text-align: center; box-sizing: border-box; -webkit-user-select: none; user-select: none; touch-action: manipulation; } #sc-color-test-app .sc-header h2 { margin: 0 0 6px 0; color: #222; font-size: 22px; font-weight: 700; } #sc-color-test-app .sc-header p { color: #666; font-size: 14px; margin: 0 0 16px 0; }/* HUD */ #sc-color-test-app .sc-hud { display: flex; justify-content: space-between; font-size: 17px; font-weight: bold; color: #333; margin-bottom: 12px; padding: 8px 16px; background: #f8f9fa; border-radius: 8px; border: 1px solid #eee; } #sc-color-test-app #sc-timer { color: #e53e3e; } #sc-color-test-app #sc-score { color: #3182ce; }/* Board Container - Strict Square */ #sc-board-container { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1 / 1; margin: 0 auto; background: #f1f3f5; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 8px; }/* Game Board Grid */ #sc-board { display: none; width: 100%; height: 100%; box-sizing: border-box; }/* Tiles with Mobile Touch Fixes */ .sc-tile { width: 100%; height: 100%; aspect-ratio: 1 / 1; min-height: 0; /* Prevents grid overflow on mobile */ border-radius: 6px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 0.05s ease; } .sc-tile:active { transform: scale(0.94); }/* Overlay Screens */ #sc-color-test-app #sc-start-screen, #sc-color-test-app #sc-game-over { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.96); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; z-index: 10; }#sc-color-test-app #sc-result-title { font-size: 26px; margin: 0 0 8px 0; color: #222; } #sc-color-test-app #sc-result-text { font-size: 17px; margin: 0 0 8px 0; color: #555; } #sc-color-test-app #sc-diagnosis { font-size: 16px; margin: 0 0 16px 0; line-height: 1.4; }/* Button Styling */ #sc-color-test-app .sc-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; border: none; padding: 14px 32px; font-size: 16px; font-weight: 700; border-radius: 30px; cursor: pointer; box-shadow: 0 4px 15px rgba(118, 75, 162, 0.35); touch-action: manipulation; -webkit-tap-highlight-color: transparent; } #sc-color-test-app .sc-btn:active { transform: scale(0.97); }/* Responsive tweak for smaller phone displays (iPhone SE, etc.) */ @media (max-width: 360px) { #sc-color-test-app { padding: 16px 10px; } #sc-color-test-app .sc-header h2 { font-size: 19px; } }(function() { let score = 0; let timeLeft = 30; let timerInterval = null; let level = 1;window.startColorTest = function() { score = 0; timeLeft = 30; level = 1; const scoreEl = document.getElementById('sc-score'); const timerEl = document.getElementById('sc-timer'); if (scoreEl) scoreEl.innerText = score; if (timerEl) timerEl.innerText = timeLeft; document.getElementById('sc-start-screen').style.display = 'none'; document.getElementById('sc-game-over').style.display = 'none'; document.getElementById('sc-hud').style.display = 'flex'; document.getElementById('sc-board').style.display = 'grid'; startTimer(); renderBoard(); };function startTimer() { if (timerInterval) clearInterval(timerInterval); timerInterval = setInterval(function() { timeLeft--; const timerEl = document.getElementById('sc-timer'); if (timerEl) timerEl.innerText = timeLeft; if (timeLeft 5 ? '3px' : '6px';// Random Base Color const hue = Math.floor(Math.random() * 360); const saturation = Math.floor(Math.random() * 40) + 45; const lightness = Math.floor(Math.random() * 40) + 30;// Difficulty difference const diff = Math.max(22 - level, 2.5); const isLighter = Math.random() > 0.5; const targetLightness = isLighter ? (lightness + diff) : (lightness - diff);const baseColor = 'hsl(' + hue + ', ' + saturation + '%, ' + lightness + '%)'; const targetColor = 'hsl(' + hue + ', ' + saturation + '%, ' + targetLightness + '%)';const targetIndex = Math.floor(Math.random() * totalTiles);// Build Tiles for (let i = 0; i < totalTiles; i++) { const tile = document.createElement('div'); tile.className = 'sc-tile'; if (i === targetIndex) { tile.style.backgroundColor = targetColor; tile.onclick = onCorrectClick; } else { tile.style.backgroundColor = baseColor; tile.onclick = onWrongClick; } board.appendChild(tile); } }function onCorrectClick(e) { if (e) e.preventDefault(); score++; level++; const scoreEl = document.getElementById('sc-score'); if (scoreEl) scoreEl.innerText = score; renderBoard(); }function onWrongClick(e) { if (e) e.preventDefault(); timeLeft = Math.max(0, timeLeft - 1); const timerEl = document.getElementById('sc-timer'); if (timerEl) timerEl.innerText = timeLeft; const container = document.getElementById('sc-board-container'); if (container) { container.style.transform = 'translateX(-4px)'; setTimeout(function() { container.style.transform = 'translateX(4px)'; }, 50); setTimeout(function() { container.style.transform = 'translateX(0)'; }, 100); } }function endGame() { if (timerInterval) clearInterval(timerInterval); const board = document.getElementById('sc-board'); const hud = document.getElementById('sc-hud'); const gameOverScreen = document.getElementById('sc-game-over'); if (board) board.style.display = 'none'; if (hud) hud.style.display = 'none'; if (gameOverScreen) gameOverScreen.style.display = 'flex'; document.getElementById('sc-result-text').innerText = 'You scored ' + score + ' points!'; let diagnosis = ""; if (score < 10) { diagnosis = "Possible Color Deficiency / Hard to spot hues 🧐"; } else if (score < 20) { diagnosis = "Normal Color Vision! 👍"; } else if (score < 28) { diagnosis = "Superior Color Sensitivity! 🔥"; } else { diagnosis = "Absolute Eagle Eyes! 🦅 Tetrachromat Level!"; } document.getElementById('sc-diagnosis').innerText = diagnosis; } })();

What Does Your Color Vision Score Mean?

Our color test measures your eye’s ability to distinguish subtle variations in hue, saturation, and luminance under time pressure:

  • 0 – 9 Points (Low Sensitivity / Possible Color Deficiency): You had difficulty distinguishing subtle shade differences. If you frequently struggle to tell reds from greens or blues from yellows in real life, you may want to consult an optometrist for an official Ishihara plate assessment.
  • 10 – 19 Points (Normal Color Vision): You have standard color discrimination. Your cones detect common color shifts without major issues in day-to-day settings.
  • 20 – 29 Points (Superior Color Sensitivity): Above average! You have excellent hue contrast detection and sharp visual reflexes—traits common among graphic designers, photographers, and visual artists.
  • 30+ Points (Eagle Eyes / Tetrachromat Level): Exceptional color perception! You can detect micro-variations in saturation that most human eyes blend together.

What Is Color Blindness (Color Vision Deficiency)?

Color blindness—clinically known as Color Vision Deficiency (CVD)—affects how you perceive colors under normal lighting conditions. It is not usually a form of blindness where you see the world in black and white; rather, it means certain colors appear faded, muddied, or indistinguishable from one another.

Inside the human retina, there are two main types of photoreceptors: rods (which handle night vision and light intensity) and cones (which process color). Humans typically have three types of cones:

  1. Red-sensing cones (L-cones)
  2. Green-sensing cones (M-cones)
  3. Blue-sensing cones (S-cones)

When one or more of these cone types are missing, damaged, or respond to shifted wavelengths, color vision deficiency occurs.

Common Types of Color Blindness

Color vision deficiencies generally fall into three main categories:

1. Red-Green Color Blindness (Most Common)

Red-green color blindness affects approximately 8% of men and 0.5% of women of Northern European descent. It is genetic and carried on the X chromosome.

  • Deuteranomaly / Deuteranopia: Reduced sensitivity or complete absence of green cone cells. Greens appear more beige or red, and reds can look brownish.
  • Protanomaly / Protanopia: Reduced sensitivity or complete absence of red cone cells. Reds appear dark or brownish-black, and certain green shades resemble yellow.

2. Blue-Yellow Color Blindness (Tritanopia / Tritanomaly)

Much rarer than red-green deficiency, this condition occurs when the blue (S) cones are absent or malfunctioning. Blue looks greenish, and yellow can appear light grey or violet. This type affects men and women equally.

3. Total Color Blindness (Monochromacy / Achromatopsia)

An extremely rare condition (affecting roughly 1 in 30,000 people) where no color cones function properly. Individuals with monochromacy perceive the world entirely in shades of black, white, and grey, and are typically very sensitive to bright light.

Subtle Signs You Might Have a Color Vision Deficiency

Many people go years without realizing their color perception differs from others. Common signs include:

  • Confusing dark blue and black socks or shirts.
  • Struggling to tell whether meat is fully cooked when grilling.
  • Having difficulty differentiating ripe vs. unripe fruit (like green vs. yellow bananas).
  • Finding color-coded spreadsheets, charts, or maps confusing without labels.
  • Difficulty identifying traffic signal changes at night or in heavy fog.

Frequently Asked Questions (FAQ)

Can an online color test diagnose color blindness?

No. Interactive online hue tests are engaging screening tools designed to test color discrimination and contrast sensitivity. A definitive medical diagnosis requires clinical testing—such as the Ishihara 38-Plate Test, the Farnsworth-Munsell 100 Hue Test, or an anomaloscope exam conducted by a licensed eye care specialist.

Why is color blindness more common in men?

The genes responsible for red and green cone pigments are located on the X chromosome. Men have only one X chromosome (XY), meaning a single recessive gene causes color blindness. Women have two X chromosomes (XX), so both chromosomes must carry the gene for color deficiency to present itself.

Can color blindness be cured?

Currently, congenital (inherited) color blindness cannot be cured, though gene therapy trials are ongoing in research settings. However, specialized color-correcting lenses (such as EnChroma glasses) can help enhance contrast and differentiation between confusing color boundaries for certain types of red-green deficiencies.


⚠️ Medical Disclaimer: This test is intended for educational and entertainment purposes only. Screen brightness, display panel type (OLED vs. IPS), ambient room lighting, and device night-mode filters (True Tone / Blue Light filter) can alter color presentation. Consult an optometrist or ophthalmologist for professional medical diagnosis.

{ "@context": "https://schema.org", "@graph": [ { "@type": "SoftwareApplication", "name": "Spinnchoose Online Color Blindness Test & Vision Challenge", "operatingSystem": "Any", "applicationCategory": "HealthApplication", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }, "url": "https://spinnchoose.com/color-blindness-test/", "description": "A free interactive color vision screening tool and hue sensitivity challenge designed to test your ability to spot subtle color differences.", "publisher": { "@type": "Organization", "name": "Spinnchoose", "url": "https://spinnchoose.com" } }, { "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "Can an online color test diagnose color blindness?", "acceptedAnswer": { "@type": "Answer", "text": "No. Online hue tests are interactive screening games for contrast and color discrimination. Official medical diagnosis requires an in-person Ishihara Plate test or anomaloscope assessment by an optometrist." } }, { "@type": "Question", "name": "Why is color blindness more common in men than women?", "acceptedAnswer": { "@type": "Answer", "text": "The genes for red and green color receptors are on the X chromosome. Men have one X chromosome (XY), so a single defective gene results in color blindness, whereas women have two X chromosomes (XX) which provide genetic redundancy." } }, { "@type": "Question", "name": "What are the common types of color blindness?", "acceptedAnswer": { "@type": "Answer", "text": "The most common types are red-green deficiencies (Deuteranomaly and Protanomaly), followed by blue-yellow deficiencies (Tritanopia), and in very rare cases, complete color blindness (Achromatopsia)." } } ] } ] }
Scroll to Top