Success Criterion 1.4.3 requires that the visual presentation of text and images of text have a contrast ratio of at least 4.5:1, except in specific cases. This criterion ensures that text is readable for users with visual impairments, including those with low vision and color deficiencies.
Larger Text Size Requirements:
1. Font size of 18 points (equivalent to approximately 24 pixels) or larger.
2. For bold text, font size of 14 points (approximately 18.7 pixels) or larger.
Contrast Ratio Requirements:
1. Minimum contrast ratio of 3:1 is acceptable for text meeting the Large size requirements.
2. Standard contrast ratio of 4.5:1 is required for text not meeting the Large size
To ensure text and images of text have sufficient contrast against their background colors for readability by users with visual impairments.
Develop a style guide for text contrast: Develop a style guide that ensures all crucial text meets minimum contrast requirements.
Choose high-contrast color schemes: Choose color schemes with sufficient contrast for readability.
Provide a "Contrast" mode: Provide a “Contrast” mode using alternative CSS if necessary (such as an overlay).
Design with contrast in mind: Design content with minimum contrast requirements in mind.
Example 1: A website’s footer uses a light gray background with white text to display contact information.
<footer style="background-color: #CCCCCC; color: #FFFFFF;">
<p>Contact us at info@company.com</p>
</footer>
Explanation:The chosen colors result in a contrast ratio of approximately 1.1:1, which is far below the minimum requirement, making the text difficult to read for users with visual impairments.
<footer style="background-color: #000000; color: #CCCCCC;">
<p>Contact us at info@company.com</p>
</footer>
Explanation:The footer background is set to black (#000000), and the text color is light gray (#CCCCCC), ensuring a contrast ratio of approximately 12.6:1. This far exceeds the minimum requirement for all font sizes, making the text easily readable for users with visual impairments.
Example 2: Contrast Ratio Compliance in Text Styling
<style>
.text {
font-size: 16px;
color: #333;
}
</style>
<p class="text">You may find more information here.</p>
Explanation:In the incorrect implementation, the text has a font size of 16 pixels and meets the 3:1 contrast ratio requirement. However, it is not bold, resulting in a failure to meet WCAG 1.4.3 criteria.
<style>
.text {
font-size: 16px;
font-weight: bold;
color: #333;
}
</style>
<p class="text">You may find more information here.</p>
Explanation:In the correct implementation, the text is styled to be bold, which helps it meet the WCAG 1.4.3 criteria for text contrast and readability.