Check Color Contrast Ratio & WCAG Compliance Instantly
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
TOTP Code Generator
Generate time-based one-time passwords from a TOTP secret key. Enter your base32 secret, choose a period and digit length, and get the current and next codes with a live countdown timer. Useful for testing and debugging 2FA integrations.
Use Tool →JSON to Zod Schema Generator
Generate Zod validation schema code from a JSON sample object. Infers z.string(), z.number(), z.boolean(), z.array(), z.object(), and z.null() types automatically. Handles nested objects, arrays of objects with optional field detection, and outputs copy-ready TypeScript with import and z.infer type alias.
Use Tool →JSONL / NDJSON Formatter
Format, validate, and inspect JSON Lines (JSONL) and NDJSON files. Validates each line individually, reports parse errors by line number, outputs compact JSONL or a pretty-print preview, and lets you download the cleaned file.
Use Tool →Secret and Credential Scanner
Scan pasted text, code, or config files for accidentally exposed API keys, tokens, passwords, and private keys. Detects 50+ secret types across AWS, GitHub, Stripe, OpenAI, and more — all client-side, nothing leaves your browser.
Use Tool →TLS Cipher Suite Checker
Check TLS protocol version compatibility and cipher suite strength ratings against current best practices. Supports IANA and OpenSSL cipher names — rates each suite as Strong, Weak, or Deprecated and explains why.
Use Tool →Password Entropy Calculator
Calculate the information-theoretic bit entropy of any password or API key. Detects character set pools automatically, shows the total number of possible combinations, and estimates crack time across five attack scenarios from rate-limited web logins to GPU cracking clusters.
Use Tool →TOML Config Validator
Validate TOML configuration file syntax and report errors with line numbers. Paste any TOML content — Cargo.toml, pyproject.toml, config.toml — and instantly see a green checkmark with key counts and structure stats, or a precise error message pointing to the exact line. Includes a collapsible JSON structure preview to confirm what was parsed.
Use Tool →Content Security Policy Generator
Build Content Security Policy headers interactively. Toggle directives like script-src, style-src, and img-src, select allowed source tokens, and add custom origins. Instantly outputs your CSP as an HTTP header, meta tag, Nginx directive, or Apache header.
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 →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 →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 →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 →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 →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 →Share Your Feedback
Help us improve this tool by sharing your experience