Color Contrast Checker
Free online tool to calculate WCAG 2.1 contrast ratios—ensure accessible colors with live previews and compliance checks.
Sample Text
This is how your text will look
Level AA (Minimum)
Level AAA (Enhanced)
Our color contrast checker is a free utility computing ratios between foreground/background colors to verify WCAG 2.1 accessibility, crucial for readable designs aiding visual impairments. Geared toward designers and devs, it provides instant metrics, previews, and guidelines—facilitating compliant UIs that boost inclusivity, SEO, and legal adherence, all via browser-based luminance calculations.
Common Use Cases for Contrast Checking
- ✓Web Design Accessibility
Ensure text/background combos meet WCAG for inclusive UI across disabilities.
- ✓UI/UX Prototyping
Test color palettes early to avoid redesigns for compliance in apps or sites.
- ✓Frontend Development
Validate CSS colors against standards during implementation for audit readiness.
- ✓Brand Guideline Creation
Check corporate colors for legibility in logos, buttons, or marketing materials.
- ✓Mobile App Theming
Optimize dark/light modes for iOS/Android accessibility requirements.
- ✓Content Auditing
Scan existing sites for contrast issues to improve SEO and user experience.
Why Choose Our Checker?
Real-Time Ratio Calculation
Instantly compute contrast using WCAG formula: (L1 + 0.05) / (L2 + 0.05) where L is relative luminance
WCAG Compliance Levels
Pass/fail for AA (4.5:1 normal, 3:1 large) and AAA (7:1 normal, 4.5:1 large) with visual indicators
Color Input Flexibility
Hex, RGB, HSL inputs; picker for intuitive selection or eyedropper from images
Live Preview Panel
Side-by-side view of colors with sample text to simulate real rendering
Detailed Metrics
Show relative luminance, ratio, and recommendations for adjustments
Export & Share
Copy results as JSON or screenshot previews for reports or team reviews
How to Use the Color Contrast Checker
- Select Colors: Pick foreground (e.g., text) and background via picker or hex/RGB input
- Preview Combo: View sample text overlay; adjust for light/dark variants
- Calculate Ratio: Auto-computes and displays value with WCAG pass/fail badges
- Check Compliance: See AA/AAA requirements; get suggestions if failing
- Export Results: Copy ratio or screenshot for docs or design handoff
Understanding Color Contrast
Contrast ratio derives from relative luminance (perceived brightness): convert sRGB to linear RGB, then Y = 0.2126*R + 0.7152*G + 0.0722*B, adjusted for gamma. Ratio = (L_brighter + 0.05) / (L_darker + 0.05); WCAG thresholds promote legibility.
Example: Black (#000000) on white (#FFFFFF) → 21:1 (passes AAA); blue (#0000FF) on yellow (#FFFF00) → ~2.5:1 (fails AA).
- Formula Details: Luminance via W3C algo; JS uses canvas.getImageData for color parsing
- Text Size Impact: Large (18pt+ bold or 24pt) lowers threshold; tool auto-detects
- Edge Cases: Handles alpha transparency, gradients via average luminance
Based on WCAG 2.1 Success Criterion 1.4.3; no external libs for core calc.
Advanced Features & Capabilities
Gradient Analysis
Test multi-stop gradients by sampling points or averaging hues.
Color Blind Simulation
Overlay filters for protanopia etc.; integrate with Daltonism tools.
Batch Testing
Upload CSS/Sass files; report all color pairs for site-wide audits.
Frequently Asked Questions
What is color contrast and why is it important?
Color contrast measures readability between text and background; high ratios ensure accessibility for low-vision users per WCAG guidelines.
What are WCAG 2.1 contrast requirements?
AA: 4.5:1 for normal text, 3:1 for large; AAA: 7:1 normal, 4.5:1 large—tools flag compliance.
How does the tool calculate ratios?
Uses formula based on sRGB luminance: convert colors to LAB, compute relative brightness, then ratio.
Does it support dark mode?
Yes; test inverted combos (dark text on light, or vice versa) for theme-specific checks.
What about color blindness simulation?
Basic ratios only; pair with simulators like Coblis for protanopia/deuteranopia testing.
Is this tool free?
Yes; unlimited use, client-side computation—no signups or limits.
Privacy & Best Practices Considerations
This checker enables ethical, accessible design practices:
- Local Computation: Colors processed in-browser; no data shared
- Design Tips: Test on real devices; use tools like WAVE for full a11y
- Best Practices: Aim AAA where feasible; document ratios in specs
- Related Tools: Combine with Color Palette Generator for compliant schemes
Integration & Code Examples
Compute contrast ratios in JavaScript for apps or validation:
JavaScript Example:
// Function to get relative luminance
function getLuminance(r, g, b) {
[r, g, b] = [r, g, b].map(c => c / 255);
[r, g, b] = [r, g, b].map(c => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}
// Function to get contrast ratio
function getContrastRatio(hex1, hex2) {
const rgb1 = hexToRgb(hex1); // Implement hexToRgb: parseInt(hex.slice(1,3),16)/255 etc.
const rgb2 = hexToRgb(hex2);
const l1 = getLuminance(rgb1.r, rgb1.g, rgb1.b);
const l2 = getLuminance(rgb2.r, rgb2.g, rgb2.b);
return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
}
// Helper: Hex to RGB object
function hexToRgb(hex) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return { r: r / 255, g: g / 255, b: b / 255 };
}
// Example usage
const ratio = getContrastRatio('#000000', '#FFFFFF');
console.log(ratio.toFixed(2)); // 21.00
// WCAG check
function isWCAGAA(ratio, isLargeText = false) {
return isLargeText ? ratio >= 3 : ratio >= 4.5;
}
console.log(isWCAGAA(ratio)); // true