Color Contrast Checker - WCAG Accessibility

Check color combinations against WCAG 2.1 AA and AAA accessibility standards. See contrast ratio and pass/fail status. Free tool.

Foreground (Text)

Background

Contrast Ratio

14.63:1

WCAG Compliance

AA Normal TextPass

AA Large TextPass

AAA Normal TextPass

AAA Large TextPass

AA Normal: ≥4.5:1 | AA Large: ≥3:1 | AAA Normal: ≥7:1 | AAA Large: ≥4.5:1

Live Preview

Heading Example (24px)

Large text example (18px bold)

Normal text example (14px). This is the standard body text size used on most websites. It needs to meet the strictest contrast requirements for readability.

Small text example (12px). Even smaller text that should still be readable.

About Color Contrast Checker

The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios to ensure text is readable for people with visual impairments. Level AA requires 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 and 4.5:1 respectively.

This tool calculates the contrast ratio between any two colors using the WCAG relative luminance formula and shows pass/fail results for both AA and AAA standards.

The WCAG contrast ratio is calculated from the relative luminance of two colors. Relative luminance accounts for how the human eye perceives brightness differently across the color spectrum - green appears brighter than blue at the same hex value. The formula applies gamma correction to sRGB values before computing the ratio, which ranges from 1:1 (no contrast) to 21:1 (black on white).

Approximately 300 million people worldwide have color vision deficiency. The most common form, deuteranomaly (red-green), affects 6% of males. Relying solely on color to convey information (like red for errors, green for success) fails for these users. Sufficient contrast ratio is the first step toward accessible design, but also consider using icons, patterns, or text labels alongside color.

Use this checker alongside the Color Converter to find accessible alternatives when a brand color fails contrast requirements. Small adjustments to lightness or saturation can often achieve the required 4.5:1 ratio while staying visually close to the original brand color. Test your final colors on both light and dark backgrounds.

How the Color Contrast Checker Works

01Enter or pick a foreground (text) color and a background color
02The tool calculates the contrast ratio between the two colors
03See whether the combination passes WCAG AA and AAA standards
04Adjust colors until you achieve the required contrast ratio

WCAG Color Contrast Requirements

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA) and 7:1 for enhanced readability (AAA). Large text (18px+ bold or 24px+ regular) needs only 3:1 for AA. Poor contrast makes text hard to read for users with low vision or color blindness, affecting roughly 8% of men and 0.5% of women. Testing contrast is one of the easiest accessibility improvements you can make.

When to Use the Color Contrast Checker

Use this tool during the design phase of any website or application to ensure text is readable against its background. It is required for WCAG compliance, which is legally mandated in many jurisdictions. Use it whenever you change brand colors, design dark mode themes, or receive accessibility audit findings about insufficient contrast.

Common Use Cases

Verifying WCAG AA/AAA compliance during website design and redesign Color Converter - HEX, RGB, HSL & CMYK
Testing brand color combinations for text readability across light and dark themes
Responding to accessibility audit findings about insufficient contrast ratios
Designing accessible email templates and marketing materials

Expert Tips

Test your entire color palette, not just primary text - also check buttons, links, placeholders, and disabled states.
For dark mode, avoid pure white text (#FFF) on pure black (#000) - it creates harsh contrast that causes eye strain. Use #E8E8E8 on #1A1A1A instead.
When a brand color fails contrast requirements, adjust lightness by 5-10% in HSL to find the closest accessible alternative.

Frequently Asked Questions

What contrast ratio do I need?→

WCAG AA requires 4.5:1 for normal text (under 18px bold or 24px regular) and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. Most accessibility laws reference the AA standard. UI components and graphical objects need at least 3:1 contrast.

Does this apply to dark mode?→

Yes. Dark mode must meet the same contrast requirements. Light text on a dark background needs at least 4.5:1 contrast ratio. Pure white (#FFFFFF) on dark backgrounds can cause eye strain - consider using a slightly off-white (#E0E0E0 to #F0F0F0) for body text in dark mode.

What about color blindness?→

Contrast ratio alone does not address color blindness. Two colors can have sufficient contrast but be indistinguishable for someone with deuteranopia (red-green blindness). Never rely solely on color to convey meaning - add icons, text labels, or patterns. This tool checks luminance contrast, which benefits all users including those with color vision deficiency.

How do I fix a color that fails contrast?→

Adjust the lightness of either color while keeping the hue similar. For a brand color that's too light, darken it slightly. You can also adjust the background instead. Use the Color Converter tool to modify HSL lightness values until the contrast ratio passes. Small changes (5-10% lightness) are often enough.

Related tools

12 suggested