Foreground (Text) Color
Background Color
Contrast Ratio
—
Normal text sample — The quick brown fox jumps over the lazy dog.
Large text (24px bold)
UI Component
What This Tool Does
Calculates the WCAG 2.1 contrast ratio between a foreground and background color using the relative luminance formula. Shows pass/fail for AA Normal, AA Large, AAA Normal, AAA Large, and AA UI Components. A live preview shows your color combination with sample normal text, large text, and a UI component.
Frequently Asked Questions
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines contrast ratios to ensure text is readable by people with visual impairments. The ratio compares the relative luminance of the foreground and background colors. A ratio of 1:1 means no contrast (identical colors); 21:1 is the maximum (black on white).
What is the difference between AA and AAA?
WCAG AA (Level 2) requires a 4.5:1 ratio for normal text and 3:1 for large text (18pt or 14pt bold). AAA (Level 3) requires 7:1 for normal text and 4.5:1 for large text. AA is the legal minimum in many jurisdictions; AAA is the gold standard but not always achievable.
What counts as large text?
WCAG defines large text as 18pt (approximately 24px) or 14pt bold (approximately 18.67px bold). Large text has lower contrast requirements because it is inherently more readable.
Is my data sent to a server?
No. All contrast calculations happen in your browser using the WCAG luminance formula. Nothing is transmitted.