Contrast Ratio Checker

Accessibility Information & How to Use

Why Does Contrast Ratio Matter?

The contrast ratio between text and background colors on websites and applications directly impacts readability for all users, not just those with visual impairments such as low vision or color vision deficiencies. Insufficient contrast can make text difficult to read and prevent important information from being communicated effectively. This is especially pronounced in certain conditions, such as using a mobile device in bright sunlight.

Ensuring adequate contrast ratios is a fundamental requirement of web accessibility and is essential for making information available to as many people as possible.

About the WCAG (Web Content Accessibility Guidelines) Standards

WCAG is an international set of guidelines for making web content more accessible. Regarding contrast ratios, the following success criteria are defined (WCAG 2.1 and 2.2):

• Level AA (Double-A): The recommended standard for general accessibility compliance.
  • Normal text (below 18pt, or below 14pt if bold): 4.5:1 or higher
  • Large text (18pt or above, or 14pt or above if bold): 3:1 or higher
• Level AAA (Triple-A): The recommended standard for achieving a higher level of accessibility.
  • Normal text (below 18pt, or below 14pt if bold): 7:1 or higher
  • Large text (18pt or above, or 14pt or above if bold): 4.5:1 or higher

* Point (pt) sizes differ from CSS pixel (px) values. As a rough guide, 18pt is approximately 24px and 14pt is approximately 18.66px. In the preview above, "Normal Text" is displayed at 16px and "Large Text" at 24px.

This contrast ratio checker shows real-time conformance results as "Pass" or "Fail" based on the colors you enter.

How to Use This Tool & Its Benefits

• Simply enter the colors you plan to use for text and background (hex code or color picker) to see the contrast ratio and WCAG conformance results in real time.
• Checking color combinations early in the design process helps reduce revisions and supports an accessible design workflow.
• Use the "Swap Colors" button to quickly switch the text and background colors for testing.
• The preview feature lets you visually verify the actual color combination for both normal and large text, along with the corresponding WCAG conformance results.

Tips for Improving Contrast Ratios

• Start with black and white: Black text on a white background (or vice versa) provides the maximum contrast ratio of 21:1.
• Focus on saturation and lightness: Even colors with similar hues can achieve good contrast when there is a noticeable difference in lightness or saturation.
• Use grays effectively: Instead of pure black (#000000), try a dark gray (e.g., #333333, #595959). Instead of pure white (#FFFFFF), try a light gray (e.g., #F0F0F0, #EAEAEA). This creates a softer appearance while often maintaining sufficient contrast. Always verify against WCAG standards.
• Avoid problematic combinations: Be cautious with combinations like red and green, or blue and yellow, which can be difficult to distinguish for people with color vision deficiencies. Mid-tone combinations (e.g., light gray with medium blue) also tend to have low contrast.
• Test your designs: Always verify your color choices using a tool like this checker, rather than relying solely on your design software.

For more information, refer to the WCAG 2.1 specification and the latest WCAG 2.2 specification.

Q: Does this tool support WCAG 2.2?

A: Yes, it does for text contrast ratio checking. In WCAG 2.2, the success criteria for text-to-background contrast ratios (Success Criterion 1.4.3 Contrast (Minimum) and 1.4.6 Contrast (Enhanced)) remain unchanged from WCAG 2.1. Therefore, the text contrast evaluation results shown by this tool also comply with WCAG 2.2.

However, WCAG 2.2 introduces new success criteria such as "2.4.11 Focus Appearance" and "2.5.8 Target Size (Minimum)." Additionally, "1.4.11 Non-text Contrast" from WCAG 2.1 remains an important requirement. This tool does not include functionality to evaluate contrast or visual aspects of non-text elements or UI components.

Q: What are the main changes related to contrast in WCAG 2.2?

A: To reiterate, the contrast ratio threshold values for text and background colors have not changed.

Key changes in WCAG 2.2 include the addition of "2.4.11 Focus Appearance (AA)," which improves the visibility of keyboard focus indicators, and "2.5.8 Target Size (AA)," which ensures minimum click/tap target areas. While these are not direct color contrast criteria, they are important updates for overall visual accessibility. The "1.4.11 Non-text Contrast (AA)" requirement introduced in WCAG 2.1 also remains in effect in 2.2.

Q: What is "Non-text Contrast"?

A: It applies to non-text UI components and graphics, such as button borders, input field outlines, visual indicators for checkboxes and radio buttons, focus indicators, and visual elements needed to understand charts and diagrams.

These elements must have a contrast ratio of at least 3:1 against adjacent background colors so that users can identify what they are and their current state (e.g., focused, selected). This is defined in WCAG Success Criterion 1.4.11 Non-text Contrast (AA).

Q: Does this tool only check text contrast?

A: Yes, this tool is specifically designed to evaluate the contrast ratio between text color and background color (WCAG 1.4.3 and 1.4.6).

It does not include functionality to check non-text element contrast (WCAG 1.4.11), focus appearance (WCAG 2.4.11), or target size (WCAG 2.5.8). To evaluate the accessibility of those elements, you will need to use other specialized tools or perform manual checks.

Q: What should I do if the result is "Fail"?

A: Adjust the text color, background color, or both until the contrast ratio meets your target level (for AA: 4.5:1 for normal text and 3:1 for large text; for AAA: 7:1 and 4.5:1 respectively).

Generally, increasing the difference in lightness between two colors will improve the contrast ratio. You can adjust colors using the color picker or hex code input field while seeing the results update in real time.

External Guidelines & Attribution

This site references and quotes portions of the following guidelines to supplement its explanations.

• Original: W3C Web Content Accessibility Guidelines (WCAG)
  © 2025 W3C® (MIT, ERCIM, Keio, Beihang) – W3C Document License

Quoted content is used solely to promote understanding of the guidelines, with proper attribution and licensing clearly stated to comply with the applicable license terms.

This Contrast Ratio Checker is a tool for verifying the readability and legibility of headings, body text, buttons, and other elements by their numerical contrast values. AMIX, the operator of this tool, takes a comprehensive approach to design — considering contrast, font sizes, line spacing, and more — to create accessible and readable materials.