What is the minimum contrast ratio for WCAG AA?

WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). AAA requires 7:1 and 4.5:1 respectively.

What counts as large text?

Large text is 18pt (approximately 24px) or larger in regular weight, or 14pt (approximately 18.67px) or larger in bold.

Is my data sent to a server?

All contrast calculations run in your browser.

Why does my design tool show a different ratio?

This tool follows the WCAG 2.1 relative luminance formula exactly, which some design tools may implement slightly differently.

Contrast checker

Contrast checker is a browser-based accessibility tool for verifying that foreground and background color combinations meet WCAG 2.1 AA or AAA standards. Enter two colors and get the contrast ratio with instant pass/fail results.

Foreground (text)

Background

Aa Large text sampleNormal body text sample, the quick brown fox jumps over the lazy dog.

Contrast ratio	21.00 : 1
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

MODE

PRESETS

Runs entirely in your browser

Dedicated pages

Direct links for each accessibility standard.

WCAG AA contrast checker

Check if your colour combination meets WCAG 2.1 AA accessibility requirements. Instant pass/fail result with the exact contrast ratio.

WCAG AAA contrast checker

Check if your colour combination meets the enhanced WCAG 2.1 AAA contrast standard. The highest accessibility level for text.

Large text contrast checker

Check contrast requirements for large text (18pt or 14pt bold). Lower thresholds apply for large text under WCAG 2.1.

APCA contrast checker

Check colour contrast using the APCA (Advanced Perceptual Contrast Algorithm), the next-generation contrast model for WCAG 3.0.

How to check colour contrast

Enter your foreground (text) colour and background colour as HEX or RGB values, or use the colour pickers.
The contrast ratio is calculated instantly against WCAG 2.1 standards.
Check whether your colour combination passes AA or AAA level for normal and large text.
Adjust either colour until the ratio meets your target standard.

Common uses

Verifying that text colours meet WCAG accessibility requirements before publishing a website, use color converter to get the HEX values from RGB or HSL first
Choosing background and foreground colour pairs that are readable for users with low vision, picked from a cohesive color palette
Testing button labels, links, and body text for sufficient contrast ratios, and exploring tints and shades of a brand colour to find an accessible variant

Technical specification

Algorithm or formula: WCAG 2.1 relative-luminance formula. Each sRGB channel is linearised via the ≥0.03928 threshold, then weighted (R 0.2126, G 0.7152, B 0.0722). Contrast ratio = (L1 + 0.05) / (L2 + 0.05).
Browser API or library: Pure JavaScript arithmetic. No external library.
Input limits: HEX, RGB, or any color the visual picker emits. Alpha channel is ignored (alpha-on-background blending is not modelled).
Output: Numeric contrast ratio plus pass/fail badges for WCAG AA, AAA, normal text, and large text.
Known limitations: Uses WCAG 2.1 only, not the newer APCA algorithm. Does not blend semi-transparent foregrounds against the background.

Frequently asked questions

What is the minimum contrast ratio for WCAG AA?: WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). AAA requires 7:1 and 4.5:1 respectively.
What counts as large text?: Large text is 18pt (approximately 24px) or larger in regular weight, or 14pt (approximately 18.67px) or larger in bold.
Is my data sent to a server?: All contrast calculations run in your browser.
Why does my design tool show a different ratio?: This tool follows the WCAG 2.1 relative luminance formula exactly, which some design tools may implement slightly differently.

Reviewed and tested May 25, 2026.