Fixing color contrast issues with Ally Assistant

Ally Assistant can detect and help you contrast issues between text and background that doesn’t meet WCAG 2.1 AA color contrast requirements.
Insufficient color contrast can make text difficult to read for users with low vision. This tool helps improve accessibility and meet the following standards:

• 4.5:1 for normal text (under 18px or 14px bold)
  
• 3:1 for large text (at least 18px or 14px bold)
  

Understanding Contrast Ratios

When a color contrast issue is detected, Ally Assistant displays the current ratio in the violation message.

You can find the contrast ratio in:

• The Scan Results Table after running a scan
• The in-product panel when opening the issue
  

Fixing Color Contrast Issues

1. Scan your pages to find accessibility violations. See the article: Scan your pages for accessibility issues.
2. After scanning, review the violations. Color Contrast issues appear under the Color Contrast label.
   
3. Click Color Contrast. The remediation panel opens with details and the current contrast level.
   
4.  Choose your adjustment method.
   • Adjust text color – Select a new text color that improves contrast.
     
   • Adjust background color – Change the background color for the element. When changing the background, you can choose to apply it to a larger area.
     
     
5. Once the contrast is adjusted to meet WCAG requirements, the Contrast level box turns green with a check mark, and the Apply changes button will activate.
   
   Note: Apply changes remains locked until contrast is adjusted to meet WCAG requirements.
   
6. Click Apply changes

Best Practices for Accessible Design

• Choose colors with high readability and contrast.
• Test your color palette early in the design process.
• Use online contrast checkers for additional verification.