Color Contrast Checker
Check the contrast ratio between two colors for WCAG 2.1 accessibility compliance. Ensure your text is readable for all users.
Contrast Ratio
14.68:1
Excellent
Live Preview
Large Text (24px bold)
Normal body text at 16px. This is what most of your content will look like. Make sure it's easy to read for all users, including those with visual impairments.
Small text at 14px — captions, footnotes, and secondary content.
WCAG 2.1 Compliance
Presets
About WCAG Color Contrast
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by people with moderately low vision or color deficiencies.
AA Normal Text requires a contrast ratio of at least 4.5:1. This applies to body text under 18pt (24px) or under 14pt (18.66px) bold.
AA Large Text requires at least 3:1. Large text is defined as 18pt+ (24px+) or 14pt+ (18.66px+) bold.
AAA is the enhanced level — 7:1 for normal text and 4.5:1 for large text. This is recommended for long-form content and critical UI.
UI Components like icons, borders, and form controls require at least 3:1 contrast against adjacent colors (WCAG 2.1 Success Criterion 1.4.11).
The contrast ratio is calculated using the relative luminance of each color. The formula is: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance.