Skip to content

Color Contrast Checker

Check WCAG 2.1 contrast ratios — AA and AAA for text, large text, and UI components.

Normal text — Aa Bb Cc 0123 — check if this contrast is accessible.

Large text (18pt+) or bold 14pt+

17.40:1Contrast ratio
AA — Normal text (≥ 4.5:1)PASS
AA — Large text (≥ 3:1)PASS
AAA — Normal text (≥ 7:1)PASS
AAA — Large text (≥ 4.5:1)PASS
AA — UI components & graphics (≥ 3:1)PASS

How the Contrast Checker Works

Enter foreground (text) and background colors as HEX values, or click the color swatches to open a native color picker. The tool calculates the WCAG 2.1 relative luminance for each color and derives the contrast ratio. The live preview shows your colors applied to normal text, large text, and a UI component square.

Five PASS/FAIL badges show your compliance against each WCAG 2.1 criterion. Use the presets for quick common combinations, or click "Swap colors" to immediately check the inverse pairing.

Understanding WCAG 2.1 Contrast Requirements

WCAG (Web Content Accessibility Guidelines) is a set of international standards developed by the W3C to make the web accessible to people with disabilities. The contrast requirements ensure readability for users with low vision, color blindness, or aging eyes. WCAG defines two conformance levels that matter for contrast: Level AA (the widely adopted legal standard) and Level AAA (enhanced accessibility).

The algorithm: decompose the HEX color into RGB channels (0–1), apply gamma correction (c ≤ 0.04045 → c/12.92, else ((c+0.055)/1.055)^2.4), then compute relative luminance as 0.2126R + 0.7152G + 0.0722B. The contrast ratio is (L_lighter + 0.05) / (L_darker + 0.05). A ratio of 21:1 is maximum (black on white); 1:1 is minimum (same color). Large text is defined as 18pt (24px) regular or 14pt (18.67px) bold. "UI components" covers focus indicators, form inputs, and graphical objects.

Choosing Accessible Color Combinations

Achieving AA compliance (4.5:1 for normal text) is easier than it sounds. Black (#000000) on white (#ffffff) gives a ratio of 21:1, the theoretical maximum. Dark text on a light background is almost always accessible. The challenges arise with branded colors: a medium blue on white might give only 3.5:1, which fails AA for normal text but passes for large text.

Practical tips: darken your brand color by 20–30% for body text on light backgrounds, or use a very dark version for small text elements like captions. For dark mode, lighten your brand color significantly, the same blue that fails on white at 3.5:1 might achieve 7:1 against a dark background. Test both light and dark mode combinations. Gray text on white is one of the most common accessibility failures in modern design systems.

WCAG Contrast Requirements Explained

WCAG 2.1 Level AA is the legal minimum in many jurisdictions. For normal text (under 18pt regular / under 14pt bold), the required ratio is 4.5:1. For large text (18pt regular or 14pt bold and above), the minimum drops to 3:1. UI components such as form borders, focus indicators, and graphical objects also require 3:1.

WCAG 2.1 Level AAA is the enhanced target, recommended for critical content such as medical or government sites. Normal text must reach 7:1; large text must reach 4.5:1. The contrast ratio formula uses relative luminance (L): ratio = (Llighter + 0.05) / (Ldarker + 0.05). White on black = 21:1 (maximum); same color on itself = 1:1 (minimum).

Legal context: WCAG is referenced by the Americans with Disabilities Act (ADA, US), the Accessibility for Ontarians with Disabilities Act (AODA, Canada), the European standard EN 301 549, and the UK Equality Act. Failure to comply can result in legal action and accessibility audits.

Related tools: Color Picker, Color Palette Generator, and CSS Playground.

When Contrast Alone Isn't Enough

Color-blind users represent about 8% of men and 0.5% of women worldwide. The WCAG contrast formula assumes standard color perception, it does not account for users who perceive contrast differently due to color vision deficiency. The key rule: never rely on color alone to convey meaning. Always pair color with icons, labels, patterns, or other visual cues.

The most common form of color blindness is red-green (deuteranopia and protanopia). Even if a red-on-green or green-on-red text combination technically passes the WCAG contrast ratio, users with deuteranopia may perceive both colors at nearly the same luminance, making the text effectively invisible. Avoid these color pairs for text regardless of the ratio result.

Dark mode: a design that passes contrast in light mode can fail in dark mode. Many teams test only one mode and ship broken accessibility in the other. Always verify both themes, the same foreground/background pair inverted is a different ratio.

APCA (Advanced Perceptual Contrast Algorithm) is a newer, more perceptually accurate approach being developed for WCAG 3.0. Unlike WCAG 2.1's relative luminance formula, APCA accounts for font weight, font size, and viewing context more accurately. It is not yet a published standard, but designers working on next-generation accessibility may want to track its development.

Frequently Asked Questions

What is WCAG?
WCAG (Web Content Accessibility Guidelines) is an international standard published by the W3C that defines how to make web content accessible to people with disabilities. The contrast requirements ensure that text is readable by people with low vision or color blindness.
Why does color contrast matter?
Approximately 8% of men and 0.5% of women have some form of color vision deficiency. People with low vision also struggle with low-contrast text. Sufficient contrast ensures your content is readable by the widest possible audience and is often legally required for public-facing websites in many countries.
What is the difference between AA and AAA?
WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. AA is the widely adopted legal minimum; AAA provides the highest level of accessibility but can be hard to achieve with branded color palettes.
What is the difference between WCAG AA and AAA?
WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. AA is the legal standard in most jurisdictions. AAA is recommended for accessibility-critical contexts like medical or government sites.
Does contrast ratio apply to all text?
WCAG applies to text and images of text. Decorative text, logos, and inactive UI components are exempt. Large text (18pt+ regular or 14pt+ bold) has a lower threshold (3:1 AA) because larger type is easier to read at lower contrast. The checker flags which standard applies based on your selection.
What contrast ratio do I need to pass WCAG AA?
For standard body text (under 18pt regular / under 14pt bold), you need a minimum contrast ratio of 4.5:1. For large text (18pt regular or 14pt bold and above), the minimum is 3:1. A common accessible combination: dark gray (#333333) on white (#FFFFFF) gives a ratio of 12.6:1 — well above both thresholds.
Is white text or black text more readable on a colored background?
It depends on the background's luminance. A simple rule: if the background color's relative luminance is below 0.18 (the darker half of the luminance scale), use white text; above 0.18, use black text. Many design systems (Material Design, Bootstrap) use this threshold to automatically select text color for dynamic backgrounds.

You might also need

See all tools →

Complementary tools based on what you're doing

By Bam's Thinkery — Updated