CSS Font And Background Color Check

Description

The “CSS Font And Background Color Check” evaluates whether CSS rules explicitly define both the font color and the background color.

Example outcome

I identified 1 CSS rule that does not specify either the font color or the background color.

Impact

• Visual Impairments: Visually impairmed users may apply custom styles or high-contrast modes — if only one color is defined, the text can blend with the background.
• Cognitive Disabilities: Low visual clarity can increase cognitive load and reading difficulty.
• Color Blindness: While not directly affected by single-color definitions, poor contrast combinations that result from partial overrides can worsen legibility for color blind.
• Elderly: Elder users are often affected due to a combination of vision changes and reliance on accessibility settings.

Fixes

To address missing font and/or background color:

1. Locate the custom styles missing the font and/or background color.
2. Update the CSS rules to explicitly declare both the color (font) and background-color

Resources

• WCAG 2.2: Understanding Success Criteria 1.4.3
• WCAG 2.2: Understanding Success Criteria 1.4.6
• WCAG 2.2: Understanding Success Criteria 1.4.8
• WCAG 2.2 Techniques: Technique F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa
• WebAIM: Contrast and Color Accessibility