Color and contrast
WCAG color contrast ratio calculator
Calculate sRGB relative luminance and test compliance against 4.5:1 (AA) and 7:1 (AAA) thresholds with live visual preview and non-text UI component checks.
Last updated October 24, 2026
Contrast Ratio Result
Based on WCAG 2.1 relative luminance algorithm.
16.12 : 1
WCAG AA Normal
Min 4.5:1
PASS
WCAG AA Large
Min 3.0:1 (18pt+)
PASS
WCAG AAA Normal
Min 7.0:1
PASS
WCAG AAA Large
Min 4.5:1 (18pt+)
PASS
Sample Headline Text
This is an interactive simulation of paragraph body text rendered with your chosen color combination. Ensuring sufficient contrast prevents eye fatigue and meets legal accessibility mandates.
Sources and further reading
Frequently asked questions
- What is the minimum WCAG contrast ratio for body text?
- WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal body text (under 18pt or under 14pt bold). Level AAA requires 7.0:1.
- Do UI component borders and focus rings require 4.5:1 contrast?
- Under WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast), user interface components and graphical objects require at least 3.0:1 contrast against adjacent colors.
Related calculators
Spotted an error or want a calculator we do not have yet? Tell us.