Check color contrast and text readability per WCAG standards

The tool shows the contrast ratio on a scale from 1:1 (no contrast) to 21:1 (maximum contrast - black on white). The result is compared against thresholds defined in the WCAG standard:

• Normal text - requires at least 4.5:1 for Level AA (minimum standard) or 7:1 for Level AAA (enhanced standard). Applies to text under 18pt (24px) or under 14pt (18.5px) bold.
• Large / bold text - requires at least 3:1 for Level AA or 4.5:1 for Level AAA. Applies to text from 18pt (24px) or from 14pt (18.5px) bold - headings, buttons, highlights.
• Icons and UI elements - require at least 3:1 for Level AA. Applies to icons, buttons, form fields, and other interface elements that convey information.

Level AA is the minimum required by digital accessibility regulations in many countries, including the EU Web Accessibility Directive. Level AAA provides better readability but is not always practical to achieve for all elements.

If contrast is too low, you don't need to search for the right color by trial and error. The Match feature automatically finds a text color variant that meets the selected contrast threshold.

How matching works:

1. Select the matching target from the list - e.g., AA for normal text or AAA for large text.
2. Click the Match button.
3. The tool will search through lightness variants of the text color and suggest the closest one that meets the requirements.
4. The suggested color can be copied to the clipboard or immediately set as the new text color.

The algorithm preserves the hue and saturation of the original color, changing only the lightness. The suggested color stays consistent with the visual identity while meeting the accessibility standard.

I see a color format error message

Check the color format. A HEX code should start with # and contain 3 or 6 characters (e.g. #fff or #ffffff). For RGB, make sure values are separated by commas and fall within the 0-255 range.

The Adjust function cannot find a suitable color

When the background and text have similar lightness in the same hue, the algorithm may not find a variant that meets the requirements without changing the hue. In this case, consider changing the background color or choosing an entirely different text color.

The color picker does not match the entered code

The browser color picker only supports the HEX format without transparency. If you enter a color in RGBA or HSLA format with transparency, the picker will show only the color part (without alpha). Contrast calculations still take transparency into account.

Color blindness affects about 8% of men and 0.5% of women. People with color blindness may have difficulty distinguishing certain color pairs, even if the luminance contrast is sufficient.

Most common types of color blindness:

• Deuteranopia - difficulty distinguishing green and red (most common form)
• Protanopia - difficulty seeing red
• Tritanopia - difficulty seeing blue and yellow (rare)

This tool checks luminance contrast, which is important for all users. However, when designing, it is also worth avoiding problematic color combinations (e.g., red text on a green background) and not relying solely on color to convey information - use shapes, icons, and text as well.

Color contrast is not just a best practice - it is a legal requirement in many countries. Here are the key regulations that reference WCAG contrast standards:

• European Union - Web Accessibility Directive (2016/2102): All public sector websites and apps must meet WCAG 2.1 Level AA. The European Accessibility Act (2019/882) extends this to private sector products and services from June 2025.
• United States - ADA & Section 508: The Americans with Disabilities Act (ADA) and Section 508 of the Rehabilitation Act require federal agencies and organizations receiving federal funding to meet WCAG 2.0 AA standards. Courts have increasingly applied ADA requirements to commercial websites.
• United Kingdom - Equality Act 2010: Public sector bodies must meet WCAG 2.1 AA under the Public Sector Bodies Accessibility Regulations 2018. The Equality Act also covers private sector services.
• Canada - Accessible Canada Act (2019): Federal organizations must ensure digital accessibility. Ontario's AODA requires WCAG 2.0 AA compliance for all public and large private organizations.
• Australia - Disability Discrimination Act (1992): Australian courts have ruled that websites must be accessible, referencing WCAG standards in multiple landmark cases.
• Japan - JIS X 8341-3: Japan's accessibility standard is based on WCAG 2.0 and applies to government and public-facing websites.

Regardless of your location, meeting WCAG 2.1 Level AA contrast requirements protects your organization from legal risk and ensures your content reaches the widest possible audience.

The contrast ratio uses relative luminance - how bright a color appears to the human eye. The WCAG 2.1 formula is:

(L1 + 0.05) / (L2 + 0.05)

L1 is the luminance of the lighter color, L2 of the darker. Luminance is derived by converting sRGB to linear light, then weighting channels: 0.2126 × R + 0.7152 × G + 0.0722 × B.

The result ranges from 1:1 (identical) to 21:1 (black on white). This removes subjectivity - the ratio stays the same regardless of monitor, lighting, or personal vision.

WCAG 2.2 (October 2023) adds criteria for focus appearance and dragging movements but does not change contrast thresholds. Success Criteria 1.4.3 and 1.4.6 remain identical to WCAG 2.1.

WCAG 3.0 is an early draft proposing APCA (Advanced Perceptual Contrast Algorithm). APCA accounts for font size, weight, and polarity (light-on-dark vs dark-on-light) for a more accurate score.

WCAG 3.0 is years from becoming a recommendation. For now, WCAG 2.1 AA (4.5:1 / 3:1) remains the legal standard worldwide. This tool uses the current WCAG formula.