WCAG Contrast Ratio Checker Check WCAG contrast ratios between foreground and background colors.

🎨

Contrast Ratio Checker

Check WCAG contrast ratios between foreground and background colors.

Set Colors

Enter foreground (text) and background colors.

Check Compliance

See the contrast ratio and WCAG AA/AAA pass/fail results.

Adjust & Swap

Modify colors until you achieve your target compliance level.

Loading tool...

What Is Contrast Ratio Checker?

A WCAG contrast ratio checker evaluates the accessibility of color combinations by calculating the contrast ratio between foreground (text) and background colors according to the Web Content Accessibility Guidelines (WCAG) 2.1. The tool computes the luminance-based contrast ratio and tests it against four WCAG thresholds — AA and AAA levels for both normal and large text sizes. Passing these thresholds ensures that text is readable for users with various levels of visual impairment, including low vision and color blindness. The tool provides a live text preview showing how your color combination actually looks at different sizes, along with clear pass/fail indicators for each WCAG level.

Why Use Contrast Ratio Checker?

Instant WCAG AA and AAA compliance checking
Visual text preview at multiple sizes shows real-world readability
Clear pass/fail indicators with required ratio thresholds
Swap button for quickly testing reversed color combinations
Tests four compliance levels: AA/AAA for normal and large text

Common Use Cases

Web Accessibility

Verify text/background combinations meet WCAG 2.1 requirements for ADA and AODA compliance.

Design System Auditing

Test all color combinations in a design system for accessibility compliance.

Brand Color Evaluation

Check if brand colors can be used for text/background combinations that pass accessibility standards.

Legal Compliance

Ensure digital content meets accessibility laws that reference WCAG criteria.

Technical Guide

The contrast ratio is calculated using WCAG 2.1 relative luminance formula. First, each color channel is linearized: if sRGB ≤ 0.03928, linear = sRGB/12.92; else linear = ((sRGB + 0.055)/1.055)^2.4. Relative luminance L = 0.2126×R + 0.7152×G + 0.0722×B. The contrast ratio = (L_lighter + 0.05) / (L_darker + 0.05). The ratio ranges from 1:1 (no contrast, same color) to 21:1 (black on white). WCAG 2.1 defines four thresholds: Level AA requires ≥4.5:1 for normal text (<18pt or <14pt bold) and ≥3:1 for large text (≥18pt or ≥14pt bold). Level AAA requires ≥7:1 for normal text and ≥4.5:1 for large text. These thresholds are based on research into visual acuity and ensure readability for users with 20/40 vision or moderate low vision.

Tips & Best Practices

1
Aim for at least 4.5:1 contrast for body text — this is the minimum for WCAG AA
2
Large text (18px+ or 14px+ bold) has a lower requirement of 3:1 for AA
3
AAA compliance (7:1) ensures readability for users with more severe visual impairments
4
Use the Swap button to test if your colors work well in both orientations
5
Dark mode designs need the same contrast ratios — test both modes

Related Tools

HEX to RGB Converter

Convert HEX color codes to RGB values instantly with a live preview swatch.

🎨 Color Tools

Color Picker

Interactive color picker with HEX, RGB, HSL, and CMYK outputs.

🎨 Color Tools

Color Shade Generator

Generate darker shades of any color with adjustable step count.

🎨 Color Tools

Accessible Palette Generator

Generate color palettes that meet WCAG contrast requirements.

🎨 Color Tools

Color Blindness Simulator

Simulate how colors appear to people with different types of color vision deficiency.

🎨 Color Tools

Frequently Asked Questions

Q What is WCAG contrast ratio?

It is a numerical measure (1:1 to 21:1) of the brightness difference between two colors. WCAG specifies minimum ratios to ensure text readability for people with visual impairments.

Q What is the difference between AA and AAA?

AA is the minimum accessibility standard (4.5:1 for normal text). AAA is enhanced accessibility (7:1 for normal text). Most regulations require AA; AAA is best practice.

Q What counts as large text?

WCAG defines large text as 18pt (24px) or larger for regular weight, or 14pt (18.67px) or larger for bold weight. Large text has lower contrast requirements.

Q Does color alone determine accessibility?

No. Contrast ratio is one factor. You should also ensure color is not the only means of conveying information (use icons, patterns, labels too) and test with color blindness simulations.

About This Tool

Contrast Ratio Checker is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.