toolbox/color-blindness.html at main · 100millionusd/toolbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Free Color Blindness Simulator — Test Accessibility</title>
  <meta name="description" content="Simulate color blindness on any image. Protanopia, deuteranopia, tritanopia. Free online color blindness simulator.">
  <link rel="canonical" href="https://www.quicktools.mom/color-blindness.html">
  <meta property="og:title" content="">
  <meta property="og:description" content="">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.quicktools.mom/color-blindness.html">
  <meta name="twitter:card" content="summary">
  <link rel="stylesheet" href="style.css">
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2658921743607446" crossorigin="anonymous"></script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Is Color Blindness Simulator free to use?","acceptedAnswer":{"@type":"Answer","text":"Yes! Color Blindness Simulator is completely free with no signup required. It runs entirely in your browser — your data never leaves your device."}},{"@type":"Question","name":"How do I use Color Blindness Simulator?","acceptedAnswer":{"@type":"Answer","text":"Enter your data in the input fields above. Results are generated instantly in your browser. You can copy, download, or share the output."}},{"@type":"Question","name":"Is my data safe with Color Blindness Simulator?","acceptedAnswer":{"@type":"Answer","text":"Absolutely. Color Blindness Simulator runs 100% client-side in your browser using JavaScript. No data is uploaded, stored, or shared with any server. Your privacy is guaranteed."}}]}</script>
</head>
<body>
  <div class="page-wrapper">
    <header class="site-header"><a href="index.html" class="site-logo"><span class="icon">⚡</span> QuickTools</a><nav class="site-nav"><a href="index.html">All Tools</a></nav></header>
    <div class="ad-zone ad-zone-top">Ad Space</div>
    <div class="tool-header"><div class="tool-badge">♿ Accessibility</div><h1>Color Blindness Simulator</h1><p>See how your designs look to people with color vision deficiency.</p></div>
    <div class="tool-card"><div style="border:2px dashed var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center;cursor:pointer;" onclick="document.getElementById('fi').click()"><div style="font-size:2rem;">📸</div><p>Upload an image to simulate</p><input type="file" id="fi" accept="image/*" onchange="loadImg(event)" style="display:none;"></div></div>
    <div class="tool-card" id="results" style="display:none;">
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
        <div style="text-align:center;"><p style="font-weight:600;font-size:0.85rem;">Normal Vision</p><canvas id="cv-normal" style="width:100%;border-radius:6px;"></canvas></div>
        <div style="text-align:center;"><p style="font-weight:600;font-size:0.85rem;">Protanopia (red-blind)</p><canvas id="cv-protan" style="width:100%;border-radius:6px;"></canvas><p class="text-muted" style="font-size:0.7rem;">~1% of men</p></div>
        <div style="text-align:center;"><p style="font-weight:600;font-size:0.85rem;">Deuteranopia (green-blind)</p><canvas id="cv-deutan" style="width:100%;border-radius:6px;"></canvas><p class="text-muted" style="font-size:0.7rem;">~6% of men</p></div>
        <div style="text-align:center;"><p style="font-weight:600;font-size:0.85rem;">Tritanopia (blue-blind)</p><canvas id="cv-tritan" style="width:100%;border-radius:6px;"></canvas><p class="text-muted" style="font-size:0.7rem;">~0.01%</p></div>
        <div style="text-align:center;"><p style="font-weight:600;font-size:0.85rem;">Achromatopsia (no color)</p><canvas id="cv-achro" style="width:100%;border-radius:6px;"></canvas></div>
        <div style="text-align:center;"><p style="font-weight:600;font-size:0.85rem;">Protanomaly (red-weak)</p><canvas id="cv-protanomaly" style="width:100%;border-radius:6px;"></canvas></div>
      </div>
    </div>
    <div class="ad-zone">Ad Space</div>
    <div class="related-tools"><h2>Related Tools</h2><div class="related-grid"><a href="contrast-checker.html"><span class="tool-icon">♿</span> Contrast</a><a href="color-converter.html"><span class="tool-icon">🎨</span> Color Converter</a><a href="color-palette.html"><span class="tool-icon">🎨</span> Palette</a><a href="image-resizer.html"><span class="tool-icon">📷</span> Image Resizer</a></div></div>

        <div class="tool-card" style="max-width:720px;">
      <h2 style="font-size:1rem;margin-bottom:0.75rem;">📖 About Color Blindness Simulator</h2>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;">Color Blindness Simulator is a free, browser-based tool designed for developers, designers, writers, and everyday users. Simulate color blindness on any image. Protanopia, deuteranopia, tritanopia. Free online color blindness simulator. Everything runs locally in your browser using JavaScript — no data is ever sent to a server, making it completely private and secure. The tool is designed to be intuitive and beginner-friendly while still offering advanced features for power users. It loads instantly with no installation required and works offline once loaded. Use it as often as you need — there are no daily limits, no watermarks, and no hidden fees.</p>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;"><strong>Who is this for?</strong> Color Blindness Simulator is ideal for professionals, students, freelancers, and hobbyists who want quick, reliable results without installing software or creating accounts. Whether you are on a laptop, tablet, or phone, it works seamlessly in any modern browser.</p>
      <h3 style="font-size:0.9rem;margin-bottom:0.5rem;">How to Use</h3>
      <ol style="font-size:0.85rem;color:var(--text-muted);line-height:1.7;padding-left:1.2rem;">
        <li>Enter or paste your data in the input area above.</li>
        <li>Adjust settings and options to match your needs.</li>
        <li>View the results instantly — they update in real-time.</li>
        <li>Copy, download, or share your output with one click.</li>
      </ol>
    </div>
    <div class="tool-card faq-section">
      <h2 style="font-size:1.1rem;margin-bottom:1rem;">❓ Frequently Asked Questions</h2>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">Is Color Blindness Simulator free to use?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Yes! Color Blindness Simulator is completely free with no signup required. It runs entirely in your browser — your data never leaves your device.</p></details>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">How do I use Color Blindness Simulator?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Enter your data in the input fields above. Results are generated instantly in your browser. You can copy, download, or share the output.</p></details>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">Is my data safe with Color Blindness Simulator?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Absolutely. Color Blindness Simulator runs 100% client-side in your browser using JavaScript. No data is uploaded, stored, or shared with any server. Your privacy is guaranteed.</p></details>
    </div>
    <div class="ad-zone ad-zone-bottom">Ad Space</div>
    <footer class="site-footer"><p>&copy; 2026 QuickTools.</p><div class="footer-links"><a href="index.html">All Tools</a></div></footer>
  </div>
  <script>
    const matrices={normal:[[1,0,0],[0,1,0],[0,0,1]],protan:[[.567,.433,0],[.558,.442,0],[0,.242,.758]],deutan:[[.625,.375,0],[.7,.3,0],[0,.3,.7]],tritan:[[.95,.05,0],[0,.433,.567],[0,.475,.525]],achro:[[.299,.587,.114],[.299,.587,.114],[.299,.587,.114]],protanomaly:[[.817,.183,0],[.333,.667,0],[0,.125,.875]]};
    function loadImg(e){const f=e.target.files[0];if(!f)return;const img=new Image();img.onload=()=>{document.getElementById('results').style.display='block';Object.keys(matrices).forEach(type=>{const cv=document.getElementById('cv-'+type);cv.width=img.width;cv.height=img.height;const ctx=cv.getContext('2d');ctx.drawImage(img,0,0);if(type!=='normal'){const id=ctx.getImageData(0,0,img.width,img.height);const d=id.data;const m=matrices[type];for(let i=0;i<d.length;i+=4){const r=d[i],g=d[i+1],b=d[i+2];d[i]=r*m[0][0]+g*m[0][1]+b*m[0][2];d[i+1]=r*m[1][0]+g*m[1][1]+b*m[1][2];d[i+2]=r*m[2][0]+g*m[2][1]+b*m[2][2];}ctx.putImageData(id,0,0);}});};img.src=URL.createObjectURL(f);}
  </script>
<script src="ads.js"></script>
</body>
</html>