The Web Content Accessibility Guidelines (WCAG) has 78 success criteria checks to evaluate a website and help promote an accessible online experience for all users.

The most common accessibility issue is poor color contrast, with 83% of websites audited in 2023 by WebAIM having color contrast issues. Low contrast makes it difficult for readers to distinguish the shapes and edges of the characters, reducing reading speed and comprehension.

What is Color Contrast

• Color contrast is the perceived difference in brightness between the text and the background.
• Color contrast is expressed as a ratio from 1:1 to 21:1.
  • With 1:1 meaning no color contrast and 21:1 having the maximum color contrast.
• WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for standard text and 3:1 for large text.
• Large text is defined as:
  • Text larger than 24px.
  • Bold text 18.66px or larger.

Color Contrast Examples

Below are two examples illustrating color contrast. Notice how it becomes more difficult to read the text as we decrease the color contrast between the text and the background color.

Two Common Types of Vision Disabilities:

1. Low Vision — A chronic visual impairment that can’t be corrected with glasses, contacts, or medical treatments.
2. Color Vision Deficiency — Difficulty distinguishing between specific colors or rarely the inability to see any color.

Having sufficient color contrast will help users with poor vision to read and interact with the content on your website reliably.

How to Fix Color Contrast Issues

Various free tools are available to check color contrast. Some tools can be used to scan and audit a website that has already been developed. Other tools are available to help you during the design phase of your project, with plugins for popular programs like Figma, Sketch, and Adobe XD.

Use these tools to A/B test your color palette and find colors that meet WCAG color contrast requirements.

Tools We Like:

• WebAIM — Color Contrast Checker
• Figma — Contrast Plugin
• Learnui — Accessible Color Generator
• A11y — Color Palette
• Monsido — Ongoing Accessibility Monitoring

Fixing color contrast issues on a website can have its challenges. Still, using tools like WebAIM, Monsido, and other accessibility monitoring tools, we can quickly identify accessibility issues on a website and implement the necessary code changes to resolve problems and improve your user experience for everyone.

Getting Started

Knowing where to start and how to solve accessibility issues can be daunting. Contact our team to review your website and to get guidance and development support to improve your website's accessibility.

Image Credit: Adobe Firefly