Free Component
WCAG Color Contrast Ratio Checker
An accessibility color contrast comparator testing text and background luminance with live WCAG AA/AAA pass badges.
Colours in this gradient
#0f172a#3b82f6#10b981#ffffff
background: ;The code
Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<div class="contrast-stage">
<div class="contrast-card">
<div class="cc-preview" id="ccPreview">
<span class="cc-text" id="ccSampleText">Accessible Typography</span>
</div>
<div class="cc-scores">
<div class="cc-ratio-box">
<span class="cc-ratio-num" id="ccRatio">11.8:1</span>
<span class="cc-ratio-lbl">Contrast Ratio</span>
</div>
<div class="cc-badges">
<span class="cc-badge badge-pass" id="badgeAA">WCAG AA ✓</span>
<span class="cc-badge badge-pass" id="badgeAAA">WCAG AAA ✓</span>
</div>
</div>
<div class="cc-pickers">
<div class="cc-field">
<label>Text Color</label>
<input type="color" id="textColorInput" value="#ffffff" />
</div>
<div class="cc-field">
<label>Background Color</label>
<input type="color" id="bgColorInput" value="#0f172a" />
</div>
</div>
</div>
</div>The AI prompt
Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.
Create an interactive WCAG color contrast ratio checker in HTML, CSS and vanilla JavaScript. Requirements: - Color inputs for text and background. - Exact WCAG 2.1 relative luminance calculation algorithm. - Displays calculated contrast ratio (e.g. 11.8:1). - Badges showing WCAG AA (>= 4.5:1) and AAA (>= 7.0:1) pass/fail status. Return one HTML file with <style> and <script> tags.
How to build it, step by step
- 1
Convert hex colors to sRGB luminance using the standard W3C formula.
- 2
Calculate ratio = (L1 + 0.05) / (L2 + 0.05).
- 3
Update preview styling and pass/fail badges on input changes.
Customisation tips
- Using standard sRGB gamma-expanded luminance ensures 100% mathematical accuracy with WCAG standards.