Check color contrast ratios for accessibility. Ensure your text meets WCAG AA or AAA guidelines for normal and large text.
Large text (18px bold)
The quick brown fox jumps over the lazy dog.
Normal text (14px)
The quick brown fox jumps over the lazy dog. 0123456789
Contrast ratio
21:1
WCAG AA
WCAG AAA
Sufficient contrast between text and background is essential for readability and accessibility. Users with low vision, color blindness, or those viewing content in bright sunlight rely on strong contrast to read your content comfortably.
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios: 4.5:1 for normal text (AA), 3:1 for large text (AA), 7:1 for normal text (AAA), and 4.5:1 for large text (AAA). Large text is 18px+ regular or 14px+ bold.
#333333) or use the color picker to select your text color.WCAG AA is the minimum standard most organizations target. It requires a contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for large text (18 px regular or 14 px bold). AAA is a stricter standard—7:1 for normal text and 4.5:1 for large text—recommended when maximum readability is critical, such as in healthcare or government applications.
The simplest approach is to darken the text color or lighten the background until the ratio meets 4.5:1. If brand guidelines limit your palette, try increasing font size or weight (large bold text only needs 3:1 at AA). You can also add a semi-transparent overlay between an image background and text to boost contrast without changing your brand colors.
Yes. WCAG 2.1 Success Criterion 1.4.11 requires a minimum 3:1 contrast ratio for UI components and graphical objects such as icons, form borders, and focus indicators. This checker focuses on text, but the same principle applies to buttons, input fields, and chart elements.