toolbox/contrast-checker.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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Free Color Contrast Checker — WCAG Accessibility</title>
  <meta name="description" content="Check color contrast ratios for WCAG 2.1 accessibility compliance. Test text and background color combinations. AA and AAA level checks. Free online contrast checker.">
  <link rel="canonical" href="https://www.quicktools.mom/contrast-checker.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/contrast-checker.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":"🎨 Accessible Color Suggestions


    Ad Space — 336×280
    FAQ
      What is WCAG?","acceptedAnswer":{"@type":"Answer","text":"WCAG (Web Content Accessibility Guidelines) defines standards for making web content accessible. For contrast, WCAG 2.1 requires a minimum ratio of 4.5:1 for normal text (AA) and 7:1 for enhanced accessibility (AAA)."}},{"@type":"Question","name":"What counts as large text?","acceptedAnswer":{"@type":"Answer","text":"Large text is defined as 18pt (24px) regular weight or 14pt (18.66px) bold. Large text only needs a 3:1 contrast ratio for AA compliance."}}]}</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 — 728×90</div>
    <div class="tool-header">
      <div class="tool-badge">♿ Design</div>
      <h1>Color Contrast Checker</h1>
      <p>Check WCAG 2.1 color contrast ratios for accessibility compliance.</p>
    </div>
    <div class="tool-card">
      <div class="controls-row">
        <div class="control-group"><label>Text Color</label><div style="display:flex;gap:0.5rem;align-items:center;"><input type="color" id="fgPicker" value="#ffffff" onchange="document.getElementById('fgHex').value=this.value;check()" style="width:50px;height:40px;border:none;cursor:pointer;"><input type="text" id="fgHex" value="#ffffff" class="mono" oninput="check()" style="font-size:0.9rem;"></div></div>
        <div class="control-group" style="display:flex;align-items:end;"><button class="btn btn-secondary" onclick="swap()" style="font-size:1rem;" title="Swap colors">⇄</button></div>
        <div class="control-group"><label>Background Color</label><div style="display:flex;gap:0.5rem;align-items:center;"><input type="color" id="bgPicker" value="#1a1a2e" onchange="document.getElementById('bgHex').value=this.value;check()" style="width:50px;height:40px;border:none;cursor:pointer;"><input type="text" id="bgHex" value="#1a1a2e" class="mono" oninput="check()" style="font-size:0.9rem;"></div></div>
      </div>
    </div>
    <div class="tool-card" style="text-align:center;">
      <div id="preview" style="padding:2rem;border-radius:var(--radius);margin-bottom:1.5rem;">
        <div style="font-size:2rem;font-weight:700;">The Quick Brown Fox</div>
        <div style="font-size:1rem;margin-top:0.5rem;">Jumps over the lazy dog. 0123456789</div>
        <div style="font-size:0.75rem;margin-top:0.5rem;">Small text sample — 12px equivalent</div>
      </div>
      <div style="font-size:3.5rem;font-weight:700;line-height:1;" id="ratio">0:1</div>
      <div class="text-muted" style="margin-bottom:1.5rem;">Contrast Ratio</div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:500px;margin:0 auto;">
        <div style="padding:1rem;border-radius:var(--radius);border:1px solid var(--border);">
          <div style="font-weight:600;margin-bottom:0.5rem;">AA Level</div>
          <div style="display:flex;justify-content:space-between;font-size:0.85rem;"><span>Normal Text (4.5:1)</span><span id="aaNormal"></span></div>
          <div style="display:flex;justify-content:space-between;font-size:0.85rem;"><span>Large Text (3:1)</span><span id="aaLarge"></span></div>
          <div style="display:flex;justify-content:space-between;font-size:0.85rem;"><span>UI Components (3:1)</span><span id="aaUI"></span></div>
        </div>
        <div style="padding:1rem;border-radius:var(--radius);border:1px solid var(--border);">
          <div style="font-weight:600;margin-bottom:0.5rem;">AAA Level</div>
          <div style="display:flex;justify-content:space-between;font-size:0.85rem;"><span>Normal Text (7:1)</span><span id="aaaNormal"></span></div>
          <div style="display:flex;justify-content:space-between;font-size:0.85rem;"><span>Large Text (4.5:1)</span><span id="aaaLarge"></span></div>
        </div>
      </div>
    </div>
    <div class="tool-card">
      <h3 style="font-size:0.95rem;margin-bottom:1rem;">🎨 Accessible Color Suggestions</h3>
      <div id="suggestions" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.5rem;"></div>
    </div>
    <div class="ad-zone">Ad Space — 336×280</div>
    <div class="faq-section"><h2>FAQ</h2>
      <div class="faq-item"><h3>What is WCAG?</h3><p>WCAG (Web Content Accessibility Guidelines) defines standards for making web content accessible. For contrast, WCAG 2.1 requires a minimum ratio of 4.5:1 for normal text (AA) and 7:1 for enhanced accessibility (AAA).</p></div>
      <div class="faq-item"><h3>What counts as large text?</h3><p>Large text is defined as 18pt (24px) regular weight or 14pt (18.66px) bold. Large text only needs a 3:1 contrast ratio for AA compliance.</p></div>
    </div>
        <div class="tool-card" style="max-width:720px;">
      <h2 style="font-size:1rem;margin-bottom:0.75rem;">📖 About Color Contrast Checker</h2>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;">Color Contrast Checker is a free, browser-based tool built for developers, writers, and quality-focused professionals. Check color contrast ratios for WCAG 2.1 accessibility compliance. Test text and background color combinations. AA and AAA level checks. Free online contrast checker. This tool processes everything locally using JavaScript — no data is uploaded to any server, no account is required, and there are no usage limits. Whether you’re working on a quick project or handling sensitive data, your privacy is fully protected. Bookmark this page and use it anytime — it works on desktop, tablet, and mobile devices.</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><strong>Enter your data</strong> — Type, paste, or upload your input in the fields above.</li>
        <li><strong>Configure options</strong> — Adjust any settings or parameters to match your requirements.</li>
        <li><strong>Get instant results</strong> — Output updates automatically in real-time as you type.</li>
        <li><strong>Copy or download</strong> — Use the Copy button to grab results, or download if available.</li>
      </ol>
    </div>
    <div class="related-tools"><h2>Related Tools</h2><div class="related-grid">
      <a href="color-converter.html"><span class="tool-icon">🎨</span> Color Converter</a>
      <a href="color-picker.html"><span class="tool-icon">🖌️</span> Color Picker</a>
      <a href="color-palette.html"><span class="tool-icon">🎨</span> Color Palette</a>
      <a href="gradient-generator.html"><span class="tool-icon">🌈</span> Gradient Generator</a>
    </div></div>
    <div class="ad-zone ad-zone-bottom">Ad Space — 728×90</div>
    <footer class="site-footer"><p>&copy; 2026 QuickTools.</p><div class="footer-links"><a href="index.html">All Tools</a><a href="#">Privacy</a></div></footer>
  </div>
  <script>
    function hexToRgb(hex){hex=hex.replace('#','');if(hex.length===3)hex=hex.split('').map(c=>c+c).join('');return[parseInt(hex.slice(0,2),16),parseInt(hex.slice(2,4),16),parseInt(hex.slice(4,6),16)];}
    function luminance(r,g,b){const a=[r,g,b].map(v=>{v/=255;return v<=0.03928?v/12.92:Math.pow((v+0.055)/1.055,2.4);});return 0.2126*a[0]+0.7152*a[1]+0.0722*a[2];}
    function contrastRatio(l1,l2){const lighter=Math.max(l1,l2),darker=Math.min(l1,l2);return(lighter+0.05)/(darker+0.05);}
    function badge(pass){return pass?'<span style="color:var(--success);font-weight:600;">✅ Pass</span>':'<span style="color:var(--danger);font-weight:600;">❌ Fail</span>';}

    function swap(){const fg=document.getElementById('fgHex').value,bg=document.getElementById('bgHex').value;document.getElementById('fgHex').value=bg;document.getElementById('bgHex').value=fg;check();}

    function check(){
      let fg=document.getElementById('fgHex').value.trim();let bg=document.getElementById('bgHex').value.trim();
      if(!fg.startsWith('#'))fg='#'+fg;if(!bg.startsWith('#'))bg='#'+bg;
      if(!/^#[0-9a-f]{3,6}$/i.test(fg)||!/^#[0-9a-f]{3,6}$/i.test(bg))return;
      document.getElementById('fgPicker').value=fg.length===4?'#'+fg[1]+fg[1]+fg[2]+fg[2]+fg[3]+fg[3]:fg;
      document.getElementById('bgPicker').value=bg.length===4?'#'+bg[1]+bg[1]+bg[2]+bg[2]+bg[3]+bg[3]:bg;
      const[fr,fg2,fb]=hexToRgb(fg),[br,bg2,bb]=hexToRgb(bg);
      const fgL=luminance(fr,fg2,fb),bgL=luminance(br,bg2,bb);
      const ratio=contrastRatio(fgL,bgL);
      document.getElementById('ratio').textContent=ratio.toFixed(2)+':1';
      document.getElementById('ratio').style.color=ratio>=4.5?'var(--success)':ratio>=3?'var(--warning)':'var(--danger)';
      document.getElementById('preview').style.color=fg;document.getElementById('preview').style.background=bg;
      document.getElementById('aaNormal').innerHTML=badge(ratio>=4.5);
      document.getElementById('aaLarge').innerHTML=badge(ratio>=3);
      document.getElementById('aaUI').innerHTML=badge(ratio>=3);
      document.getElementById('aaaNormal').innerHTML=badge(ratio>=7);
      document.getElementById('aaaLarge').innerHTML=badge(ratio>=4.5);
      // Suggestions
      const targets=['#000000','#111111','#222222','#333333','#ffffff','#f8f8f8','#e0e0e0','#1a1a2e','#0f172a','#1e293b','#6366f1','#3b82f6'];
      document.getElementById('suggestions').innerHTML=targets.map(c=>{
        const[r,g,b]=hexToRgb(c);const l=luminance(r,g,b);const cr=contrastRatio(bgL,l);
        return`<div onclick="document.getElementById('fgHex').value='${c}';check()" style="padding:0.5rem;background:${bg};color:${c};border:1px solid var(--border);border-radius:6px;cursor:pointer;text-align:center;">
          <div style="font-weight:600;">${c}</div><div style="font-size:0.75rem;">${cr.toFixed(1)}:1 ${cr>=4.5?'✅':'❌'}</div></div>`;
      }).join('');
    }
    check();
  </script>
<script src="ads.js"></script>
</body>
</html>