What is the minimum contrast ratio required by WCAG?

WCAG 2.1 Level AA (the minimum legal standard) requires 4.5:1 for normal text (under 18px), 3:1 for large text (18px+ or 14px+ bold), and 3:1 for UI components and graphics. Level AAA (enhanced compliance) requires 7:1 for normal text and 4.5:1 for large text. Most websites must meet Level AA at minimum.

What is the difference between AA and AAA compliance?

AA is the minimum legal requirement for most websites, requiring 4.5:1 for normal text. AAA is enhanced compliance requiring 7:1 for normal text, providing better accessibility for people with low vision. While AAA is ideal, AA is sufficient for legal compliance in most jurisdictions. Government sites often require AAA.

Does my website need to meet WCAG standards?

It depends on your location and website type. In many countries, government and public sector websites must meet WCAG 2.1 Level AA. The ADA in the US, European Accessibility Act, and similar laws worldwide increasingly require commercial websites to be accessible. Even if not legally required, accessibility is best practice and expands your audience.

Why does large text have lower contrast requirements?

Large text (18px+ or 14px+ bold) is easier to read at lower contrasts because the letterforms are bigger and more distinct. WCAG recognizes this by allowing 3:1 for large text instead of 4.5:1 for normal text. However, higher contrast is still better for accessibility, and AAA requires 4.5:1 even for large text.

What if my brand colors fail the contrast test?

You have several options: 1) Use brand colors for decorative elements only, 2) Darken or lighten the colors slightly, 3) Add a darker/lighter variation to your palette, 4) Use white or black text on brand color backgrounds, 5) Increase font size to qualify as large text (requires only 3:1). Brand identity is important, but accessibility is a legal requirement.

Can I use this for images and icons?

This tool is designed for text and solid UI components. For images and icons that convey information, WCAG requires 3:1 contrast for meaningful graphical objects and UI components. However, decorative images have no contrast requirements. Complex images may need text alternatives (alt text) instead of meeting contrast ratios.

How accurate is this contrast checker?

This tool uses the official WCAG 2.1 contrast ratio algorithm, calculating relative luminance and contrast ratios exactly as specified in the WCAG guidelines. The results are scientifically accurate and match other compliant contrast checkers. However, actual perception can vary based on display settings, lighting, and individual vision.

Is my color data private?

Yes, absolutely. All color calculations happen entirely in your browser using JavaScript. No color data is sent to any server or stored anywhere. The contrast calculations occur locally on your device, ensuring complete privacy of your design work.

🎯

Contrast Ratio Checker

Check WCAG contrast ratios to ensure accessible color combinations.

Design Tools

Loading tool...

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

Related Creative & Design Tools

🎨

Color Converter

Convert colors between HEX, RGB, and HSL with live preview, contrast checking, and quick-copy formats for your design system.

Use Tool →

📸

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 →

🌈

Gradient Generator

Create beautiful CSS and Tailwind gradients with a visual editor. Support for linear and radial gradients with full control over colors, angles, and stops.

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 →

🖼️

Image Placeholder Generator

Generate clean placeholder images with custom sizes, colors, and labels. Perfect for wireframes, mockups, and design systems.

Use Tool →

⬛

Box Shadow Generator

Visually design layered box shadows with fine-grained controls. Create production-ready CSS and Tailwind utilities for cards, modals, and UI elevations.

Use Tool →

🔰

Logo Placeholder Generator

Generate simple placeholder logos with monograms, shapes, and preset color palettes. Perfect for mockups, prototypes, and early-stage branding.

Use Tool →

Share Your Feedback

Help us improve this tool by sharing your experience