WCAG 1.4.3 — Insufficient Color Contrast

Who Is Affected

Low vision users, users with color blindness (affects approximately 8% of men), older adults with reduced contrast sensitivity, and anyone using a device outdoors or in bright light.

What This Means

Text on a screen needs to be dark enough relative to its background so that people with impaired vision can distinguish the letters. WCAG measures this as a contrast ratio — the mathematical relationship between the lightness of the text and the lightness of the background. Normal-sized text must meet a ratio of 4.5:1. Large text (18pt or 14pt bold) requires 3:1.

Common failures include light gray text on white backgrounds, colored text on colored backgrounds, and text overlaid on images without a solid background.

Fix: CMS / Theme

This is typically a site-wide issue when your theme's default text, link, or heading colors are failing. A single fix here repairs the problem across all pages.

1. Identify which CSS variable or theme setting controls the failing text color. In Joomla, go to Extensions → Templates → Your Template → Advanced. In WordPress, go to Appearance → Customize → Colors.
2. Use the WebAIM Contrast Checker to test your current foreground/background combination.
3. Darken the text color until the ratio reaches at least 4.5:1 for normal text or 3:1 for large text (18pt+ or 14pt bold+).
4. Save and re-run a OctoComply scan to verify.

Tip: If your brand color palette includes light colors that fail contrast, consider using a darker shade for text while keeping the original color for accents and non-text elements.

Fix: Content Editor

If a custom text color was applied directly to a specific page element:

1. Open the page in your content editor.
2. Select the element with the failing color.
3. Remove the custom color override and allow the theme default to apply.
4. If a specific color is required for design reasons, verify its contrast ratio in the WebAIM Contrast Checker before publishing.

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 (3:1), incidental text, and logotypes.

• W3C Understanding SC 1.4.3
• WCAG Technique G18 — 4.5:1 contrast ratio
• WCAG Technique G145 — 3:1 for large text
• WCAG Failure F24 — Foreground without background
• WCAG Failure F83 — Insufficient contrast for inline text