WCAG 1.4.3 — Large Text Below 3:1 Contrast Ratio

Who Is Affected

Users with low vision, color blindness (approximately 8% of men and 0.5% of women), older adults with age-related vision changes, and anyone using mobile devices in bright sunlight or low-quality monitors.

What This Means

Large text (18 points or larger, or 14 points bold or larger) has a lower contrast requirement than normal text because its size makes it easier to read. However, it still must meet a minimum 3:1 contrast ratio against its background. This issue commonly affects headings, subheadings, and call-out text that use light colors for aesthetic reasons.

The contrast ratio measures the difference in brightness between text and background colors. A 3:1 ratio means the lighter color is three times brighter than the darker color.

Fix: CMS / Theme

Large text contrast failures often occur site-wide when heading styles or large text elements use colors that don't meet the 3:1 requirement.

Joomla Fix

1. Go to Extensions → Templates → [Your Template] → Advanced.
2. Look for heading color settings (H1, H2, H3, etc.) or large text variables.
3. Test the current color combination using the WebAIM Contrast Checker.
4. Adjust the color until it reaches at least 3:1 contrast ratio.
5. Save the template and clear cache.

WordPress Fix

1. Navigate to Appearance → Customize → Colors or Typography.
2. Locate heading colors or large text settings.
3. Use the color picker to select a darker shade for light backgrounds or lighter shade for dark backgrounds.
4. Preview changes and verify the 3:1 ratio is met.
5. Publish changes.

Pro Tip: If your brand requires specific light colors, consider adding a subtle text shadow or background overlay to improve contrast while maintaining visual design.

Fix: Content Editor

When large text contrast issues appear on individual pages due to custom styling:

1. Open the page editor and locate the problematic large text.
2. Select the text and check if custom colors have been applied via the editor toolbar.
3. Either remove the custom color to use theme defaults, or choose a darker/lighter color that meets 3:1 contrast.
4. For rich text editors, avoid using the "light gray" or pastel color options for large text.
5. Save and preview the page to confirm readability.

WordPress Block Editor: Select the text block, go to Color settings in the sidebar, and choose an appropriate color or clear custom colors.

Joomla TinyMCE: Highlight the text, click the text color button, and select a color with sufficient contrast or remove custom styling.

Standard Reference

WCAG 2.1 Success Criterion 1.4.3 — Contrast (Minimum), Level AA

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for large text which requires a contrast ratio of at least 3:1. Large text is defined as 18 point or 14 point bold.

• W3C Understanding SC 1.4.3
• WCAG Technique G18 — Ensuring sufficient contrast
• WCAG Technique G145 — Large text 3:1 contrast
• WCAG Failure F24 — Foreground color without background
• WCAG Failure F83 — Insufficient contrast