Color Contrast Checker

WCAG AA/AAA accessibility compliance in real time

DeveloperFREEYour data never leaves your browser

100% freeNo signupRuns in your browser

Color Contrast Checker is a free, browser-based tool that lets you wcag aa/aaa accessibility compliance in real time — with zero signup, zero installation. Your data never leaves your browser. Part of 116+ free developer and business tools at wowhow.cloud, built and maintained by a team with 14+ years of hands-on development experience.

TOOLColor Contrast Checker

Foreground (Text)

Background

Contrast Ratio

17.72:1

AA Normal

AAA Normal

AA Large

AAA Large

1:1AA 4.5 · AAA 7.021:1

Live Text Preview

The quick brown fox jumps over the lazy dog

Pass

The quick brown fox jumps over the lazy dog

Pass

The quick brown fox jumps over the lazy dog

Pass

The quick brown fox jumps over the lazy dog

Pass

AA Normal

4.5:1

Small text

AAA Normal

7.0:1

Enhanced small text

AA Large

3.0:1

18pt or 14pt bold

AAA Large

4.5:1

Enhanced large text

About Color Contrast Checker

Color contrast is one of the most commonly failed WCAG 2.1 success criteria in web accessibility audits. The WCAG contrast ratio formula — based on the relative luminance of foreground and background colors — determines whether text is readable for users with low vision. WCAG AA requires a 4.5:1 ratio for normal text and 3:1 for large text; WCAG AAA requires 7:1 for normal text. Many jurisdictions, including the EU and US federal agencies, mandate AA compliance under accessibility laws.

How It Works

Relative luminance is computed by first converting the input color (hex, RGB, or HSL) to sRGB values in the 0–1 range. Each channel is then linearized: values below 0.04045 are divided by 12.92; values above that threshold are raised to the power of 2.4 after a shift and scale. The linearized channels are combined using the WCAG luminance weights: L = 0.2126R + 0.7152G + 0.0722B.

The contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05) where L1 is the higher luminance and L2 is the lower. This formula is specified in WCAG 2.1 Success Criterion 1.4.3. The +0.05 offset prevents the ratio from being undefined when comparing two pure black surfaces.

The live preview renders sample text in normal (16px), large (24px), and bold-large (14pt bold) sizes against the selected background, giving an immediate perceptual sense of legibility alongside the numeric ratio.

Who Is This For

A frontend developer checks a proposed button text/background color pair before implementing a design spec, catching a 3.2:1 ratio that fails AA for normal text.

A UX designer audits every text style in a new component library against all background variants in the design system before handoff.

A developer building a government website verifies that all body text meets WCAG AAA (7:1) to satisfy federal accessibility requirements.

An accessibility engineer uses the tool to quickly check whether a brand color can be used for body text on white, or only for headings and decorative elements.

How to Use

Enter foreground and background colors as hex, RGB, or HSL

See the contrast ratio and WCAG AA/AAA pass/fail status instantly

Read the live preview text to visually verify legibility

Frequently Asked Questions

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios: 4.5:1 for normal text (AA), 3:1 for large text (AA), and 7:1 for normal text (AAA).

Sufficient color contrast ensures text is readable for people with low vision or color blindness, and is a legal requirement in many jurisdictions under accessibility laws.

Relative luminance is a perceptual measure of brightness defined in WCAG 2.1. It linearizes the sRGB color components (R, G, B divided by 255) using a gamma correction formula and combines them as 0.2126R + 0.7152G + 0.0722B. The weights reflect human eye sensitivity — we perceive green most strongly and blue least.

Large text is defined as 18pt (24px) or larger for normal weight, or 14pt (approximately 18.67px) or larger for bold text. Large text has a lower AA threshold (3:1) because it is inherently more readable than small text at the same contrast ratio.

The tool suggests fixes by automatically finding the nearest shade of each color that passes AA. For text on white backgrounds, darkening the text color is usually the fastest fix. For text on colored backgrounds, either darken the background or lighten the text until the ratio reaches 4.5:1.

WCAG contrast ratios are a minimum baseline, not a guarantee. Some users with specific forms of color blindness may struggle even with passing ratios if the colors are in similar hue families (e.g., red and green). Testing with real users or using simulation tools for common color vision deficiencies provides deeper assurance.