Contrast Ratio Checker
Check WCAG contrast ratios to ensure accessible color combinations.
How to Use Contrast Ratio Checker
How to Use the Contrast Ratio Checker
Step-by-Step Guide
- Choose Foreground Color: Select or enter the text/foreground color
- Choose Background Color: Select or enter the background color
- Preview: View how the colors look together in the preview area
- Calculate: Click "Calculate Contrast Ratio" to check WCAG compliance
- Review Results: See if your colors pass AA/AAA standards
- Swap Colors: Click "Swap Colors" to test the reverse combination
- Clear: Click "Clear" to reset and test new colors
Features
Color Input
- Visual color pickers for easy selection
- Manual hex code input for precise control
- Supports all valid hex color formats
- Separate inputs for foreground and background
Live Preview
- See actual color combination before calculating
- Preview normal text (16px)
- Preview large text (18px bold)
- Visual representation of final result
Contrast Calculation
- Scientifically accurate WCAG 2.1 algorithm
- Relative luminance calculation
- Precise contrast ratio (e.g., 4.52:1)
- Instant results
WCAG Compliance Check
- Normal text AA (4.5:1) and AAA (7:1)
- Large text AA (3:1) and AAA (4.5:1)
- UI components AA (3:1)
- Pass/Fail indicators for each standard
- Visual checkmarks and X marks
Utility Functions
- Swap colors button to test reverse combinations
- Clear button to reset all inputs
- Toast notifications for user feedback
Common Use Cases
Website Accessibility
- Test text and background color combinations
- Verify button color accessibility
- Check link color contrast
- Validate form input colors
Design System Development
- Ensure all color combinations meet WCAG standards
- Create accessible color palettes
- Document compliant color pairs
- Build accessible component libraries
UI/UX Design
- Test color choices before implementation
- Verify designs meet legal requirements
- Choose accessible color combinations
- Validate brand colors for accessibility
Legal Compliance
- Meet ADA (Americans with Disabilities Act) requirements
- Comply with Section 508 standards
- Satisfy WCAG 2.1 Level AA (minimum legal requirement)
- Achieve WCAG 2.1 Level AAA (enhanced compliance)
Understanding WCAG Contrast Ratios
What is a Contrast Ratio? Contrast ratio measures the difference in luminance between foreground and background colors. It ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white or vice versa).
WCAG 2.1 Standards:
Level AA (Minimum Legal Requirement)
- Normal Text (under 18px): Minimum 4.5:1
- Large Text (18px+ or 14px+ bold): Minimum 3:1
- UI Components & Graphics: Minimum 3:1
Level AAA (Enhanced Compliance)
- Normal Text (under 18px): Minimum 7:1
- Large Text (18px+ or 14px+ bold): Minimum 4.5:1
- UI Components & Graphics: Same as AA (3:1)
Why It Matters: Proper contrast ensures text and UI elements are readable for everyone, including people with:
- Low vision
- Color blindness
- Age-related vision decline
- Viewing screens in bright sunlight or poor lighting
Legal Requirements: Many countries require WCAG 2.1 Level AA compliance for:
- Government websites
- Public sector websites
- Commercial websites (varies by jurisdiction)
- Mobile applications
How Contrast is Calculated:
- Convert foreground and background colors to RGB
- Calculate relative luminance for each color using gamma correction
- Divide lighter luminance + 0.05 by darker luminance + 0.05
- Result is the contrast ratio (e.g., 4.5:1)
Tips for Accessible Color Combinations
- Aim for AA at Minimum: Level AA is the legal standard for most jurisdictions
- Strive for AAA When Possible: Enhanced compliance benefits more users
- Test Early and Often: Check contrast before finalizing designs
- Don't Rely on Color Alone: Use icons, labels, and patterns alongside color
- Consider Context: Body text needs higher contrast than large headings
- Test in Real Conditions: View on different devices and lighting conditions
- Use Dark on Light or Light on Dark: Avoid medium-contrast combinations
- Increase Font Weight: Bold text is more readable at lower contrasts
- Provide High Contrast Mode: Offer alternative color schemes for users who need them
- Document Compliant Pairs: Create a reference guide of approved color combinations
Frequently Asked Questions
Most Viewed Tools
Screen Size Converter
Calculate screen width and height from diagonal size and aspect ratio. Convert between inches and centimeters for displays, TVs, and monitors with instant dimension calculations.
Use Tool →DPI Calculator
Calculate DPI (dots per inch), image dimensions, and print sizes. Convert between pixels and physical dimensions for printing and displays.
Use Tool →Paper Size Converter
Convert between international paper sizes (A4, Letter, Legal) with dimensions in mm, cm, and inches. Compare ISO A/B series and North American paper standards.
Use Tool →Fuel Consumption Converter
Convert between MPG (miles per gallon), L/100km (liters per 100 kilometers), and other fuel efficiency units. Compare car fuel economy across different measurement systems.
Use Tool →CSV Splitter
Split large CSV files into smaller files by number of rows. Process large datasets in manageable chunks instantly.
Use Tool →Product Schema Generator
Generate JSON-LD Product schema markup for SEO. Add product details like name, price, brand, rating, and availability to create structured data for rich search results.
Use Tool →Large Text File Viewer
View and search large text files up to 200MB in your browser. Features virtual scrolling, line numbers, search functionality, and file statistics. Perfect for log files, CSV, JSON, and code files.
Use Tool →API Key Generator
Generate secure, cryptographically random API keys for authentication and authorization. Create custom API keys with various formats including hex, base64, and prefixed keys.
Use Tool →Related Creative & Design Tools
HEIC to JPG Converter
Convert HEIC/HEIF images to JPG format with adjustable quality settings. All conversions run locally in your browser - files never leave your device. Perfect for converting iPhone photos to a universally compatible format.
Use Tool →JPG to PNG Converter
Convert JPG images to PNG format with lossless quality. All conversions run locally in your browser - files never leave your device. Perfect for preserving image quality and adding transparency support.
Use Tool →Glassmorphism Generator
Create beautiful glassmorphism CSS effects with live preview. Generate frosted glass UI with backdrop blur, transparency, borders, and shadows. Perfect for modern web designs.
Use Tool →PNG to JPG Converter
Convert PNG images to JPG format with adjustable quality and transparency handling. All conversions run locally in your browser - files never leave your device. Perfect for reducing file sizes while maintaining image quality.
Use Tool →Neumorphism Generator
Create beautiful neumorphism (soft UI) CSS effects with live preview. Generate soft, extruded 3D elements with dual shadows. Perfect for modern minimalist designs.
Use Tool →Color Tints Generator
Generate lighter variations of any color for backgrounds and light themes.
Use Tool →Color Shades Generator
Generate darker variations of any color for design depth and dark themes.
Use Tool →Color Palette Generator
Generate beautiful, harmonious color palettes for UI design, branding, and themes. Choose from random, analogous, complementary, or monochromatic modes. Lock favorite colors and export as HEX, RGB, or JSON.
Use Tool →Share Your Feedback
Help us improve this tool by sharing your experience