WCAG 2.2 Guideline “1.4.3 Contrast (Minimum)” Level AA

Introduction

WCAG 2.2’s “1.4.3 Contrast (Minimum)” requires that text and its background have a contrast ratio of at least 4.5:1. This guideline is essential to ensure that web content is readable for users with visual impairments or age-related vision challenges.

This article provides a detailed explanation of contrast ratios and practical methods for meeting this standard, tailored for beginners in HTML, CSS, and JavaScript.

1. What is Contrast Ratio?

The contrast ratio measures the brightness difference between text (or text in images) and its background. A higher value indicates a greater difference, improving readability.

• Minimum standard: For normal text, a ratio of 4.5:1 or higher.
• Exceptions:
  • Large text (18pt or 14pt bold) requires a ratio of 3:1 or higher.
  • Decorative text or hidden elements are exempt.

2. How to Meet Contrast Standards

a. Choose Colors Carefully

Select text and background colors to ensure adequate contrast.

Inappropriate Example

<p style="color: lightgray; background-color: white;">Low contrast text</p>

• Light gray text on a white background has insufficient contrast.

Improved Example

<p style="color: black; background-color: white;">High contrast text</p>

• Black text on a white background provides sufficient contrast and meets the standard.

b. Managing Contrast with CSS

Customizing Text and Background

body {
  color: #000; /* Black */
  background-color: #fff; /* White */
}

.high-contrast {
  color: #ffffff; /* White */
  background-color: #000000; /* Black */
}

• Set appropriate default contrast and provide a high-contrast theme if needed.

c. Using Tools to Calculate Contrast Ratio

When selecting colors, use online tools or browser extensions to verify contrast ratios.

Recommended Tools

• WebAIM Contrast Checker
• Browser developer tools (e.g., Chrome’s Accessibility Checker)

d. Handling Background Images

When using background images, ensure sufficient contrast for overlaying text.

Inappropriate Example

<div style="background-image: url('background.jpg'); color: white;">
  White text on a background image
</div>

Improved Example

Add a semi-transparent overlay to improve text visibility.

<div style="background-image: url('background.jpg'); background-color: rgba(0, 0, 0, 0.5); color: white;">
  Readable text on a background image
</div>

3. Common Failures in Contrast Standards

a. Specifying Only Foreground or Background Color

Failure Example

<p style="color: blue;">Text</p>

• The background color depends on the browser’s default (white), which may not ensure adequate contrast.

Solution

<p style="color: blue; background-color: white;">Text</p>

b. Low-Contrast Link Text

Failure Example

<a href="#" style="color: lightblue;">Link</a>

• Light blue text on a white background lacks sufficient contrast.

Solution

<a href="#" style="color: blue;">Link</a>

• Adjusting the text color improves visibility and meets the standard.

4. Steps for Measuring and Improving Contrast

a. Measurement Process

1. Obtain the RGB or hex color codes of the text and background.
2. Use a contrast checker tool to calculate the ratio.
3. Adjust colors as needed to meet the standard.

b. Improvement Steps

1. Change text and background colors
   Adjust combinations to meet or exceed the contrast ratio threshold.
2. Provide alternatives
   Implement high-contrast mode or a theme switcher for better accessibility.

5. Benefits of Meeting Contrast Standards

a. Readable Content for Everyone

Users with visual impairments or age-related vision challenges can easily read content.

b. Better Visibility on Mobile Devices

High contrast ensures readability even on smaller screens, enhancing user experience.

Conclusion

WCAG 2.2’s “1.4.3 Contrast (Minimum)” requires a contrast ratio of at least 4.5:1 for text and background.

Key Implementation Points

1. Carefully select colors and verify contrast ratios.
2. Add extra measures for text over background images.
3. Utilize tools to ensure compliance with the standard.

By following these practices, you can provide web content that is inclusive and accessible to all users.

We have released UUU Web Accessibility, a tool designed to simplify the implementation of web accessibility. If you’re interested in improving accessibility, check it out!