What is color accessibility?

Color is such a vital element of web design as it is used to convey personality, attract attention, symbolize action, and indicate importance. As color carries a lot of significance in both being visually pleasing and conveying meaning, users must be able to perceive different colored content on a webpage. Color accessibility is important as it helps users with visual impairments like low vision or color blindness to properly distinguish content elements and read/view them effectively.

What is a color contrast checker?

A color contrast checker is a tool that measures the difference in perceived luminance between two colors to ensure that is perceivable to users with visual impairments or insensitivity.

How is a color contrast ratio caluclated?

The difference is measured on a ratio scale that starts at 1:1 (white on white) to 21:2 (black on white). According to the WCAG level AA, the minimum contrast ratio that colors can have for the visual presentation of text and images of text is 4.5:1.

What is an acceptable WCAG color contrast ratio?

WCAG 2.1 Level AA requires the visual presentation of text and images of text to have a contrast ratio of at least 4.5:1, except for large text, which should have a minimum contrast ratio of 3:1. WCAG 2.1 Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text (14 point and bold or larger, or 18 point or larger).

Do images have to comply with WCAG color contrast requirements?

Images must pass the WCAG contrast requirements. Images that contain text must ensure that the contrast between the image background and the text is sufficient, especially if the images are low quality and if the image needs to be enlarged in any way. Images of text must have a minimum contrast ratio of 4.5:1. For images that do not contain text, but still convey meaning, the image components must still have sufficient contrast to ensure that the overall image is perceivable. WCAG 2.1 level AA specifies that graphical objects and author-customized interface components such as icons, charts, and graphs, buttons, form controls, and focus indicators and outlines, have a contrast ratio of at least 3:1.

Color Contrast Checker

Test the contrast ratio of background and text colors for accessibility. Use it to visualize different color combinations for your website design that comply with Web Content Accessibility Guidelines (WCAG) and international accessibility legislation.

Get a Free Scan

Color Contrast Tool Guide

Enter either a background and foreground color in RGB, hexadecimal format, or pick a color using the color selector. Once a color has been selected the lightness level can be adjusted.

How to Interpret Color Contrast Ratios

Minimum contrast ratio requirements

WCAG 2.2 Level AA

Normal text: minimum contrast ratio of 4.5:1
Large text: minimum contrast ratio of 3:1

WCAG 2.2 Level AAA

Normal text: minimum contrast ratio of 7:1
Large text: minimum contrast ratio of 4.5:1

Large text is defined as 14 point (18.67 px) and bold or larger, or 18 point (24 px) or larger.

Need Additional Help?

Building website design elements with proper contrast is one of the many steps to take on your journey to an accessible website. Our platform provides the tools and data you need to ensure that your website is fully compliant and user-friendly for every visitor.

Get a Free Accessibility Scan

Illustration of Product UI with a dashboard identifying progress for WCAG's A, AA, and AAA compliancy

Why Use a Color Contrast Checker?

Contrast is one of the more common web accessibility issues, but also one of the easiest to fix. According to the U.S. Web Design System (USWDS), 4.5% of the U.S. population has some kind of color insensitivity that makes it difficult to distinguish or perceive differences in hues. People with color insensitivity and low vision often have difficulty reading text that does not contrast with its background. Providing a minimum luminance contrast ratio between the text and its background can make the text more readable for users who cannot see the full range of colors and helps those rare users who see no color. Use Acquia Web Governance’s web color contrast checker to quickly check color combinations, and ensure that all your branded content assets and design elements are accessible to everyone. It can also be used to test color contrast with other legislation, e.g. as an ADA contrast checker.

Frequently Asked Questions

What is a color contrast checker and why is it important for accessibility?
A color contrast checker is a tool that measures the difference in luminance between foreground text and its background, expressed as a contrast ratio (e.g., 4.5:1). Meeting WCAG color contrast requirements ensures that people with low vision, color blindness, or other visual impairments can read your website content. Acquia's free color contrast checker instantly tests any combination of hex, RGB, or HSL color values against WCAG 2.1 AA and AAA standards.

A color contrast checker is a tool that measures the difference in luminance between foreground text and its background, expressed as a contrast ratio (e.g., 4.5:1). Meeting WCAG color contrast requirements ensures that people with low vision, color blindness, or other visual impairments can read your website content. Acquia's free color contrast checker instantly tests any combination of hex, RGB, or HSL color values against WCAG 2.1 AA and AAA standards.

What contrast ratio is required to pass WCAG accessibility standards?
WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). For the strictest Level AAA compliance, the requirements are 7:1 for normal text and 4.5:1 for large text. UI components and graphical objects must meet a 3:1 ratio. Acquia's color contrast checker displays pass/fail results for all WCAG levels simultaneously so you can quickly find compliant color pairings.

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). For the strictest Level AAA compliance, the requirements are 7:1 for normal text and 4.5:1 for large text. UI components and graphical objects must meet a 3:1 ratio. Acquia's color contrast checker displays pass/fail results for all WCAG levels simultaneously so you can quickly find compliant color pairings.

How do I check if my website colors pass WCAG color contrast requirements?
To check color contrast compliance, enter your text color and background color values (hex codes, RGB, or HSL) into Acquia's free online color contrast checker. The tool instantly calculates the contrast ratio and shows a green PASS or red FAIL for WCAG A, AA, and AAA levels. For a comprehensive site-wide audit, Acquia Web Governance automatically scans every page and flags all color contrast violations with exact element locations.

To check color contrast compliance, enter your text color and background color values (hex codes, RGB, or HSL) into Acquia's free online color contrast checker. The tool instantly calculates the contrast ratio and shows a green PASS or red FAIL for WCAG A, AA, and AAA levels. For a comprehensive site-wide audit, Acquia Web Governance automatically scans every page and flags all color contrast violations with exact element locations.

Why is color contrast a legal requirement for websites?
Color contrast requirements are embedded in accessibility laws worldwide, including the Americans with Disabilities Act (ADA), Section 508 of the Rehabilitation Act, and the European Accessibility Act (EAA) — all of which reference WCAG as the technical standard. Failing to meet contrast requirements can expose organizations to lawsuits, regulatory penalties, and reputational damage. Beyond compliance, adequate contrast improves readability for all users, not just those with disabilities.

Color contrast requirements are embedded in accessibility laws worldwide, including the Americans with Disabilities Act (ADA), Section 508 of the Rehabilitation Act, and the European Accessibility Act (EAA) — all of which reference WCAG as the technical standard. Failing to meet contrast requirements can expose organizations to lawsuits, regulatory penalties, and reputational damage. Beyond compliance, adequate contrast improves readability for all users, not just those with disabilities.

What is the difference between WCAG AA and WCAG AAA color contrast?
WCAG AA is the broadly required standard for most organizations, requiring a 4.5:1 contrast ratio for normal text, while WCAG AAA is a higher, optional standard requiring 7:1 — designed for content serving users with severe visual impairments. Most legal mandates (ADA, EAA, Section 508) require AA compliance at minimum. Acquia's color contrast checker clearly indicates which levels your color combination passes, helping you target the right compliance level for your context.

WCAG AA is the broadly required standard for most organizations, requiring a 4.5:1 contrast ratio for normal text, while WCAG AAA is a higher, optional standard requiring 7:1 — designed for content serving users with severe visual impairments. Most legal mandates (ADA, EAA, Section 508) require AA compliance at minimum. Acquia's color contrast checker clearly indicates which levels your color combination passes, helping you target the right compliance level for your context.