WCAG Contrast Checker & Simulator

Advanced WCAG 2.1 / 2.2 color contrast checker and accessibility simulator. Test text, UI components, gradients, and simulate color blindness in real-time.

Live Preview

Accessible Design Matters

This is a sample paragraph to demonstrate how your selected colors render together. Good contrast ensures readability for everyone.

Learn more about WCAG

Select a simulation mode below to apply filters to the live preview area.

Normal Vision

Protanopia (No Red)

Deuteranopia (No Green)

Tritanopia (No Blue)

Achromatopsia (No Color)

Low Vision (Blur)

Bright Sunlight (Low Contrast)

If your current colors fail the WCAG checks, use the auto-fix suggestions below to find the closest compliant colors while keeping your original brand aesthetics.

Current colors pass WCAG AA. No fixes needed!

Export your selected colors as CSS variables, Tailwind configuration, or design tokens.

CSS Variables

:root {
  --color-foreground: #000000;
  --color-background: #ffffff;
  
  /* Usage */
  color: var(--color-foreground);
  background-color: var(--color-background);
}

Foreground Color

Background Color

Normal Text

21.00:1

AAA

Large Text

AAA

UI Components

AAA

Accessibility Contrast Simulator FAQs

The WCAG contrast ratio is a mathematical measurement of the difference in perceived luminance (lightness) between two colors, expressed as a figure from 1:1 to 21:1. It ensures that text and UI elements are sufficiently distinguishable from their backgrounds to be readable by users with varied visual capabilities.

For WCAG AA compliance, normal text requires a minimum ratio of 4.5:1, while large text (18pt or 14pt bold) and UI components require 3.0:1. For strict AAA compliance, normal text needs 7.0:1, and large text requires 4.5:1.

Yes, the Vision Simulation tab applies real-time SVG matrix filters to your live preview. It accurately replicates Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind), and Achromatopsia (monochromacy), alongside blur and sunlight simulations.

No. This PRO simulator is built entirely client-side using JavaScript. All color calculations, image processing, and report generation happen directly within your browser, ensuring absolute privacy and zero server data storage.

If your selected colors fail the WCAG test, you can use our Auto-Fix feature. It mathematically calculates and suggests the closest AA or AAA compliant color shade, allowing you to maintain your brand aesthetics while meeting accessibility standards.

How to Use the Contrast Checker

Set foreground and background colors
Enter your text color (foreground) and background color using the color pickers or by typing HEX, RGB, or HSL values. The contrast ratio updates instantly.
Read your WCAG result
The tool shows the contrast ratio (e.g. 5.2:1) and whether it passes WCAG AA (4.5:1 for normal text) and AAA (7:1). Large text (18pt+) has lower thresholds.
Simulate color blindness
Switch to the Simulator tab to preview how your color combination looks to users with Deuteranopia, Protanopia, Tritanopia, or other vision types.
Use Auto-Fix if needed
If your colors fail, click Auto-Fix. The tool calculates the nearest AA or AAA compliant shade while preserving your hue and saturation as closely as possible.

Contrast Ratio Reference

WCAG 2.1 minimum contrast requirements for different text categories:

Content Type	WCAG AA	WCAG AAA	Example Ratio
Normal text (<18pt)	4.5:1 ✓	7:1 ✓	#000 on #fff → 21:1
Large text (≥18pt bold)	3:1 ✓	4.5:1 ✓	#333 on #fff → 12.6:1
UI components & icons	3:1 ✓	N/A	#767676 on #fff → 4.5:1
Decorative elements	No req.	No req.	Background images exempt

Common Use Cases

UI / Visual Design Review

Test every text and background combination in your design system before handoff to development, catching failures early.

Accessibility Audits

Provide documented contrast ratios for client accessibility reports and WCAG 2.1 / 2.2 compliance certifications.

Color Blindness Testing

Simulate how 8% of male users experience your palette to ensure no critical information is lost for color-blind audiences.

Legal Compliance

Meet ADA (USA), EAA (EU), and EN 301 549 digital accessibility requirements before product launch or public tender.

Developer QA

Quickly verify contrast of CSS color variables during code review, without switching to a design tool.

How It Works

All calculations run in your browser using the WCAG 2.1 luminance formula — no server contact required.

Relative Luminance

WCAG defines luminance as a weighted sum of linearised RGB channels: L = 0.2126R + 0.7152G + 0.0722B. The contrast ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color.

