WCAG (Level AA) SC 1.4.3 Contrast (Minimum) (W3.org)
Issue description
WCAG 1.4.3, “Contrast (Minimum)” addresses a crucial aspect of accessibility for people with low vision or color vision deficiencies: ensuring sufficient contrast between text and its background. The font or component (buttons, for example) color must be sufficiently different (contrasting) enough from the color of the background that users can easily perceive and use the content.
Many websites use color combinations that have poor contrast (not enough color difference), making it difficult for some users to read the text. This is especially problematic for some users:
- Low vision: People with low vision may have difficulty distinguishing text that doesn’t have enough contrast with its background.
- Color blindness: People with color blindness may not be able to perceive certain color combinations, making the text blend in with the background.
- Users in sunlight: People on mobile devices in bright sunlight may have difficulty when there is not enough contrast between text/component color and background color.
Foreground and background contrast examples:
WCAG requirements:
This guideline sets minimum contrast ratios for text:
- Normal text: Text should have a contrast ratio of at least 4.5:1 against its background.
- Large text: Large text (18pt or 14pt bold) should have a contrast ratio of at least 3:1 against its background.
Related requirements:
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
Consequences of poor contrast:
- Eye strain: Struggling to read low-contrast text can cause eye strain and headaches.
- Difficulty understanding content: Poor contrast can make it difficult to read and understand the information on the page.
- Exclusion: Users with low vision may be unable to access or perceive the content at all.
Essentially, this guideline ensures that text is legible and readable for everyone, regardless of their visual abilities. It promotes inclusivity and provides a better user experience for all
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 1.4.3 “Contrast (Minimum)” involves ensuring sufficient color contrast between text and its background. Here’s how:
Choose colors with good contrast:
- Use a contrast checking tool: Use a free contrast checker (e.g., Contrast Checker – WebAIM) to analyze the contrast ratio between your text and background colors. Aim for a ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Some contrast checkers give a pass/fail at various levels. Aim for a “pass” at AA at normal or large text.
- Color combinations: Choose color combinations that provide good contrast. For example, black text on a white background or white text on a dark blue background. Avoid low-contrast combinations: Avoid combinations like light gray text on a white background or dark blue text on a black background.
Adjust text and background colors
- Darken or lighten: If your current colors have poor contrast, try darkening the text color or lightening the background color (or vice versa) to improve the ratio. Most color contrast checkers have a color picker tool to help easily do this.
- Test different combinations: Experiment with different color combinations until you achieve sufficient contrast.
- Consider text size and weight:
- Larger text: Larger text is generally easier to read, so consider increasing the font size if possible.
- Bold text: Using bold text can also improve readability and contrast.
- Remember to check dark mode: If you have a dark mode option for your theme or CSS, remember to check color contrast changes in both modes or make specific contrast changes separately for each mode.
Use text shadows or outlines:
- Enhance contrast: You can optionally apply a text shadow or outline to the text to enhance its contrast against the background. However, ensure the shadow or outline doesn’t create its own contrast issues.
Provide options for users:
- Customizable settings: Allow users to adjust the text size, color, and contrast through website settings or browser extensions.
- Change the background color: Change the background color to a darker shade.
- Increase the font size: Make the text larger to improve readability.
- Add a text shadow: Add a subtle dark text shadow to enhance contrast.
By implementing these techniques, you can ensure that your website’s text is legible and readable for everyone, including those with low vision or color vision deficiencies.
