Loading...
Loading content...
Loading content...
Text must have at least 4.5:1 contrast ratio with its background (3:1 for large text).
Why it matters: Low contrast makes text difficult or impossible to read for users with low vision.
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA) Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement; Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
What This Means: This success criterion requires that text and images of text must have a minimum contrast ratio of 4.5:1 with their background. Large text (18pt or larger, or 14pt bold or larger) must have at least 3:1 contrast ratio. This ensures text is readable by users with low vision or in various lighting conditions.
Why It's Important: Low contrast text is difficult or impossible to read for users with low vision, color blindness, or in bright sunlight. Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and many users have low vision due to aging or other conditions. Sufficient contrast makes text readable for a wider audience.
Use contrast checking tools to verify text meets the 4.5: 1 ratio (3: 1 for large text). Common compliant combinations include dark text on light backgrounds or light text on dark backgrounds. Avoid light gray text on white, yellow text on white, or similar low-contrast combinations. Test with actual users when possible, as some combinations may technically meet the ratio but still be difficult to read.
This criterion ensures that users with low vision can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that users with color blindness can access and understand the content, improving their overall experience and ability to use the website effectively.
This criterion ensures that older users can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
Light gray text (#CCCCCC) on white background has only 1.6:1 contrast ratio, making it hard to read.
<p style="color: #CCCCCC; background: #FFFFFF;">Hard to read text</p>Dark gray text (#333333) on white background has 12.6:1 contrast ratio, meeting AA requirements.
<p style="color: #333333; background: #FFFFFF;">Easy to read text</p>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 1.4.3 Contrast (Minimum) are met. Check off items as you complete them.
To meet this success criterion, ensure the following requirements are met:
While meeting the minimum requirements ensures compliance, consider these enhancements for a better user experience:
If text is readable to me, it has enough contrast.
What's readable to you may not be readable to users with low vision. Always use a contrast checker tool to verify the exact ratio.
White text on any dark background always meets contrast requirements.
White (#FFFFFF) on light gray (#CCCCCC) only has 1.6:1 contrast. Always verify with a contrast checker.
I can use any color combination as long as it looks good.
Aesthetic choices must meet contrast requirements. You may need to adjust colors to ensure accessibility while maintaining design quality.
Light gray text on white background (insufficient contrast).
Use darker text colors. For white backgrounds, use at least #767676 for normal text or #595959 for better contrast.
Text on images or gradients that doesn't meet contrast on all parts.
Add a semi-transparent background behind text, use text shadows, or ensure the image/gradient has sufficient contrast throughout.
Placeholder text that's too light and serves as the only label.
Ensure placeholder text meets 4.5:1 contrast, or provide visible labels in addition to placeholders.
Links that don't meet contrast requirements, especially when not underlined.
Ensure link colors meet contrast requirements. Consider adding underlines or using darker link colors.
Disabled form fields with low contrast text.
Disabled fields should still meet contrast requirements, or clearly indicate they're disabled through other means.
Note: These are official W3C resources for 1.4.3. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 1.4.3 Contrast (Minimum) correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Perceivable PrincipleGuideline
1.4 Distinguishable