What is the WCAG contrast ratio?

WCAG 2.1 defines contrast as the ratio of luminance between two colours. AA requires 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" in WCAG?

Large text is defined as 18pt (24px) or larger, or 14pt (approximately 18.67px) or larger if bold. This affects which contrast ratio threshold applies.

Color Contrast Checker

Calculates the WCAG 2.1 contrast ratio between a foreground and background colour. Shows whether the combination passes AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1 normal, 4.5:1 large) accessibility standards. Input colours in hex, RGB, or HSL. Includes a live preview of the text on the background.

Foreground (text) colour

Background colour

Sample Text Preview

This is what normal body text looks like.

Large text (18pt+ or 14pt bold)

13.98:1

Contrast Ratio

AAA

Normal Text (≥4.5)

AAA

Large Text (≥3)

WCAG 2.1: AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal and 4.5:1 for large.

Enter your foreground and background colours to check if they meet WCAG accessibility requirements.

Frequently Asked Questions

Related Tools

Diff Checker

Compare two blocks of text and highlight the differences.

Regex Tester

Test regular expressions against sample text with live match highlighting.

UUID Generator

Generate one or many UUIDs (v4) instantly.

Character Counter

Count characters against Twitter, LinkedIn, and SMS limits.

New

Hash Generator

Generate MD5, SHA-1, SHA-256, SHA-512 hashes from text.

New

JSON Escape / Unescape

Escape special characters for JSON strings, or unescape JSON string values.