Color Contrast Checker: Check WCAG Accessibility

Quick Answer

For normal text, WCAG Level AA requires a contrast ratio of at least 4.5:1. Large text can meet AA at 3:1. WCAG Level AAA uses stronger thresholds of 7:1 for normal text and 4.5:1 for large text. For applicable user-interface components and meaningful graphical objects, WCAG 2.2 requires at least 3:1 contrast against adjacent colors. These thresholds come from WCAG Success Criteria 1.4.3, 1.4.6, and 1.4.11. W3C WCAG contrast requirements provide the formal criteria.

What Does a Contrast Checker Measure?

A contrast checker measures the difference in relative luminance between two colors. In a typical text use case, one color is the foreground, such as the text color, and the other is the background behind it.

The SooperTools checker accepts two six-digit HEX colors. You can enter the values directly or choose them with the built-in color pickers. The tool then produces a contrast ratio and shows how that ratio compares with WCAG AA and AAA thresholds.

This makes the tool useful for checking text colors, background colors, headings, labels, buttons, interface states, and other design combinations where visual contrast matters.

How Is the Contrast Ratio Calculated?

WCAG defines contrast using relative luminance, which represents the perceived brightness of a color after converting its RGB components into a linear-light representation.

The contrast ratio is calculated as:

The resulting ratio can range from 1:1, representing colors with equal luminance such as white against white, up to 21:1, representing the maximum contrast possible between black and white. The ratio itself has no unit because it is a comparison between two luminance values. W3C explains the contrast-ratio formula and relative luminance method.

The SooperTools calculator performs the calculation from the actual HEX values rather than judging contrast from how similar or different the colors appear to the human eye.

WCAG Contrast Ratio Requirements

WCAG defines large-scale text as at least 18-point regular text or at least 14-point bold text, with equivalent sizing depending on the font and rendering context. On typical web layouts, these values are approximately 24 CSS pixels for 18-point text and 18.67 CSS pixels for 14-point bold text. See the W3C definition of large-scale text.

These are threshold values. A ratio of 4.49:1 does not become 4.5:1 simply because it is displayed with fewer decimal places. The underlying value must meet the required threshold. WCAG also notes this principle for the 3:1 non-text threshold. W3C's non-text contrast guidance explains that computed values should not be rounded upward to meet a threshold.

What Is the Difference Between WCAG AA and AAA?

WCAG AA and AAA are different conformance levels. AA establishes the commonly used minimum contrast requirements for normal and large text. AAA sets a higher contrast requirement for text that is intended to provide enhanced accessibility.

For normal text, the difference is substantial: AA requires 4.5:1 while AAA requires 7:1. For large text, AA requires 3:1 while AAA requires 4.5:1. A color pair can therefore pass AA while failing AAA.

This is why a WCAG contrast checker should show the actual ratio and the applicable thresholds instead of giving only a simple "good" or "bad" result.

Does 3:1 Contrast Meet WCAG?

It depends on what you are checking. A 3:1 ratio is sufficient for large text under WCAG Level AA, but it is not sufficient for normal text under the 4.5:1 AA requirement.

A 3:1 ratio is also the minimum used by WCAG 2.2 for applicable user-interface components and meaningful graphical objects under Success Criterion 1.4.11. That criterion addresses visual information needed to identify controls, states, and important graphical content. W3C's non-text contrast guidance provides the detailed scope.

What Does a High Contrast Ratio Mean?

A higher contrast ratio means there is a greater difference in relative luminance between the two selected colors. The maximum possible ratio is 21:1.

High contrast generally makes text or important visual information easier to distinguish from its surroundings. However, the ratio must always be evaluated in the context of the content. WCAG defines different requirements for normal text, large text, and non-text elements rather than applying one threshold to everything.

Also remember that a contrast ratio does not measure every aspect of readability. Font size, weight, spacing, line length, surrounding content, and visual presentation can still affect how easy something is to perceive.

Practical Color Contrast Examples

What Is the Difference Between Foreground and Background Color?

