Color Contrast Checker

Using a color contrast analyzer will help you determine whether a combination of foreground and background colors entered meets accessibility guidelines. To conform with WCAG 2.0 Level AA, the standard for Section 508 compliance, colors must have the following contrast ratios:

• 3:1 for text with a size of 18 points (14 points if in boldface) or larger
• 4.5:1 for text smaller than 18 points

To conform with WCAG 2.0 Level AAA, colors must meet higher contrast ratios:

• 4.5:1 for text 18 points (14 points if in boldface) or larger
• 7:1 for text smaller than 18 points

Color contrast is often discussed in the context of text. However, WCAG also sets clear expectations for non‑text elements. Specifically, WCAG version 2.1 states that all key visual information used to understand or operate an interface needs to meet a contrast ratio of 3:1 against adjacent colors. This applies to:

• User interface components: Visual information that’s needed to identify interactive UI components—such as buttons, form inputs, checkboxes, toggles, tabs, and their states (hover, selected, focus)—must meet a 3:1 contrast ratio against adjacent colors.
• Icons and graphics that convey meaning: Any icon, symbol, or graphical object that conveys information—including status icons, arrows, error symbols, or imagery used to communicate meaning—must also meet a contrast ratio of at least 3:1.
• Charts, infographics, and data visualizations: WCAG also applies non‑text contrast rules to graphics that communicate data or information. This means that lines in a chart, bars in a bar graph, pie chart slices, data points, legends, and similar visual elements must meet at least a 3:1 contrast ratio with adjacent colors.

Notably, images that are purely decorative (that is, images that serve purely aesthetic purposes and convey no information) are exempt from non‑text contrast requirements. WCAG clarifies that only graphics that are essential to understanding content or operating a user interface need to meet the 3:1 threshold.

Many color combinations that are commonly used in brand design systems—like black (#000000) and white (#FFFFFF), and dark gray (#767676) and white—pass WCAG contrast requirements. However, as the following table illustrates, similar color pairs, such as light gray (#999999) and white, fail.

Foreground	Background	Ratio	WCAG 2.0 AA Status
#000000 (Black)	#FFFFFF (White)	21:1	Pass
#767676 (Dark gray)	#FFFFFF (White)	4.5:1	Pass
#999999 (Light gray)	#FFFFFF (White)	2.8:1	Fail

 
Light colors are a common culprit for accessibility issues because their relative luminance is too close to white. Readability depends on sufficient light‑dark separation, and hue alone does not improve legibility when luminance contrast is low. This is why “light‑on‑light” combinations may fail accessibility checks, even if the colors appear distinct in hue.

If your brand palette includes lighter tones, you don’t need to abandon them—you just need to adjust them strategically. For example, you can:

• Darken foreground colors slightly to increase the luminance difference. Even small shifts can push a failing ratio into passing territory.
• Darken or desaturate background colors, especially if your brand uses soft neutrals or pastels.
• Introduce high-contrast variants of brand colors specifically for text, links, and UI components.

The Level Access color checker is a helpful starting point for improving website accessibility—but it’s just one of many available tools you can use to avoid contrast-related WCAG violations. These include:

• The Chrome DevTools contrast checker: Chrome DevTools, found in the “Elements” panel of Google Chrome, provides multiple ways to inspect and fix contrast issues directly in the Chrome browser. DevTools can automatically identify low‑contrast text and even suggest improved color values.
• Browser extensions: Accessibility browser extensions, such as the WAVE tool from WebAIM and the Level Access Browser Extension, allow designers, developers, and content authors to scan entire pages for common accessibility barriers, including color contrast issues.

When you’re deciding which tools to implement, it’s important to understand the difference between two common approaches to testing color contrast: single-pair testing and full-page scanning.

• Single-pair testing: In single pair testing, a designer or other content creator checks the contrast of two specific colors against one another. This is the type of testing that’s supported by the Level Access contrast checker and Chrome DevTools.
• Full-page scans: Scanning tools, like the Level Access browser extension, check an entire web page at once, identifying all contrast issues (along with other types of common accessibility violations) across multiple components.

Broadly speaking, single-pair testing is helpful if you’re spot-checking individual color combinations during the design process, while full-page scans may be useful for surfacing potential violations on full web pages that have already been designed or published.

If you need to test an entire website, you may want to consider automated monitoring tools, like those in the Level Access Platform, instead of one-off full-page scans. These tools can rapidly detect issues, including contrast problems, across hundreds or even thousands of pages, and provide helpful context for fixing them.

Placing text over images can create accessibility issues. It’s best practice to avoid using text in images altogether, because this text cannot be interpreted by screen readers. However, if using text in images is necessary, ensure that it meets the same minimum contrast ratios as any other text—4.5:1 for regular text and 3:1 for large text.

This can be tricky because images rarely have a uniform background. Contrast can vary dramatically within just a few pixels, so checking only one point behind the text can lead to false confidence. To test accurately, while accounting for the constantly shifting light and dark areas within an image, make sure to check text against both the lightest and darkest areas of its background:

1. Sample the lightest area behind the text (worst case for dark text).
2. Sample the darkest area behind the text (worst case for light text).
3. Confirm that both pairs of colors meet WCAG thresholds (4.5:1 / 3:1).

In some cases, an image’s background may be too variable or complex for reliable contrast. In this case, the following solutions can help you improve text readability:

• Semi-transparent overlays: Adding a dark or light semi‑transparent overlay behind text helps even out luminance differences in the image, while maintaining its aesthetics.
• Solid color blocks: Placing text inside a fully opaque rectangle ensures consistent contrast no matter the underlying image.
• Text shadows (used cautiously): Text shadows can help improve edge definition, particularly against uneven textures. However, shadows should be used as situational enhancements, rather than replacements for proper color contrast.

Color contrast plays a crucial role in ensuring that your website is readable, easy to use, and inclusive. But it can be challenging to navigate, as web designers must ensure accessibility while staying true to their organization’s branding. This is where a checker comes in handy.

However, adequate color contrast is just one consideration when designing accessible experiences. If you find Level Access’s color accessibility checker useful, consider exploring our complete accessibility solution for designers, including a Figma plugin and comprehensive design evaluations from experts.

Note: The results provided by this tool are based on the text luminosity algorithm recommended in the WCAG 2.0 color contrast accessibility guidelines. This tool is for general assessment purposes only and not a guarantee of WCAG conformance or legal compliance.