WCAG Color Contrast Guide: Make Your Website Accessible

Approximately 300 million people worldwide have some form of color vision deficiency. Millions more have low vision due to aging, cataracts, or other conditions. If your website's text does not have sufficient color contrast, a significant portion of your audience cannot read it — and in some jurisdictions, that is also a legal problem.

What Is WCAG?

WCAG stands for Web Content Accessibility Guidelines — a set of internationally recognized standards published by the W3C (World Wide Web Consortium). These guidelines define how to make web content accessible to people with disabilities, including visual, auditory, cognitive, and motor disabilities.

The current version is WCAG 2.1, with WCAG 2.2 adding further refinements. Many countries and regions have incorporated WCAG standards into law:

• United States: Section 508 of the Rehabilitation Act requires federal websites and digital communications to meet WCAG 2.0 AA standards.
• European Union: The EU Web Accessibility Directive requires public sector websites to conform to WCAG 2.1 AA.
• United Kingdom: The Public Sector Bodies Accessibility Regulations 2018 mandate WCAG 2.1 AA compliance.
• Australia: The Disability Discrimination Act is interpreted to require accessible websites.

Even if your website is not legally required to comply, accessibility is good practice — it expands your audience, improves SEO, and demonstrates social responsibility.

Understanding Contrast Ratio

Contrast ratio is a mathematical measure of the difference in relative luminance between two colors. It is expressed as a ratio, with 1:1 being identical colors (no contrast) and 21:1 being the maximum contrast (black text on a white background).

The formula uses relative luminance — a measure of how bright a color appears to the human eye, weighted to match how our eyes perceive different wavelengths of light. Green contributes more to perceived brightness than red, which contributes more than blue.

You do not need to understand the mathematics — the SimplyToolbox Color Contrast Checker calculates the ratio automatically from any hex, RGB, or HSL color pair.

WCAG AA vs. AAA Standards

WCAG defines two conformance levels for color contrast:

Level AA (The Minimum Standard)

AA is the standard that most legal requirements reference. The requirements are:

• Normal text (under 18pt or 14pt bold): Minimum contrast ratio of 4.5:1
• Large text (18pt or larger, or 14pt bold or larger): Minimum contrast ratio of 3:1
• UI components and graphical objects (icons, borders, chart lines): Minimum contrast ratio of 3:1

Level AAA (Enhanced Accessibility)

AAA is a higher standard, recommended for applications used by people with severe visual impairments:

• Normal text: Minimum contrast ratio of 7:1
• Large text: Minimum contrast ratio of 4.5:1

AAA is not required by most regulations, but achieving it for body text shows strong commitment to accessibility. Many popular design systems (like Radix UI and Material Design) aim for AAA contrast ratios for text.

Good vs. Bad Contrast: Practical Examples

How to Fix Failing Colors

When the checker flags a color pair as failing, here is how to improve it:

• Darken the foreground color — For text on a light background, shift the text color toward darker shades. Instead of #999999, try #666666 or darker.
• Lighten the background — A slightly lighter background behind dark text improves contrast without changing the visual design significantly.
• Increase font size — Large text has a lower contrast requirement (3:1 vs 4.5:1). If you cannot change colors, making text larger or bolder can bring it into compliance.
• Use the checker interactively — The SimplyToolbox Color Contrast Checker shows live pass/fail status as you adjust colors, making it easy to find a compliant combination quickly.