The foreground color is the color being displayed in front of another color. For a typical paragraph, this is the text color. The background color is the color behind it.

The contrast ratio itself does not change when the two colors are swapped because the calculation always uses the lighter luminance as L1 and the darker luminance as L2. In practice, however, the visual role of the colors still matters because one may be used for text and the other for its background.

What About Buttons, Icons, and Other UI Elements?

Text contrast is not the only accessibility consideration. WCAG 2.2 Success Criterion 1.4.11 addresses meaningful visual information for user-interface components and graphical objects. Applicable elements need at least 3:1 contrast against adjacent colors. This can include visual indicators needed to identify controls or their states. W3C's non-text contrast guidance explains the scope and exceptions.

This does not mean every border, decoration, shadow, or graphic on a page must automatically meet the same requirement. The rule focuses on visual information that is necessary to identify the component, state, or meaningful graphical content.

Can a Contrast Checker Prove That a Website Is Accessible?

No. A color contrast checker evaluates a selected pair of colors, not an entire website.

A full accessibility review can involve many other requirements, including keyboard operation, focus visibility, semantic structure, text alternatives, forms, motion, content organization, use of color, and compatibility with assistive technologies.

The U.S. Department of Justice identifies poor color contrast as one type of web accessibility barrier and provides broader guidance on web accessibility. A contrast check should therefore be treated as one part of accessibility work rather than as a complete legal or technical compliance audit. U.S. Department of Justice web accessibility guidance.

Is an ADA Contrast Checker the Same as a WCAG Contrast Checker?

These phrases are often used interchangeably in searches, but they should not be treated as separate numerical standards. WCAG contains the detailed technical contrast criteria used for web content, while ADA requirements concern accessibility more broadly in the applicable context.

For practical website color testing, it is more precise to evaluate the color pair against the relevant WCAG criteria and then consider the broader accessibility requirements that apply to the website or application. The ADA.gov web guidance provides broader accessibility context, while the W3C WCAG 2.2 specification defines the technical success criteria.

How to Use the Contrast Checker

Start by selecting a foreground color and a background color. You can use the color pickers or enter valid six-digit HEX values such as #000000 and #FFFFFF.

Select Check Contrast to calculate the ratio. The result shows the contrast ratio and separate checks for normal text, large text, enhanced text requirements, and applicable non-text contrast.

Use Swap Colors to reverse the foreground and background positions. The ratio should remain the same because contrast is based on the lighter and darker luminance values.

You can also use the quick examples to test common combinations or add multiple color pairs to the comparison area when you are evaluating several design options.

What Should You Do When a Color Pair Fails?

When a combination does not meet the requirement for its intended use, adjust one or both colors and check the new combination again. Increasing the luminance difference generally increases the contrast ratio.

For example, you might make dark text darker against a light background or make a light background brighter behind dark text. The appropriate change depends on your design, branding, surrounding colors, and the content being presented.

Do not change a color solely because it passes one threshold. Check the color in the actual interface and confirm that the surrounding design, interaction states, and non-text elements remain distinguishable.

Limitations of This Contrast Checker

The SooperTools tool is designed to calculate contrast for two selected six-digit HEX colors. It does not perform a complete accessibility audit of a webpage or application.

The tool also does not automatically analyze gradients, background images, transparency, multiple layers, hover states across a complete interface, or every contextual condition in a real webpage. Those situations can require additional testing of the actual rendered design.

A result should also be interpreted according to the intended content. A 3:1 result may be adequate for some large-text or non-text situations while remaining insufficient for normal text under WCAG AA.

Frequently Asked Questions

Related SooperTools

For other color workflows, you can also use the HEX to PMS Converter to work with HEX color values and corresponding print-color references. It serves a different purpose from accessibility contrast testing.

References

W3C Web Content Accessibility Guidelines (WCAG) 2.2 — Technical accessibility standard covering contrast requirements and related success criteria.

U.S. Department of Justice ADA Web Accessibility Guidance — Federal guidance on web accessibility and accessibility barriers.