WCAG Color Contrast Guide

Why Color Contrast Matters

Color contrast is one of the most fundamental aspects of web accessibility. When text and background colors lack sufficient contrast, content becomes difficult or impossible to read for millions of people. This includes individuals with low vision, color vision deficiencies, and even typical users in challenging conditions like bright sunlight or low-quality screens.

WCAG (Web Content Accessibility Guidelines) defines specific contrast ratio thresholds that ensure content remains readable for the widest possible audience. Meeting these standards is not just good practice; in many jurisdictions, it is a legal requirement.

Understanding Contrast Ratios

A contrast ratio measures the relative luminance difference between two colors on a scale from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white).

Luminance is calculated from the RGB values of each color using a formula that accounts for how the human eye perceives different wavelengths. Green light appears brightest to our eyes, followed by red, then blue, which is why the luminance formula weights these channels differently.

The resulting ratio tells you how distinguishable two colors are from each other. Higher ratios mean better readability.

WCAG Conformance Levels

WCAG defines three conformance levels, each building on the previous one:

Level A is the minimum. It does not specify contrast ratios but requires that color is not the only means of conveying information.

Level AA is the standard most organizations target. It requires:

• Normal text: A contrast ratio of at least 4.5:1
• Large text (18pt or 14pt bold): A contrast ratio of at least 3:1
• UI components and graphical objects: A contrast ratio of at least 3:1 against adjacent colors

Level AAA is the highest standard. It requires:

• Normal text: A contrast ratio of at least 7:1
• Large text: A contrast ratio of at least 4.5:1

Most organizations aim for AA compliance as the practical balance between accessibility and design flexibility.

Common Contrast Failures

These patterns frequently fail contrast requirements:

• Light gray text on white backgrounds: A popular aesthetic choice that regularly fails AA requirements. Gray text (#767676) on white is the lightest gray that passes 4.5:1 for normal text.
• Colored text on colored backgrounds: Blue text on a purple background or green text on a teal background often has insufficient contrast even if the colors look different to the designer.
• Placeholder text in form fields: Default placeholder colors in many browsers fail contrast requirements, making them unreadable for users with low vision.
• Text over images: Without a solid overlay or text shadow, text placed directly on photographs has inconsistent and often insufficient contrast.
• Disabled state styling: While WCAG does not require disabled elements to meet contrast ratios, making them too faint can confuse users about what is on the page.

Testing Your Color Contrast

A reliable contrast checker is essential for verifying compliance. Enter your foreground and background colors and the tool calculates the ratio and tells you which WCAG levels are met.

When testing, check these elements specifically:

• Body text: The most critical element. Must meet at least 4.5:1 against its background.
• Headings: If they are large enough (18pt or 14pt bold), the 3:1 threshold applies.
• Links: Must be distinguishable from surrounding text. If color is the only differentiator, the link color needs 3:1 contrast against the surrounding text color in addition to meeting contrast requirements against the background.
• Buttons and interactive elements: Both the text within buttons and the button boundaries against the page background need sufficient contrast.
• Form elements: Input borders, labels, and error messages all need to be clearly visible.
• Icons: Meaningful icons that convey information need 3:1 contrast against their background.

Practical Tips for Meeting Contrast Requirements

Follow these strategies to create designs that are both attractive and accessible:

• Start with contrast in mind: Choose your text and background colors with contrast ratios as a primary constraint, not an afterthought. It is much harder to fix contrast issues in a completed design.
• Use a color palette tool: A palette generator can help you find colors that work well together while maintaining sufficient contrast.
• Create a contrast matrix: For your brand palette, document which color combinations pass AA and AAA requirements. Share this with your team as a reference.
• Design for both themes: If you support dark mode, test contrast in both light and dark themes. Colors that work in one theme may fail in the other.
• Add visual cues beyond color: Use underlines for links, icons alongside status indicators, and patterns or borders in addition to color differences. This helps color-blind users and reinforces information for everyone.

Exceptions and Special Cases

WCAG includes some exceptions to contrast requirements:

• Logotypes: Text that is part of a logo or brand name has no contrast requirement.
• Incidental text: Text in decorative images or inactive UI components is exempt.
• Large text: Gets a lower contrast requirement (3:1 instead of 4.5:1) because larger characters are inherently easier to read.
• Disabled controls: Elements that are visually disabled are not required to meet contrast thresholds, though it is good practice to keep them reasonably visible.

Beyond WCAG: Real-World Accessibility

Meeting WCAG thresholds is the baseline, not the ceiling. Consider these additional factors:

• Screen quality varies: Older monitors, low-end phones, and screens viewed at angles display colors with less contrast than ideal. A ratio just barely passing 4.5:1 may be hard to read on lower-quality displays.
• Environmental conditions: Users read screens in bright sunlight, dimly lit rooms, and everything in between. Higher contrast provides a better experience in all conditions.
• User preferences: Some operating systems offer high-contrast modes. Ensure your site respects these system-level preferences via the prefers-contrast media query.

Accessible design is good design. Content that is easy to read for users with disabilities is easier to read for everyone.

Try our free Color Contrast Checker — no signup required.