Color Blindness Simulation

The simulator applies standard daltonization matrices (Machado et al., 2009) to transform sRGB values as perceived by each type of color vision deficiency.

Auto-Fix Algorithm

Auto-Fix iterates over the lightness channel in HSL space, finding the minimum adjustment that reaches the target ratio (AA or AAA) while keeping hue and saturation unchanged.

Who This Tool Is For

UI/UX Designers

Test color combinations before design handoff and maintain a compliant design system.

Accessibility Specialists

Produce contrast evidence for WCAG audits, client reports, and compliance certifications.

Frontend Developers

Quickly check CSS color variables during development and code review without leaving the browser.

Product Managers

Ensure legal accessibility compliance (ADA, EAA) before product launch or public tender submission.

Content Creators

Verify that text overlaid on images or colored backgrounds is readable for all audiences.

Tips for Better Accessible Design

Always target WCAG AA (4.5:1) as your baseline, and aim for AAA (7:1) for body text — especially on healthcare, government, and financial sites.
Run color blindness simulation for all 8 types, not just Deuteranopia. Each type affects different color pairs differently.
Never rely on color alone to convey information — always pair color cues with icons, patterns, or text labels.
Use HSL to tune contrast: increase lightness difference between foreground and background rather than changing hue.
Test on a physical mobile device in bright sunlight — real-world conditions reveal contrast issues that monitors hide.

Why Accessibility Contrast Matters

Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency — poor contrast directly excludes these users.
The ADA (USA) and European Accessibility Act (EU 2025) require WCAG 2.1 AA compliance for public-facing digital products.
Poor contrast is one of the top 3 most common WCAG failures found in accessibility audits globally (WebAIM Million report).
Accessible color design improves readability for all users — in bright sunlight, on low-quality displays, and as users age.

Performance & Privacy

Every contrast calculation, color blindness simulation, and auto-fix runs entirely in your browser using JavaScript. No color values, screenshots, or usage data are ever transmitted to any server. The tool responds in under 5 ms per calculation and works offline after the first page load.

Educational Note: WCAG and Color Vision

WCAG 2.1 vs 2.2

WCAG 2.2 (2023) introduced new success criteria (2.4.11 Focus Appearance, 3.2.6 Consistent Help) but kept the core contrast requirements (1.4.3, 1.4.6) identical to 2.1.

Luminance vs Brightness

WCAG uses relative luminance — a perceptually weighted measure. A bright yellow (#ffff00) has very high luminance (0.93) while a dark navy (#003366) has low luminance (0.02), yielding a 9.8:1 ratio.

Types of Color Blindness

Deuteranopia (red-green, most common) affects ~6% of men. Protanopia (red blindness) ~2%. Tritanopia (blue-yellow) ~0.01%. Achromatopsia (full color blindness) ~0.003%.

APCA — The Future Standard

The Advanced Perceptual Contrast Algorithm (APCA) is proposed for WCAG 3.0. It evaluates contrast differently based on font size, weight, and polarity — watch this space.

Troubleshooting

Yes. WCAG AA is the legally required minimum in most jurisdictions. AAA is aspirational and not always achievable for all text/background combinations. Aim for AAA on body text where possible.

Large text (18pt regular or 14pt bold) has a lower threshold (3:1 for AA). If your small text fails at 4.5:1, darken the text or lighten the background until the ratio is met.

Try adjusting only the background instead of the text color. Darkening a white background slightly (e.g., to a light grey) can achieve AA compliance with minimal visual change.

Small differences can arise from how tools round floating-point luminance values. Both results should be within ±0.1 of each other — use the more conservative (lower) value for compliance.

Did You Know?

The WCAG contrast ratio formula was first introduced in WCAG 1.0 (1999) as a simple brightness difference check. It was significantly revised in WCAG 2.0 (2008) to use relative luminance — a model based on the CIE 1931 color space and how the human visual system processes light. The current 4.5:1 threshold was chosen because it approximately compensates for the 3:1 contrast loss experienced by users with 20/80 vision (low vision without assistive technology).

Build Products Everyone Can Use

Accessible color contrast is not just a compliance checkbox — it is a fundamental design quality that benefits every user. This free tool gives you real-time WCAG checking, color blindness simulation, and intelligent auto-fix in one place, with no data leaving your browser. Test your palette now, fix what fails, and ship a product that works for everyone.